commit 8a6d5e88762361bf70eb232631ebaaa5273abc0b
Author: Asgarsk <asgar.shaikh@tech4biz.io>
Date:   Thu May 22 18:25:15 2025 +0530

    Reset repository to empty state

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..a3dae2b
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,20 @@
+# Use official Node.js image as the base image
+FROM node:20-alpine
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json first to leverage Docker cache for npm install
+COPY package*.json ./
+
+# Install the application dependencies
+RUN npm install
+
+# Copy the rest of the application files into the container
+COPY . .
+
+# Expose port 5173, which Vite uses by default
+EXPOSE 5173
+
+# Run the application with `--host 0.0.0.0` to make it accessible externally
+CMD ["npm", "run", "dev"]
diff --git a/Jenkinsfile b/Jenkinsfile
new file mode 100644
index 0000000..0910ddb
--- /dev/null
+++ b/Jenkinsfile
@@ -0,0 +1,112 @@
+pipeline {
+    agent any
+
+    environment {
+        DOCKER_IMAGE = 'jassimsm/tech4biz-reactjs'
+        DOCKER_TAG = 'latest'
+        DOCKER_USERNAME = "jassimsm"
+        DOCKER_PASSWORD = "dckr_pat_c9HutePXaqreGfKi48H0WPWWfBs"
+        SSH_CREDENTIALS = 'tech4biz-demo'
+        REMOTE_SERVER = 'ubuntu@160.187.167.157'
+        REMOTE_WORKSPACE = '/home/ubuntu'
+        GIT_CREDENTIALS = 'git-cred'
+        
+    }
+
+    stages {
+        stage('Add Host Key') {
+            steps {
+                script {
+                    sshagent(credentials: [SSH_CREDENTIALS]) {
+                        sh '''
+                        mkdir -p ~/.ssh
+                        ssh-keyscan -H 160.187.167.157 >> ~/.ssh/known_hosts
+                        '''
+                    }
+                }
+            }
+        }
+        stage('Checkout and Install Dependencies on Remote Server') {
+            steps {
+                script {
+                    withCredentials([usernamePassword(credentialsId: GIT_CREDENTIALS, usernameVariable: 'GIT_USERNAME', passwordVariable: 'GIT_PASSWORD')]) {
+                        sshagent(credentials: [SSH_CREDENTIALS]) {
+                            sh ''' 
+                            ssh ${REMOTE_SERVER} "mkdir -p ${REMOTE_WORKSPACE} && cd ${REMOTE_WORKSPACE} && rm -rf Tech4Biz-Website && \
+                            git clone https://${GIT_USERNAME}:${GIT_PASSWORD}@git.tech4biz.wiki/Tech4Biz-Services/Tech4Biz-Website.git && \
+                            cd Tech4Biz-Website && git checkout main"
+                            '''
+                        }
+                    }
+                }
+            }
+        }
+
+
+        stage('Build Docker Image on Remote Server') {
+            steps {
+                script {
+                    try {
+                        sshagent(credentials: [SSH_CREDENTIALS]) {
+                            sh '''
+                            ssh ${REMOTE_SERVER} "cd ${REMOTE_WORKSPACE}/Tech4Biz-Website && docker build -t ${DOCKER_IMAGE}:${DOCKER_TAG} ."
+                            '''
+                        }
+                    } catch (Exception e) {
+                        error "Failed to build Docker image on remote server: ${e.message}"
+                    }
+                }
+            }
+        }
+
+        stage('Push Docker Image from Remote Server') {
+            steps {
+                script {
+                    try {
+                        sshagent(credentials: [SSH_CREDENTIALS]) {
+                            sh '''
+                            ssh ${REMOTE_SERVER} "echo ${DOCKER_PASSWORD} | docker login -u ${DOCKER_USERNAME} --password-stdin && docker push ${DOCKER_IMAGE}:${DOCKER_TAG}"
+                            '''
+                        }
+                    } catch (Exception e) {
+                        error "Failed to push Docker image from remote server: ${e.message}"
+                    }
+                }
+            }
+        }
+
+        stage('Deploy') {
+            steps {
+                script {
+                    sshagent(credentials: [SSH_CREDENTIALS]) {
+                        sh '''
+                        ssh ${REMOTE_SERVER} "cd ${REMOTE_WORKSPACE}/Tech4Biz-Website && \
+                        docker pull ${DOCKER_IMAGE}:${DOCKER_TAG} && \
+                        docker stop tech4biz-container || true && \
+                        docker rm tech4biz-container || true && \
+                        docker run -d -p 5173:5173 --name tech4biz-container ${DOCKER_IMAGE}:${DOCKER_TAG}"
+                        '''
+                    }
+                }
+            }
+        }
+
+        stage('Update Nginx Configuration') {
+            steps {
+                script {
+                    sshagent(credentials: [SSH_CREDENTIALS]) {
+                        sh '''
+                        ssh ${REMOTE_SERVER} "sudo nginx -t && sudo systemctl reload nginx"
+                        '''
+                    }
+                }
+            }
+        }
+    }
+
+    post {
+        always {
+            cleanWs()
+        }
+    }
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f768e33
--- /dev/null
+++ b/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/Tech4biz-Version01/Tech4biz/.gitignore b/Tech4biz-Version01/Tech4biz/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Tech4biz-Version01/Tech4biz/Dockerfile b/Tech4biz-Version01/Tech4biz/Dockerfile
new file mode 100644
index 0000000..07c028a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/Dockerfile
@@ -0,0 +1,23 @@
+FROM node:23.7.0-alpine3.20 AS builder
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+FROM node:23.7.0-alpine3.20 AS production
+
+WORKDIR /app
+
+COPY --from=builder /app/dist ./dist
+
+RUN npm install -g serve
+
+EXPOSE 5173
+
+CMD ["serve", "-s", "dist", "-l", "5173"]
diff --git a/Tech4biz-Version01/Tech4biz/Jenkinsfile b/Tech4biz-Version01/Tech4biz/Jenkinsfile
new file mode 100644
index 0000000..417c398
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/Jenkinsfile
@@ -0,0 +1,103 @@
+pipeline {
+    agent any
+
+    environment {
+        SSH_CREDENTIALS = 'tech4biz-web'
+        GIT_CREDENTIALS = 'gitea-cred'
+        REPO_URL = 'https://git.tech4biz.wiki/Tech4Biz-Services/Tech4Biz-Website-Containerized.git'
+        BRANCH = 'main'
+        REMOTE_SERVER = 'ubuntu@160.187.167.14'
+        REMOTE_DIR = '/home/ubuntu/tech4biz-website'
+        IMAGE_NAME = 'tech4biz-web'
+        CONTAINER_NAME = 'tech4biz-web'
+        APP_PORT = '5173'
+        NOTIFY_EMAIL = 'devops@tech4biz.wiki'
+    }
+
+    options {
+        disableConcurrentBuilds()
+    }
+
+    stages {
+        stage('Add Remote Host Key') {
+            steps {
+                echo "🔑 Adding remote host key to known_hosts..."
+                sshagent(credentials: [SSH_CREDENTIALS]) {
+                    sh '''
+                    mkdir -p ~/.ssh
+                    ssh-keyscan -H 160.187.167.14 >> ~/.ssh/known_hosts
+                    '''
+                }
+            }
+        }
+
+        stage('Checkout Code from Gitea') {
+            steps {
+                echo "📦 Cloning repository from Gitea..."
+                git credentialsId: "${GIT_CREDENTIALS}", url: "${REPO_URL}", branch: "${BRANCH}"
+            }
+        }
+
+      stage('Deploy and Build Docker Image') {
+    steps {
+        echo "🚢 Sending code to remote and building Docker image..."
+        sshagent(credentials: [SSH_CREDENTIALS]) {
+            sh '''
+            ssh ${REMOTE_SERVER} "sudo mkdir -p ${REMOTE_DIR} && sudo chown -R ubuntu:ubuntu ${REMOTE_DIR}"
+            
+            # Exclude .git directory to prevent file not found errors
+            rsync -avz --delete --exclude='.git' ./ ${REMOTE_SERVER}:${REMOTE_DIR}/
+            
+            ssh ${REMOTE_SERVER} "cd ${REMOTE_DIR} && docker build -t ${IMAGE_NAME} ."
+            '''
+        }
+    }
+}
+
+
+        stage('Run Docker Container') {
+            steps {
+                echo "🐳 Running Docker container on remote server..."
+                sshagent(credentials: [SSH_CREDENTIALS]) {
+                    sh '''
+                    ssh ${REMOTE_SERVER} "docker rm -f ${CONTAINER_NAME} || true && \
+                                         docker run -d -p ${APP_PORT}:${APP_PORT} --name ${CONTAINER_NAME} ${IMAGE_NAME} && \
+                                         docker update --restart=always ${CONTAINER_NAME}"
+                    '''
+                }
+            }
+        }
+
+        stage('Reload Nginx') {
+            steps {
+                echo "🌐 Reloading Nginx on remote server..."
+                sshagent(credentials: [SSH_CREDENTIALS]) {
+                    sh '''
+                    ssh ${REMOTE_SERVER} "sudo nginx -t && sudo systemctl reload nginx"
+                    '''
+                }
+            }
+        }
+    }
+
+    post {
+        success {
+            echo "✅ Deployment succeeded. Sending notification email..."
+            mail to: "${NOTIFY_EMAIL}",
+                 subject: "✅ Jenkins Job Success: ${env.JOB_NAME} #${env.BUILD_NUMBER}",
+                 body: "Good news!\n\nThe Jenkins job ${env.JOB_NAME} #${env.BUILD_NUMBER} completed successfully.\n\n- Jenkins"
+        }
+
+        failure {
+            echo "❌ Deployment failed. Sending notification email..."
+            mail to: "${NOTIFY_EMAIL}",
+                 subject: "❌ Jenkins Job Failed: ${env.JOB_NAME} #${env.BUILD_NUMBER}",
+                 body: "The Jenkins job ${env.JOB_NAME} #${env.BUILD_NUMBER} has failed.\nPlease check the Jenkins console output for more details.\n\n- Jenkins"
+        }
+
+        always {
+            echo "🧹 Cleaning workspace..."
+            cleanWs()
+        }
+    }
+}
diff --git a/Tech4biz-Version01/Tech4biz/README.md b/Tech4biz-Version01/Tech4biz/README.md
new file mode 100644
index 0000000..f768e33
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/Tech4biz-Version01/Tech4biz/eslint.config.js b/Tech4biz-Version01/Tech4biz/eslint.config.js
new file mode 100644
index 0000000..238d2e4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/Tech4biz-Version01/Tech4biz/index.html b/Tech4biz-Version01/Tech4biz/index.html
new file mode 100644
index 0000000..6afdca5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="public/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="google-site-verification" content="v6_dy8N7Ck7nbEe-68tZ7wwTFK6TsLkbET3BjYRKZ-A" />
+    <meta name="description" content="360-degree engineering for scalable, AI-driven, and cloud-powered growth. Future-ready solutions that drive innovation, efficiency, and success." />
+    <title>Tech4Biz Solutions | Tech for Growth & Innovation</title>
+    <script>
+      !function () {
+        var reb2b = window.reb2b = window.reb2b || [];
+        if (reb2b.invoked) return;
+        reb2b.invoked = true;
+        reb2b.methods = ["identify", "collect"];
+        reb2b.factory = function (method) {
+          return function () {
+            var args = Array.prototype.slice.call(arguments);
+            args.unshift(method);
+            reb2b.push(args);
+            return reb2b;
+          };
+        };
+        for (var i = 0; i < reb2b.methods.length; i++) {
+          var key = reb2b.methods[i];
+          reb2b[key] = reb2b.factory(key);
+        }
+        reb2b.load = function (key) {
+          var script = document.createElement("script");
+          script.type = "text/javascript";
+          script.async = true;
+          script.src = "https://s3-us-west-2.amazonaws.com/b2bjsstore/b/VN080HXQ3V6J.js.gz";
+          var first = document.getElementsByTagName("script")[0];
+          first.parentNode.insertBefore(script, first);
+        };
+        reb2b.SNIPPET_VERSION = "1.0.1";
+        reb2b.load("VN080HXQ3V6J");
+      }();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/Tech4biz-Version01/Tech4biz/package-lock.json b/Tech4biz-Version01/Tech4biz/package-lock.json
new file mode 100644
index 0000000..4d238bf
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/package-lock.json
@@ -0,0 +1,7573 @@
+{
+  "name": "tech4biz",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "tech4biz",
+      "version": "0.0.0",
+      "dependencies": {
+        "@headlessui/react": "^2.2.0",
+        "@heroicons/react": "^2.2.0",
+        "antd": "^5.24.2",
+        "axios": "^1.7.9",
+        "embla-carousel-react": "^8.5.2",
+        "framer-motion": "^12.0.5",
+        "gsap": "^3.12.7",
+        "lodash": "^4.17.21",
+        "lucide-react": "^0.474.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-google-recaptcha": "^3.1.0",
+        "react-helmet": "^6.1.0",
+        "react-helmet-async": "^2.0.5",
+        "react-icons": "^5.4.0",
+        "react-intersection-observer": "^9.15.1",
+        "react-loading-skeleton": "^3.5.0",
+        "react-phone-input-2": "^2.15.1",
+        "react-router-dom": "^7.1.3",
+        "styled-components": "^6.1.15",
+        "vite": "^6.0.8"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.17.0",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
+        "@vitejs/plugin-react": "^4.2.1",
+        "autoprefixer": "^10.4.17",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react": "^7.33.2",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.5",
+        "globals": "^15.14.0",
+        "postcss": "^8.4.35",
+        "tailwindcss": "^3.4.1"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@ant-design/colors": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.2.0.tgz",
+      "integrity": "sha512-bjTObSnZ9C/O8MB/B4OUtd/q9COomuJAR2SYfhxLyHvCKn4EKwCN3e+fWGMo7H5InAyV0wL17jdE9ALrdOW/6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6"
+      }
+    },
+    "node_modules/@ant-design/cssinjs": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.23.0.tgz",
+      "integrity": "sha512-7GAg9bD/iC9ikWatU9ym+P9ugJhi/WbsTWzcKN6T4gU0aehsprtke1UAaaSxxkjjmkJb3llet/rbUSLPgwlY4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "classnames": "^2.3.1",
+        "csstype": "^3.1.3",
+        "rc-util": "^5.35.0",
+        "stylis": "^4.3.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs-utils": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs-utils/-/cssinjs-utils-1.1.3.tgz",
+      "integrity": "sha512-nOoQMLW1l+xR1Co8NFVYiP8pZp3VjIIzqV6D6ShYF2ljtdwWJn5WSsH+7kvCktXL/yhEtWURKOfH5Xz/gzlwsg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/cssinjs": "^1.21.0",
+        "@babel/runtime": "^7.23.2",
+        "rc-util": "^5.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@ant-design/cssinjs/node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/cssinjs/node_modules/stylis": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
+      "integrity": "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/fast-color": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-2.0.6.tgz",
+      "integrity": "sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@ant-design/icons": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.6.1.tgz",
+      "integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/icons-svg": "^4.4.0",
+        "@babel/runtime": "^7.24.8",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.31.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/@ant-design/icons-svg": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz",
+      "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==",
+      "license": "MIT"
+    },
+    "node_modules/@ant-design/react-slick": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
+      "integrity": "sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.4",
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "throttle-debounce": "^5.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.5.tgz",
+      "integrity": "sha512-XvcZi1KWf88RVbF9wn8MN6tYFloU5qX8KjuF3E1PVBmJ9eypXfs4GRiJwLuTZL0iSnJUKn1BFPa5BPZZJyFzPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.7.tgz",
+      "integrity": "sha512-SRijHmF0PSPgLIBYlWnG0hyeJLwXE2CgpsXaMOrtt2yp9/86ALw6oUlj9KYuZ0JN07T4eBMVIW4li/9S1j2BGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.5",
+        "@babel/helper-compilation-targets": "^7.26.5",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.7",
+        "@babel/parser": "^7.26.7",
+        "@babel/template": "^7.25.9",
+        "@babel/traverse": "^7.26.7",
+        "@babel/types": "^7.26.7",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.5.tgz",
+      "integrity": "sha512-2caSP6fN9I7HOe6nqhtft7V4g7/V/gfDsC3Ag4W7kEzzvRGKqiv0pu0HogPiZ3KaVSoNDhUws6IJjDjpfmYIXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.26.5",
+        "@babel/types": "^7.26.5",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.26.5.tgz",
+      "integrity": "sha512-IXuyn5EkouFJscIDuFF5EsiSolseme1s0CZB+QxVugqJLYmKdxI1VfIBOst0SUu4rnk2Z7kqTwmoO1lp3HIfnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.26.5",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.26.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz",
+      "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.7.tgz",
+      "integrity": "sha512-8NHiL98vsi0mbPQmYAGWwfcFaOy4j2HY49fXJCfuDcdE7fMIsH9a7GdaeXpIBsbT7307WU8KCMp5pUVDNL4f9A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.7.tgz",
+      "integrity": "sha512-kEvgGGgEjRUutvdVvZhbn/BxVt+5VSpwXz1j3WYXQbXDo8KzFOPNG2GQbdAiNq8g6wn1yKk7C/qrke03a84V+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.7"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz",
+      "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz",
+      "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.9",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
+      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.7.tgz",
+      "integrity": "sha512-1x1sgeyRLC3r5fQOM0/xtQKsYjyxmFjaOrLJNtZ81inNjyJHGIolTULPiSc/2qe1/qfpFLisLQYFnnZl7QoedA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.5",
+        "@babel/parser": "^7.26.7",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.7",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.7",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.7.tgz",
+      "integrity": "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
+      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.8.1"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
+      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
+      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
+      "license": "MIT"
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
+      "integrity": "sha512-thpVCb/rhxE/BnMLQ7GReQLLN8q9qbHmI55F4489/ByVg2aQaQ6kbcLb6FHkocZzQhxc4gx0sCk0tJkKBFzDhA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.24.2.tgz",
+      "integrity": "sha512-tmwl4hJkCfNHwFB3nBa8z1Uy3ypZpxqxfTQOcHX+xRByyYgunVbZ9MzUUfb0RxaHIMnbHagwAxuTL+tnNM+1/Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.24.2.tgz",
+      "integrity": "sha512-cNLgeqCqV8WxfcTIOeL4OAtSmL8JjcN6m09XIgro1Wi7cF4t/THaWEa7eL5CMoMBdjoHOTh/vwTO/o2TRXIyzg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.24.2.tgz",
+      "integrity": "sha512-B6Q0YQDqMx9D7rvIcsXfmJfvUYLoP722bgfBlO5cGvNVb5V/+Y7nhBE3mHV9OpxBf4eAS2S68KZztiPaWq4XYw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.24.2.tgz",
+      "integrity": "sha512-kj3AnYWc+CekmZnS5IPu9D+HWtUI49hbnyqk0FLEJDbzCIQt7hg7ucF1SQAilhtYpIujfaHr6O0UHlzzSPdOeA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.24.2.tgz",
+      "integrity": "sha512-WeSrmwwHaPkNR5H3yYfowhZcbriGqooyu3zI/3GGpF8AyUdsrrP0X6KumITGA9WOyiJavnGZUwPGvxvwfWPHIA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-UN8HXjtJ0k/Mj6a9+5u6+2eZ2ERD7Edt1Q9IZiB5UZAIdPnVKDoG7mdTVGhHJIeEml60JteamR3qhsr1r8gXvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.24.2.tgz",
+      "integrity": "sha512-TvW7wE/89PYW+IevEJXZ5sF6gJRDY/14hyIGFXdIucxCsbRmLUcjseQu1SyTko+2idmCw94TgyaEZi9HUSOe3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.24.2.tgz",
+      "integrity": "sha512-n0WRM/gWIdU29J57hJyUdIsk0WarGd6To0s+Y+LwvlC55wt+GT/OgkwoXCXvIue1i1sSNWblHEig00GBWiJgfA==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.24.2.tgz",
+      "integrity": "sha512-7HnAD6074BW43YvvUmE/35Id9/NB7BeX5EoNkK9obndmZBUk8xmJJeU7DwmUeN7tkysslb2eSl6CTrYz6oEMQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.24.2.tgz",
+      "integrity": "sha512-sfv0tGPQhcZOgTKO3oBE9xpHuUqguHvSo4jl+wjnKwFpapx+vUDcawbwPNuBIAYdRAvIDBfZVvXprIj3HA+Ugw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.24.2.tgz",
+      "integrity": "sha512-CN9AZr8kEndGooS35ntToZLTQLHEjtVB5n7dl8ZcTZMonJ7CCfStrYhrzF97eAecqVbVJ7APOEe18RPI4KLhwQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.24.2.tgz",
+      "integrity": "sha512-iMkk7qr/wl3exJATwkISxI7kTcmHKE+BlymIAbHO8xanq/TjHaaVThFF6ipWzPHryoFsesNQJPE/3wFJw4+huw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.24.2.tgz",
+      "integrity": "sha512-shsVrgCZ57Vr2L8mm39kO5PPIb+843FStGt7sGGoqiiWYconSxwTiuswC1VJZLCjNiMLAMh34jg4VSEQb+iEbw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.24.2.tgz",
+      "integrity": "sha512-4eSFWnU9Hhd68fW16GD0TINewo1L6dRrB+oLNNbYyMUAeOD2yCK5KXGK1GH4qD/kT+bTEXjsyTCiJGHPZ3eM9Q==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.24.2.tgz",
+      "integrity": "sha512-S0Bh0A53b0YHL2XEXC20bHLuGMOhFDO6GN4b3YjRLK//Ep3ql3erpNcPlEFed93hsQAjAQDNsvcK+hV90FubSw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.24.2.tgz",
+      "integrity": "sha512-8Qi4nQcCTbLnK9WoMjdC9NiTG6/E38RNICU6sUNqK0QFxCYgoARqVqxdFmWkdonVsvGqWhmm7MO0jyTqLqwj0Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-wuLK/VztRRpMt9zyHSazyCVdCXlpHkKm34WUyinD2lzK07FAHTq0KQvZZlXikNWkDGoT6x3TD51jKQ7gMVpopw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-VefFaQUc4FMmJuAxmIHgUmfNiLXY438XrL4GDNV1Y1H/RW3qow68xTwjZKfj/+Plp9NANmzbH5R40Meudu8mmw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.24.2.tgz",
+      "integrity": "sha512-YQbi46SBct6iKnszhSvdluqDmxCJA+Pu280Av9WICNwQmMxV7nLRHZfjQzwbPs3jeWnuAhE9Jy0NrnJ12Oz+0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.24.2.tgz",
+      "integrity": "sha512-+iDS6zpNM6EnJyWv0bMGLWSWeXGN/HTaF/LXHXHwejGsVi+ooqDfMCCTerNFxEkM3wYVcExkeGXNqshc9iMaOA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.24.2.tgz",
+      "integrity": "sha512-hTdsW27jcktEvpwNHJU4ZwWFGkz2zRJUz8pvddmXPtXDzVKTTINmlmga3ZzwcuMpUvLw7JkLy9QLKyGpD2Yxig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.24.2.tgz",
+      "integrity": "sha512-LihEQ2BBKVFLOC9ZItT9iFprsE9tqjDjnbulhHoFxYQtQfai7qfluVODIYxt1PgdoyQkz23+01rzwNwYfutxUQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.24.2.tgz",
+      "integrity": "sha512-q+iGUwfs8tncmFC9pcnD5IvRHAzmbwQ3GPS5/ceCyHdjXubwQWI12MKWSNSMYLJMq23/IUCvJMS76PDqXe1fxA==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.24.2.tgz",
+      "integrity": "sha512-7VTgWzgMGvup6aSqDPLiW5zHaxYJGTO4OokMjIlrCtf+VpEL+cXKtCvg723iguPYI5oaUNdS+/V7OU2gvXVWEg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.1.tgz",
+      "integrity": "sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.5",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.10.0.tgz",
+      "integrity": "sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
+      "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.19.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.19.0.tgz",
+      "integrity": "sha512-rbq9/g38qjfqFLOVPvwjIvFFdNziEC5S65jmjPw5r6A//QH+W91akh9irMwjDN8zKUTak6W9EsAv4m/7Wnw0UQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.5.tgz",
+      "integrity": "sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.5.tgz",
+      "integrity": "sha512-lB05FkqEdUg2AA0xEbUz0SnkXT1LcCTa438W4IWTUh4hdOnVbQyOJ81OrDXsJk/LSiJHubgGEFoR5EHq1NsH1A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.10.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.28",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.28.tgz",
+      "integrity": "sha512-yORQuuAtVpiRjpMhdc0wJj06b9JFjrYF4qp96j++v2NBpbi6SEGF7donUJ3TMieerQ6qVkAv1tgr7L4r5roTqw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.2",
+        "@floating-ui/utils": "^0.2.8",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
+      "license": "MIT"
+    },
+    "node_modules/@headlessui/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-RzCEg+LXsuI7mHiSomsu/gBJSjpupm6A1qIZ5sWjd7JhARNlMiSA4kKfJpCKwU9tE+zMRterhhrP74PvfJrpXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@tanstack/react-virtual": "^3.8.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@heroicons/react": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.2.0.tgz",
+      "integrity": "sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.8",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
+      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@rc-component/async-validator": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz",
+      "integrity": "sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4"
+      },
+      "engines": {
+        "node": ">=14.x"
+      }
+    },
+    "node_modules/@rc-component/color-picker": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/color-picker/-/color-picker-2.0.1.tgz",
+      "integrity": "sha512-WcZYwAThV/b2GISQ8F+7650r5ZZJ043E57aVBFkQ+kSY4C6wdofXgB0hBx+GPGpIU0Z81eETNoDUJMr7oy/P8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/fast-color": "^2.0.6",
+        "@babel/runtime": "^7.23.6",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.38.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/context": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.4.0.tgz",
+      "integrity": "sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/mini-decimal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz",
+      "integrity": "sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      }
+    },
+    "node_modules/@rc-component/mutate-observer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz",
+      "integrity": "sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz",
+      "integrity": "sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/qrcode": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/qrcode/-/qrcode-1.0.0.tgz",
+      "integrity": "sha512-L+rZ4HXP2sJ1gHMGHjsg9jlYBX/SLN2D6OxP9Zn3qgtpMWtO2vUfxVFwiogHpAIqs54FnALxraUy/BCO1yRIgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.38.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/tour": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.15.1.tgz",
+      "integrity": "sha512-Tr2t7J1DKZUpfJuDZWHxyxWpfmj8EZrqSgyMZ+BCdvKZ6r1UDsfU46M/iWAAFBy961Ssfom2kv5f3UcjIL2CmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/portal": "^1.0.0-9",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@rc-component/trigger": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@rc-component/trigger/-/trigger-2.2.6.tgz",
+      "integrity": "sha512-/9zuTnWwhQ3S3WT1T8BubuFTT46kvnXgaERR9f4BTKyn61/wpf/BvbImzYBubzJibU707FxwbKszLlHjcLiv1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2",
+        "@rc-component/portal": "^1.1.0",
+        "classnames": "^2.3.2",
+        "rc-motion": "^2.0.0",
+        "rc-resize-observer": "^1.3.1",
+        "rc-util": "^5.44.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/@react-aria/focus": {
+      "version": "3.19.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.19.1.tgz",
+      "integrity": "sha512-bix9Bu1Ue7RPcYmjwcjhB14BMu2qzfJ3tMQLqDc9pweJA66nOw8DThy3IfVr8Z7j2PHktOLf9kcbiZpydKHqzg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/interactions": "^3.23.0",
+        "@react-aria/utils": "^3.27.0",
+        "@react-types/shared": "^3.27.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.23.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.23.0.tgz",
+      "integrity": "sha512-0qR1atBIWrb7FzQ+Tmr3s8uH5mQdyRH78n0krYaG8tng9+u1JlSi8DGRSaC9ezKyNB84m7vHT207xnHXGeJ3Fg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.7",
+        "@react-aria/utils": "^3.27.0",
+        "@react-types/shared": "^3.27.0",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.7",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.7.tgz",
+      "integrity": "sha512-GQygZaGlmYjmYM+tiNBA5C6acmiDWF52Nqd40bBp0Znk4M4hP+LTmI0lpI1BuKMw45T8RIhrAsICIfKwZvi2Gg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.27.0.tgz",
+      "integrity": "sha512-p681OtApnKOdbeN8ITfnnYqfdHS0z7GE+4l8EXlfLnr70Rp/9xicBO6d2rU+V/B3JujDw2gPWxYKEnEeh0CGCw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.7",
+        "@react-stately/utils": "^3.10.5",
+        "@react-types/shared": "^3.27.0",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.5",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.5.tgz",
+      "integrity": "sha512-iMQSGcpaecghDIh3mZEpZfoFH3ExBwTtuBEcvZ2XnGzCgQjeYXcMdIUwAfVQLXFTdHUHGF6Gu6/dFrYsCzySBQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.27.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.27.0.tgz",
+      "integrity": "sha512-gvznmLhi6JPEf0bsq7SwRYTHAKKq/wcmKqFez9sRdbED+SPMUmK5omfZ6w3EwUFQHbYUa4zPBYedQ7Knv70RMw==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.0.tgz",
+      "integrity": "sha512-G2fUQQANtBPsNwiVFg4zKiPQyjVKZCUdQUol53R8E71J7AsheRMV/Yv/nB8giOcOVqP7//eB5xPqieBYZe9bGg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.32.0.tgz",
+      "integrity": "sha512-qhFwQ+ljoymC+j5lXRv8DlaJYY/+8vyvYmVx074zrLsu5ZGWYsJNLjPPVJJjhZQpyAKUGPydOq9hRLLNvh1s3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.32.0.tgz",
+      "integrity": "sha512-44n/X3lAlWsEY6vF8CzgCx+LQaoqWGN7TzUfbJDiTIOjJm4+L2Yq+r5a8ytQRGyPqgJDs3Rgyo8eVL7n9iW6AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.32.0.tgz",
+      "integrity": "sha512-F9ct0+ZX5Np6+ZDztxiGCIvlCaW87HBdHcozUfsHnj1WCUTBUubAoanhHUfnUHZABlElyRikI0mgcw/qdEm2VQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.32.0.tgz",
+      "integrity": "sha512-JpsGxLBB2EFXBsTLHfkZDsXSpSmKD3VxXCgBQtlPcuAqB8TlqtLcbeMhxXQkCDv1avgwNjF8uEIbq5p+Cee0PA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.32.0.tgz",
+      "integrity": "sha512-wegiyBT6rawdpvnD9lmbOpx5Sph+yVZKHbhnSP9MqUEDX08G4UzMU+D87jrazGE7lRSyTRs6NEYHtzfkJ3FjjQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.32.0.tgz",
+      "integrity": "sha512-3pA7xecItbgOs1A5H58dDvOUEboG5UfpTq3WzAdF54acBbUM+olDJAPkgj1GRJ4ZqE12DZ9/hNS2QZk166v92A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.32.0.tgz",
+      "integrity": "sha512-Y7XUZEVISGyge51QbYyYAEHwpGgmRrAxQXO3siyYo2kmaj72USSG8LtlQQgAtlGfxYiOwu+2BdbPjzEpcOpRmQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.32.0.tgz",
+      "integrity": "sha512-r7/OTF5MqeBrZo5omPXcTnjvv1GsrdH8a8RerARvDFiDwFpDVDnJyByYM/nX+mvks8XXsgPUxkwe/ltaX2VH7w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.32.0.tgz",
+      "integrity": "sha512-HJbifC9vex9NqnlodV2BHVFNuzKL5OnsV2dvTw6e1dpZKkNjPG6WUq+nhEYV6Hv2Bv++BXkwcyoGlXnPrjAKXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.32.0.tgz",
+      "integrity": "sha512-VAEzZTD63YglFlWwRj3taofmkV1V3xhebDXffon7msNz4b14xKsz7utO6F8F4cqt8K/ktTl9rm88yryvDpsfOw==",
+      "cpu": [
+        "loong64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.32.0.tgz",
+      "integrity": "sha512-Sts5DST1jXAc9YH/iik1C9QRsLcCoOScf3dfbY5i4kH9RJpKxiTBXqm7qU5O6zTXBTEZry69bGszr3SMgYmMcQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.32.0.tgz",
+      "integrity": "sha512-qhlXeV9AqxIyY9/R1h1hBD6eMvQCO34ZmdYvry/K+/MBs6d1nRFLm6BOiITLVI+nFAAB9kUB6sdJRKyVHXnqZw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.32.0.tgz",
+      "integrity": "sha512-8ZGN7ExnV0qjXa155Rsfi6H8M4iBBwNLBM9lcVS+4NcSzOFaNqmt7djlox8pN1lWrRPMRRQ8NeDlozIGx3Omsw==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.32.0.tgz",
+      "integrity": "sha512-VDzNHtLLI5s7xd/VubyS10mq6TxvZBp+4NRWoW+Hi3tgV05RtVm4qK99+dClwTN1McA6PHwob6DEJ6PlXbY83A==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.32.0.tgz",
+      "integrity": "sha512-qcb9qYDlkxz9DxJo7SDhWxTWV1gFuwznjbTiov289pASxlfGbaOD54mgbs9+z94VwrXtKTu+2RqwlSTbiOqxGg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.32.0.tgz",
+      "integrity": "sha512-pFDdotFDMXW2AXVbfdUEfidPAk/OtwE/Hd4eYMTNVVaCQ6Yl8et0meDaKNL63L44Haxv4UExpv9ydSf3aSayDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.32.0.tgz",
+      "integrity": "sha512-/TG7WfrCAjeRNDvI4+0AAMoHxea/USWhAzf9PVDFHbcqrQ7hMMKp4jZIy4VEjk72AAfN5k4TiSMRXRKf/0akSw==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.32.0.tgz",
+      "integrity": "sha512-5hqO5S3PTEO2E5VjCePxv40gIgyS2KvO7E7/vvC/NbIW4SIRamkMr1hqj+5Y67fbBWv/bQLB6KelBQmXlyCjWA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.0.tgz",
+      "integrity": "sha512-CchF0NlLIowiM2GxtsoKBkXA4uqSnY2KvnXo+kyUFD4a4ll6+J0qzoRsUPMwXV/H26lRsxgJIr/YmjYum2oEjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.0.tgz",
+      "integrity": "sha512-NBKJP3OIdmZY3COJdWkSonr50FMVIi+aj5ZJ7hI/DTpEKg2RMfo/KvP8A3B/zOSpMgIe52B5E2yn7rryULzA6g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
+      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/cookie": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz",
+      "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.14",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.18",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
+      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.5",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
+      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/@types/stylis": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
+      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
+      "license": "MIT"
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
+      "integrity": "sha512-SCCPBJtYLdE8PX/7ZQAs1QAZ8Jqwih+0VBLum1EGqmCCQal+MIUqLCzj3ZUy8ufbC0cAM4LRlSTm7IQJwWT4ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.26.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.25.9",
+        "@babel/plugin-transform-react-jsx-source": "^7.25.9",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/antd": {
+      "version": "5.24.2",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.24.2.tgz",
+      "integrity": "sha512-7Z9HsE3ZIK3sE/WuUqii3w7Gl1IJuRL21sDUTtkN95JS5KhRYP8ISv7m/HxsJ3Mn/yxgojBCgLPJ212+Dn+aPw==",
+      "license": "MIT",
+      "dependencies": {
+        "@ant-design/colors": "^7.2.0",
+        "@ant-design/cssinjs": "^1.23.0",
+        "@ant-design/cssinjs-utils": "^1.1.3",
+        "@ant-design/fast-color": "^2.0.6",
+        "@ant-design/icons": "^5.6.1",
+        "@ant-design/react-slick": "~1.1.2",
+        "@babel/runtime": "^7.26.0",
+        "@rc-component/color-picker": "~2.0.1",
+        "@rc-component/mutate-observer": "^1.1.0",
+        "@rc-component/qrcode": "~1.0.0",
+        "@rc-component/tour": "~1.15.1",
+        "@rc-component/trigger": "^2.2.6",
+        "classnames": "^2.5.1",
+        "copy-to-clipboard": "^3.3.3",
+        "dayjs": "^1.11.11",
+        "rc-cascader": "~3.33.0",
+        "rc-checkbox": "~3.5.0",
+        "rc-collapse": "~3.9.0",
+        "rc-dialog": "~9.6.0",
+        "rc-drawer": "~7.2.0",
+        "rc-dropdown": "~4.2.1",
+        "rc-field-form": "~2.7.0",
+        "rc-image": "~7.11.0",
+        "rc-input": "~1.7.2",
+        "rc-input-number": "~9.4.0",
+        "rc-mentions": "~2.19.1",
+        "rc-menu": "~9.16.1",
+        "rc-motion": "^2.9.5",
+        "rc-notification": "~5.6.3",
+        "rc-pagination": "~5.1.0",
+        "rc-picker": "~4.11.2",
+        "rc-progress": "~4.0.0",
+        "rc-rate": "~2.13.1",
+        "rc-resize-observer": "^1.4.3",
+        "rc-segmented": "~2.7.0",
+        "rc-select": "~14.16.6",
+        "rc-slider": "~11.1.8",
+        "rc-steps": "~6.0.1",
+        "rc-switch": "~4.1.0",
+        "rc-table": "~7.50.3",
+        "rc-tabs": "~15.5.1",
+        "rc-textarea": "~1.9.0",
+        "rc-tooltip": "~6.4.0",
+        "rc-tree": "~5.13.0",
+        "rc-tree-select": "~5.27.0",
+        "rc-upload": "~4.8.1",
+        "rc-util": "^5.44.4",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "throttle-debounce": "^5.0.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/ant-design"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
+      "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "is-array-buffer": "^3.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
+      "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/async-function": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
+      "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.24.4",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
+      "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001688",
+        "electron-to-chromium": "^1.5.73",
+        "node-releases": "^2.0.19",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
+      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/call-bound": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz",
+      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/camelize": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
+      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001695",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz",
+      "integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.1.tgz",
+      "integrity": "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw==",
+      "license": "MIT"
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cookie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz",
+      "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "license": "MIT",
+      "dependencies": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/css-to-react-native": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
+      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
+      "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
+      "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/inspect-js"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
+      "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
+    "node_modules/debug": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
+      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.88",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.88.tgz",
+      "integrity": "sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/embla-carousel": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.2.tgz",
+      "integrity": "sha512-xQ9oVLrun/eCG/7ru3R+I5bJ7shsD8fFwLEY7yPe27/+fDHCNj0OT5EoG5ZbFyOxOcG6yTwW8oTz/dWyFnyGpg==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.5.2.tgz",
+      "integrity": "sha512-Tmx+uY3MqseIGdwp0ScyUuxpBgx5jX1f7od4Cm5mDwg/dptEiTKf9xp6tw0lZN2VA9JbnVMl/aikmbc53c6QFA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.5.2",
+        "embla-carousel-reactive-utils": "8.5.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.5.2.tgz",
+      "integrity": "sha512-QC8/hYSK/pEmqEdU1IO5O+XNc/Ptmmq7uCB44vKplgLKhB/l0+yvYx0+Cv0sF6Ena8Srld5vUErZkT+yTahtDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.5.2"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-abstract": {
+      "version": "1.23.9",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
+      "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.2",
+        "arraybuffer.prototype.slice": "^1.0.4",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "data-view-buffer": "^1.0.2",
+        "data-view-byte-length": "^1.0.2",
+        "data-view-byte-offset": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.1.0",
+        "es-to-primitive": "^1.3.0",
+        "function.prototype.name": "^1.1.8",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.0",
+        "get-symbol-description": "^1.1.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.1.0",
+        "is-array-buffer": "^3.0.5",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.2",
+        "is-regex": "^1.2.1",
+        "is-shared-array-buffer": "^1.0.4",
+        "is-string": "^1.1.1",
+        "is-typed-array": "^1.1.15",
+        "is-weakref": "^1.1.0",
+        "math-intrinsics": "^1.1.0",
+        "object-inspect": "^1.13.3",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.7",
+        "own-keys": "^1.0.1",
+        "regexp.prototype.flags": "^1.5.3",
+        "safe-array-concat": "^1.1.3",
+        "safe-push-apply": "^1.0.0",
+        "safe-regex-test": "^1.1.0",
+        "set-proto": "^1.0.0",
+        "string.prototype.trim": "^1.2.10",
+        "string.prototype.trimend": "^1.0.9",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.3",
+        "typed-array-byte-length": "^1.0.3",
+        "typed-array-byte-offset": "^1.0.4",
+        "typed-array-length": "^1.0.7",
+        "unbox-primitive": "^1.1.0",
+        "which-typed-array": "^1.1.18"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz",
+      "integrity": "sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.6",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.4",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
+      "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7",
+        "is-date-object": "^1.0.5",
+        "is-symbol": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.24.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.24.2.tgz",
+      "integrity": "sha512-+9egpBW8I3CD5XPe0n6BfT5fxLzxrlDzqydF3aviG+9ni1lDC/OvMHcxqEFV0+LANZG5R1bFMWfUrjVsdwxJvA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.24.2",
+        "@esbuild/android-arm": "0.24.2",
+        "@esbuild/android-arm64": "0.24.2",
+        "@esbuild/android-x64": "0.24.2",
+        "@esbuild/darwin-arm64": "0.24.2",
+        "@esbuild/darwin-x64": "0.24.2",
+        "@esbuild/freebsd-arm64": "0.24.2",
+        "@esbuild/freebsd-x64": "0.24.2",
+        "@esbuild/linux-arm": "0.24.2",
+        "@esbuild/linux-arm64": "0.24.2",
+        "@esbuild/linux-ia32": "0.24.2",
+        "@esbuild/linux-loong64": "0.24.2",
+        "@esbuild/linux-mips64el": "0.24.2",
+        "@esbuild/linux-ppc64": "0.24.2",
+        "@esbuild/linux-riscv64": "0.24.2",
+        "@esbuild/linux-s390x": "0.24.2",
+        "@esbuild/linux-x64": "0.24.2",
+        "@esbuild/netbsd-arm64": "0.24.2",
+        "@esbuild/netbsd-x64": "0.24.2",
+        "@esbuild/openbsd-arm64": "0.24.2",
+        "@esbuild/openbsd-x64": "0.24.2",
+        "@esbuild/sunos-x64": "0.24.2",
+        "@esbuild/win32-arm64": "0.24.2",
+        "@esbuild/win32-ia32": "0.24.2",
+        "@esbuild/win32-x64": "0.24.2"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.19.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.19.0.tgz",
+      "integrity": "sha512-ug92j0LepKlbbEv6hD911THhoRHmbdXt2gX+VDABAW/Ir7D3nqKdv5Pf5vtlyY6HQMTEP2skXY43ueqTCWssEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.19.0",
+        "@eslint/core": "^0.10.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "9.19.0",
+        "@eslint/plugin-kit": "^0.2.5",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.1",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.2.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.4",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz",
+      "integrity": "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz",
+      "integrity": "sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.18",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.18.tgz",
+      "integrity": "sha512-IRGEoFn3OKalm3hjfolEWGqoF/jPqeEYFp+C8B0WMzwGwBMvlRDQd06kghDhF0C61uJ6WfSDhEZE/sAQjduKgw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=8.40"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
+      "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.18.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
+      "integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.2.tgz",
+      "integrity": "sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/follow-redirects": {
+      "version": "1.15.9",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
+      "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/for-each": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.4.tgz",
+      "integrity": "sha512-kKaIINnFpzW6ffJNDjjyjrk21BkDx38c0xa/klsT8VzLCaMEefv4ZTacrcVR4DmgTeBra++jMDAfS/tS799YDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.2.tgz",
+      "integrity": "sha512-hGfm/slu0ZabnNt4oaRZ6uREyfCj6P4fT/n6A1rGV+Z0VdGXjfOhVUpkn6qVQONHGIFwmveGXyDs75+nr6FM8w==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "12.0.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.5.tgz",
+      "integrity": "sha512-OgfUHfL+u80uCf6VzkV7j3+H2W9zPMdV+40bug4ftB0C2+0FpfNca2rbH2Fouq2R7//bjw6tJhOwXsrsM4+LKw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
+      "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "functions-have-names": "^1.2.3",
+        "hasown": "^2.0.2",
+        "is-callable": "^1.2.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz",
+      "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.0",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
+      "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globals": {
+      "version": "15.14.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.14.0.tgz",
+      "integrity": "sha512-OkToC372DtlQeje9/zHIo5CT8lRP/FUgEOKBEhU4e0abL7J7CD24fD9ohiLN5hagG/kWCYj4K5oaxxtj2Z0Dig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gsap": {
+      "version": "3.12.7",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.7.tgz",
+      "integrity": "sha512-V4GsyVamhmKefvcAKaoy0h6si0xX7ogwBoBSs2CTJwt7luW0oZzC0LhdkyuKV8PJAXr7Yaj8pMjCKD4GJ+eEMg==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
+      "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
+      "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
+      "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
+      "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
+      "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "async-function": "^1.0.0",
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.1",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
+      "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.1.tgz",
+      "integrity": "sha512-l9qO6eFlUETHtuihLcYOaLKByJ1f+N4kthcU9YjHy3N+B3hWv0y/2Nd0mu/7lTFnRQHTrSdXF50HQ3bl5fEnng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
+      "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
+      "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
+      "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
+      "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-proto": "^1.0.0",
+        "has-tostringtag": "^1.0.2",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
+      "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
+      "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
+      "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
+      "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
+      "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "safe-regex-test": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
+      "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.0.tgz",
+      "integrity": "sha512-SXM8Nwyys6nT5WP6pltOwKytLV7FqQ4UiibxVmW+EIosHcmCqkkjViTb5SNssDlkCiEYRP1/pdWUKVvZBmsR2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
+      "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "get-intrinsic": "^1.2.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "devOptional": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "string-convert": "^0.2.0"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.reduce": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/lodash.reduce/-/lodash.reduce-4.6.0.tgz",
+      "integrity": "sha512-6raRe2vxCYBhpBu+B+TtNGUzah+hQjVdu3E17wfusjyrXBka2nBS8OH/gjVZ5PvHOhWmIZTYri09Z6n/QfnNMw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.startswith": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/lodash.startswith/-/lodash.startswith-4.2.1.tgz",
+      "integrity": "sha512-XClYR1h4/fJ7H+mmCKppbiBmljN/nGs73iq2SjCT9SF4CBPoUHzLvWmH1GtZMhMBZSiRkHXfeA2RY1eIlJ75ww==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.474.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.474.0.tgz",
+      "integrity": "sha512-CmghgHkh0OJNmxGKWc0qfPJCYHASPMVSyGY8fj3xgk4v84ItqDg64JNKFZn5hC6E0vHi6gxnbCgwhyVB09wQtA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.8",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.19",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
+      "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
+      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
+      "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/own-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
+      "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.6",
+        "object-keys": "^1.1.1",
+        "safe-push-apply": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/rc-cascader": {
+      "version": "3.33.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.33.0.tgz",
+      "integrity": "sha512-JvZrMbKBXIbEDmpIORxqvedY/bck6hGbs3hxdWT8eS9wSQ1P7//lGxbyKjOSyQiVBbgzNWriSe6HoMcZO/+0rQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "classnames": "^2.3.1",
+        "rc-select": "~14.16.2",
+        "rc-tree": "~5.13.0",
+        "rc-util": "^5.43.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-checkbox": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-3.5.0.tgz",
+      "integrity": "sha512-aOAQc3E98HteIIsSqm6Xk2FPKIER6+5vyEFMZfo73TqM+VVAIqOkHoPjgKLqSNtVLWScoaM7vY2ZrGEheI79yg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.25.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-collapse": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.9.0.tgz",
+      "integrity": "sha512-swDdz4QZ4dFTo4RAUMLL50qP0EY62N2kvmk2We5xYdRwcRn8WcYtuetCJpwpaCbUfUt5+huLpVxhvmnK+PHrkA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.3.4",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dialog": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.6.0.tgz",
+      "integrity": "sha512-ApoVi9Z8PaCQg6FsUzS8yvBEQy0ZL2PkuvAgrmohPkN3okps5WZ5WQWPc1RNuiOKaAYv8B97ACdsFU5LizzCqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.0.0-8",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.3.0",
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-drawer": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-7.2.0.tgz",
+      "integrity": "sha512-9lOQ7kBekEJRdEpScHvtmEtXnAsy+NGDXiRWc2ZVC7QXAazNVbeT4EraQKYwCME8BJLa8Bxqxvs5swwyOepRwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@rc-component/portal": "^1.1.1",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.6.1",
+        "rc-util": "^5.38.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dropdown": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.2.1.tgz",
+      "integrity": "sha512-YDAlXsPv3I1n42dv1JpdM7wJ+gSUBfeyPK59ZpBD9jQhK9jVuxpjj3NmWQHOBceA1zEPVX84T2wbdb2SD0UjmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.44.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.11.0",
+        "react-dom": ">=16.11.0"
+      }
+    },
+    "node_modules/rc-field-form": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-2.7.0.tgz",
+      "integrity": "sha512-hgKsCay2taxzVnBPZl+1n4ZondsV78G++XVsMIJCAoioMjlMQR9YwAp7JZDIECzIu2Z66R+f4SFIRrO2DjDNAA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/async-validator": "^5.0.3",
+        "rc-util": "^5.32.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-image": {
+      "version": "7.11.0",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-7.11.0.tgz",
+      "integrity": "sha512-aZkTEZXqeqfPZtnSdNUnKQA0N/3MbgR7nUnZ+/4MfSFWPFHZau4p5r5ShaI0KPEMnNjv4kijSCFq/9wtJpwykw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/portal": "^1.0.2",
+        "classnames": "^2.2.6",
+        "rc-dialog": "~9.6.0",
+        "rc-motion": "^2.6.2",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-input": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-1.7.2.tgz",
+      "integrity": "sha512-g3nYONnl4edWj2FfVoxsU3Ec4XTE+Hb39Kfh2MFxMZjp/0gGyPUgy/v7ZhS27ZxUFNkuIDYXm9PJsLyJbtg86A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-input-number": {
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-9.4.0.tgz",
+      "integrity": "sha512-Tiy4DcXcFXAf9wDhN8aUAyMeCLHJUHA/VA/t7Hj8ZEx5ETvxG7MArDOSE6psbiSCo+vJPm4E3fGN710ITVn6GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "classnames": "^2.2.5",
+        "rc-input": "~1.7.1",
+        "rc-util": "^5.40.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-mentions": {
+      "version": "2.19.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-2.19.1.tgz",
+      "integrity": "sha512-KK3bAc/bPFI993J3necmaMXD2reZTzytZdlTvkeBbp50IGH1BDPDvxLdHDUrpQx2b2TGaVJsn+86BvYa03kGqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.22.5",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.6",
+        "rc-input": "~1.7.1",
+        "rc-menu": "~9.16.0",
+        "rc-textarea": "~1.9.0",
+        "rc-util": "^5.34.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-menu": {
+      "version": "9.16.1",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.16.1.tgz",
+      "integrity": "sha512-ghHx6/6Dvp+fw8CJhDUHFHDJ84hJE3BXNCzSgLdmNiFErWSOaZNsihDAsKq9ByTALo/xkNIwtDFGIl6r+RPXBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "2.x",
+        "rc-motion": "^2.4.3",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-motion": {
+      "version": "2.9.5",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.9.5.tgz",
+      "integrity": "sha512-w+XTUrfh7ArbYEd2582uDrEhmBHwK1ZENJiSJVb7uRxdE7qJSYjbO2eksRXmndqyKqKoYPc9ClpPh5242mV1vA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.44.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-notification": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.6.3.tgz",
+      "integrity": "sha512-42szwnn8VYQoT6GnjO00i1iwqV9D1TTMvxObWsuLwgl0TsOokzhkYiufdtQBsJMFjJravS1hfDKVMHLKLcPE4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.9.0",
+        "rc-util": "^5.20.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-overflow": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.4.1.tgz",
+      "integrity": "sha512-3MoPQQPV1uKyOMVNd6SZfONi+f3st0r8PksexIdBTeIYbMX0Jr+k7pHEDvsXtR4BpCv90/Pv2MovVNhktKrwvw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.37.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-pagination": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-5.1.0.tgz",
+      "integrity": "sha512-8416Yip/+eclTFdHXLKTxZvn70duYVGTvUUWbckCCZoIl3jagqke3GLsFrMs0bsQBikiYpZLD9206Ej4SOdOXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.38.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-picker": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-4.11.2.tgz",
+      "integrity": "sha512-Cwa3frWpefhESBF20HBJtvWx3q1hCrMxSUrzuuWMTGoZVPhQllGEp2IUfzo9jC5LKm4kJx7IrH8q/W/y9wClAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.7",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.2.1",
+        "rc-overflow": "^1.3.2",
+        "rc-resize-observer": "^1.4.0",
+        "rc-util": "^5.43.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "date-fns": ">= 2.x",
+        "dayjs": ">= 1.x",
+        "luxon": ">= 3.x",
+        "moment": ">= 2.x",
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        },
+        "dayjs": {
+          "optional": true
+        },
+        "luxon": {
+          "optional": true
+        },
+        "moment": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rc-progress": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-4.0.0.tgz",
+      "integrity": "sha512-oofVMMafOCokIUIBnZLNcOZFsABaUw8PPrf1/y0ZBvKZNpOiu5h4AO9vv11Sw0p4Hb3D0yGWuEattcQGtNJ/aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-rate": {
+      "version": "2.13.1",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.13.1.tgz",
+      "integrity": "sha512-QUhQ9ivQ8Gy7mtMZPAjLbxBt5y9GRp65VcUyGUMF3N3fhiftivPHdpuDIaWIMOTEprAjZPC08bls1dQB+I1F2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-resize-observer": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.4.3.tgz",
+      "integrity": "sha512-YZLjUbyIWox8E9i9C3Tm7ia+W7euPItNWSPX5sCcQTYbnwDb5uNpnLHQCG1f22oZWUhLw4Mv2tFmeWe68CDQRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.7",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.44.1",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-segmented": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.7.0.tgz",
+      "integrity": "sha512-liijAjXz+KnTRVnxxXG2sYDGd6iLL7VpGGdR8gwoxAXy2KglviKCxLWZdjKYJzYzGSUwKDSTdYk8brj54Bn5BA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
+    "node_modules/rc-select": {
+      "version": "14.16.6",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.16.6.tgz",
+      "integrity": "sha512-YPMtRPqfZWOm2XGTbx5/YVr1HT0vn//8QS77At0Gjb3Lv+Lbut0IORJPKLWu1hQ3u4GsA0SrDzs7nI8JG7Zmyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/trigger": "^2.1.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-overflow": "^1.3.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-slider": {
+      "version": "11.1.8",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-11.1.8.tgz",
+      "integrity": "sha512-2gg/72YFSpKP+Ja5AjC5DPL1YnV8DEITDQrcc1eASrUYjl0esptaBVJBh5nLTXCCp15eD8EuGjwezVGSHhs9tQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-steps": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.1.tgz",
+      "integrity": "sha512-lKHL+Sny0SeHkQKKDJlAjV5oZ8DwCdS2hFhAkIjuQt1/pB81M0cA0ErVFdHq9+jmPmFw1vJB2F5NBzFXLJxV+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.16.7",
+        "classnames": "^2.2.3",
+        "rc-util": "^5.16.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-switch": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.1.0.tgz",
+      "integrity": "sha512-TI8ufP2Az9oEbvyCeVE4+90PDSljGyuwix3fV58p7HV2o4wBnVToEyomJRVyTaZeqNPAp+vqeo4Wnj5u0ZZQBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.30.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-table": {
+      "version": "7.50.3",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.50.3.tgz",
+      "integrity": "sha512-Z4/zNCzjv7f/XzPRecb+vJU0DJKdsYt4YRkDzNl4G05m7JmxrKGYC2KqN1Ew6jw2zJq7cxVv3z39qyZOHMuf7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/context": "^1.4.0",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.1.0",
+        "rc-util": "^5.44.3",
+        "rc-virtual-list": "^3.14.2"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tabs": {
+      "version": "15.5.1",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-15.5.1.tgz",
+      "integrity": "sha512-yiWivLAjEo5d1v2xlseB2dQocsOhkoVSfo1krS8v8r+02K+TBUjSjXIf7dgyVSxp6wRIPv5pMi5hanNUlQMgUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "2.x",
+        "rc-dropdown": "~4.2.0",
+        "rc-menu": "~9.16.0",
+        "rc-motion": "^2.6.2",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.34.1"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-textarea": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-1.9.0.tgz",
+      "integrity": "sha512-dQW/Bc/MriPBTugj2Kx9PMS5eXCCGn2cxoIaichjbNvOiARlaHdI99j4DTxLl/V8+PIfW06uFy7kjfUIDDKyxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-input": "~1.7.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.27.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tooltip": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-6.4.0.tgz",
+      "integrity": "sha512-kqyivim5cp8I5RkHmpsp1Nn/Wk+1oeloMv9c7LXNgDxUpGm+RbXJGL+OPvDlcRnx9DBeOe4wyOIl4OKUERyH1g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/trigger": "^2.0.0",
+        "classnames": "^2.3.1",
+        "rc-util": "^5.44.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-tree": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.13.0.tgz",
+      "integrity": "sha512-2+lFvoVRnvHQ1trlpXMOWtF8BUgF+3TiipG72uOfhpL5CUdXCk931kvDdUkTL/IZVtNEDQKwEEmJbAYJSA5NnA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.5.1"
+      },
+      "engines": {
+        "node": ">=10.x"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-tree-select": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.27.0.tgz",
+      "integrity": "sha512-2qTBTzwIT7LRI1o7zLyrCzmo5tQanmyGbSaGTIf7sYimCklAToVVfpMC6OAldSKolcnjorBYPNSKQqJmN3TCww==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.25.7",
+        "classnames": "2.x",
+        "rc-select": "~14.16.2",
+        "rc-tree": "~5.13.0",
+        "rc-util": "^5.43.0"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/rc-upload": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.8.1.tgz",
+      "integrity": "sha512-toEAhwl4hjLAI1u8/CgKWt30BR06ulPa4iGQSMvSXoHzO88gPCslxqV/mnn4gJU7PDoltGIC9Eh+wkeudqgHyw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util": {
+      "version": "5.44.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.44.4.tgz",
+      "integrity": "sha512-resueRJzmHG9Q6rI/DfK6Kdv9/Lfls05vzMs1Sk3M2P+3cJa+MakaZyWY8IPfehVuhPJFKrIY1IK4GqbiaiY5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^18.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-util/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/rc-virtual-list": {
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.18.2.tgz",
+      "integrity": "sha512-SkPabqstOQgJ2Q2Ob3eDPIHsNrDzQZFl8mzHiXuNablyYwddVU33Ws6oxoA7Fi/6pZeEYonrLEUiJGr/6aBVaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.20.0",
+        "classnames": "^2.2.6",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.36.0"
+      },
+      "engines": {
+        "node": ">=8.x"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-async-script": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz",
+      "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "hoist-non-react-statics": "^3.3.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-google-recaptcha": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-3.1.0.tgz",
+      "integrity": "sha512-cYW2/DWas8nEKZGD7SCu9BSuVz8iOcOLHChHyi7upUuVhkpkhYG/6N3KDiTQ3XAiZ2UAZkfvYKMfAHOzBOcGEg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.0",
+        "react-async-script": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.1"
+      }
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
+      "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.15.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.15.1.tgz",
+      "integrity": "sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-loading-skeleton": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-3.5.0.tgz",
+      "integrity": "sha512-gxxSyLbrEAdXTKgfbpBEFZCO/P153DnqSCQau2+o6lNy1jgMRr2MmRmOzMmyrwSaSYLRB8g7b0waYPmUjz7IhQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/react-phone-input-2": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/react-phone-input-2/-/react-phone-input-2-2.15.1.tgz",
+      "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "lodash.debounce": "^4.0.8",
+        "lodash.memoize": "^4.1.2",
+        "lodash.reduce": "^4.6.0",
+        "lodash.startswith": "^4.2.1",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+        "react-dom": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/cookie": "^0.6.0",
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0",
+        "turbo-stream": "2.4.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.1.3.tgz",
+      "integrity": "sha512-qQGTE+77hleBzv9SIUIkGRvuFBQGagW+TQKy53UTZAO/3+YFNBYvRsNIZ1GT17yHbc63FylMOdS+m3oUriF1GA==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.1.3"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
+      "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.9",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.7",
+        "get-proto": "^1.0.1",
+        "which-builtin-type": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
+      "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.32.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
+      "integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.6"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.32.0",
+        "@rollup/rollup-android-arm64": "4.32.0",
+        "@rollup/rollup-darwin-arm64": "4.32.0",
+        "@rollup/rollup-darwin-x64": "4.32.0",
+        "@rollup/rollup-freebsd-arm64": "4.32.0",
+        "@rollup/rollup-freebsd-x64": "4.32.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.32.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.32.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.32.0",
+        "@rollup/rollup-linux-arm64-musl": "4.32.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.32.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.32.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.32.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.32.0",
+        "@rollup/rollup-linux-x64-gnu": "4.32.0",
+        "@rollup/rollup-linux-x64-musl": "4.32.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.32.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.32.0",
+        "@rollup/rollup-win32-x64-msvc": "4.32.0",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
+      "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "get-intrinsic": "^1.2.6",
+        "has-symbols": "^1.1.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-push-apply": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
+      "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
+      "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/scroll-into-view-if-needed": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
+      "integrity": "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ==",
+      "license": "MIT",
+      "dependencies": {
+        "compute-scroll-into-view": "^3.0.2"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
+      "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
+      "license": "MIT"
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-proto": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
+      "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
+      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3",
+        "side-channel-list": "^1.0.0",
+        "side-channel-map": "^1.0.1",
+        "side-channel-weakmap": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-list": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
+      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
+      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/side-channel-weakmap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
+      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.5",
+        "object-inspect": "^1.13.3",
+        "side-channel-map": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==",
+      "license": "MIT"
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
+      "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-data-property": "^1.1.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-object-atoms": "^1.0.0",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
+      "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.2",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/styled-components": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.15.tgz",
+      "integrity": "sha512-PpOTEztW87Ua2xbmLa7yssjNyUF9vE7wdldRfn1I2E6RTkqknkBYpj771OxM/xrvRGinLy2oysa7GOd7NcZZIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/is-prop-valid": "1.2.2",
+        "@emotion/unitless": "0.8.1",
+        "@types/stylis": "4.2.5",
+        "css-to-react-native": "3.2.0",
+        "csstype": "3.1.3",
+        "postcss": "8.4.49",
+        "shallowequal": "1.1.0",
+        "stylis": "4.3.2",
+        "tslib": "2.6.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/styled-components"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
+    "node_modules/styled-components/node_modules/postcss": {
+      "version": "8.4.49",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
+      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/styled-components/node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "license": "0BSD"
+    },
+    "node_modules/stylis": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
+      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
+      "license": "MIT"
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
+      "license": "MIT"
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
+      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.6",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/throttle-debounce": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+      "integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+      "license": "MIT"
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/turbo-stream": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz",
+      "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==",
+      "license": "ISC"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
+      "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
+      "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-proto": "^1.2.0",
+        "is-typed-array": "^1.1.15",
+        "reflect.getprototypeof": "^1.0.9"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
+      "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0",
+        "reflect.getprototypeof": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
+      "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.3",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.1.0",
+        "which-boxed-primitive": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.2.tgz",
+      "integrity": "sha512-PPypAm5qvlD7XMZC3BujecnaOxwhrtoFR+Dqkk5Aa/6DssiH0ibKoketaj9w8LP7Bont1rYeoV5plxD7RTEPRg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "6.0.8",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.8.tgz",
+      "integrity": "sha512-rJmB+6m3Qmo5nssFmm6hbSvaCS+5tH/iuTJYeHEOHMwqu/DPrjjBs1rlecCo4D0qy5xq506hMpkKx6pKaudUxA==",
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.24.2",
+        "postcss": "^8.4.49",
+        "rollup": "^4.23.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
+      "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.1.0",
+        "is-boolean-object": "^1.2.1",
+        "is-number-object": "^1.1.1",
+        "is-string": "^1.1.1",
+        "is-symbol": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
+      "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bound": "^1.0.2",
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.1.0",
+        "is-finalizationregistry": "^1.1.0",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.2.1",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.1.0",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.16"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.18",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.18.tgz",
+      "integrity": "sha512-qEcY+KJYlWyLH9vNbsr6/5j59AXk5ni5aakf8ldzBvGde6Iz4sxZGkJyWSAueTG7QhOvNRYb1lDdFmL5Td0QKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "for-each": "^0.3.3",
+        "gopd": "^1.2.0",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz",
+      "integrity": "sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==",
+      "devOptional": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/Tech4biz-Version01/Tech4biz/package.json b/Tech4biz-Version01/Tech4biz/package.json
new file mode 100644
index 0000000..3c8d155
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/package.json
@@ -0,0 +1,48 @@
+{
+  "name": "tech4biz",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@headlessui/react": "^2.2.0",
+    "@heroicons/react": "^2.2.0",
+    "antd": "^5.24.2",
+    "axios": "^1.7.9",
+    "embla-carousel-react": "^8.5.2",
+    "framer-motion": "^12.0.5",
+    "gsap": "^3.12.7",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.474.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-google-recaptcha": "^3.1.0",
+    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
+    "react-icons": "^5.4.0",
+    "react-intersection-observer": "^9.15.1",
+    "react-loading-skeleton": "^3.5.0",
+    "react-phone-input-2": "^2.15.1",
+    "react-router-dom": "^7.1.3",
+    "styled-components": "^6.1.15",
+    "vite": "^6.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1"
+  }
+}
diff --git a/Tech4biz-Version01/Tech4biz/postcss.config.js b/Tech4biz-Version01/Tech4biz/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/Tech4biz-Version01/Tech4biz/public/favicon.ico b/Tech4biz-Version01/Tech4biz/public/favicon.ico
new file mode 100644
index 0000000..1bdbb77
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/favicon.ico differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/aihealthcare.webp b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/aihealthcare.webp
new file mode 100644
index 0000000..c8603ab
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/aihealthcare.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/designing.webp b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/designing.webp
new file mode 100644
index 0000000..2cf4574
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/designing.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/pcb.webp b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/pcb.webp
new file mode 100644
index 0000000..f029cee
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/pcb.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/quantam.webp b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/quantam.webp
new file mode 100644
index 0000000..715dfcd
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/ProductDropDown/quantam.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/cost-efficiency.webp b/Tech4biz-Version01/Tech4biz/public/images/about/cost-efficiency.webp
new file mode 100644
index 0000000..57de385
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/cost-efficiency.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/developer-update-insights.webp b/Tech4biz-Version01/Tech4biz/public/images/about/developer-update-insights.webp
new file mode 100644
index 0000000..c349d05
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/developer-update-insights.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/enpowering-business-through-innovation.webp b/Tech4biz-Version01/Tech4biz/public/images/about/enpowering-business-through-innovation.webp
new file mode 100644
index 0000000..1b370b9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/enpowering-business-through-innovation.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/flexible-scaling.webp b/Tech4biz-Version01/Tech4biz/public/images/about/flexible-scaling.webp
new file mode 100644
index 0000000..c71da29
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/flexible-scaling.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/mision.avif b/Tech4biz-Version01/Tech4biz/public/images/about/mision.avif
new file mode 100644
index 0000000..4feec67
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/mision.avif differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/optimized-performance.webp b/Tech4biz-Version01/Tech4biz/public/images/about/optimized-performance.webp
new file mode 100644
index 0000000..031ac6f
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/optimized-performance.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/powering-the-future-with-ai.webp b/Tech4biz-Version01/Tech4biz/public/images/about/powering-the-future-with-ai.webp
new file mode 100644
index 0000000..e0de8d8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/powering-the-future-with-ai.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/pw-1.avif b/Tech4biz-Version01/Tech4biz/public/images/about/pw-1.avif
new file mode 100644
index 0000000..0eb3958
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/pw-1.avif differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/pw-2.avif b/Tech4biz-Version01/Tech4biz/public/images/about/pw-2.avif
new file mode 100644
index 0000000..40fa6f5
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/pw-2.avif differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/pw-3.avif b/Tech4biz-Version01/Tech4biz/public/images/about/pw-3.avif
new file mode 100644
index 0000000..2883709
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/pw-3.avif differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/pw-4.avif b/Tech4biz-Version01/Tech4biz/public/images/about/pw-4.avif
new file mode 100644
index 0000000..feeb799
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/pw-4.avif differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/about/robust-security.webp b/Tech4biz-Version01/Tech4biz/public/images/about/robust-security.webp
new file mode 100644
index 0000000..b9d46c2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/about/robust-security.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Homepage.jpg b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Homepage.jpg
new file mode 100644
index 0000000..6cc77f9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Homepage.jpg differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Homepage1.jpg b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Homepage1.jpg
new file mode 100644
index 0000000..b3e8ef8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Homepage1.jpg differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Page.webp b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Page.webp
new file mode 100644
index 0000000..ee666fb
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAI-Page.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/GenAIBanner.jpg b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAIBanner.jpg
new file mode 100644
index 0000000..b3a9bb5
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/GenAIBanner.jpg differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/Img-1.webp b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-1.webp
new file mode 100644
index 0000000..89ea689
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-1.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/Img-2.webp b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-2.webp
new file mode 100644
index 0000000..d42cb44
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-2.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/Img-3.webp b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-3.webp
new file mode 100644
index 0000000..5511184
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-3.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/Img-4.webp b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-4.webp
new file mode 100644
index 0000000..6f58c88
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/Img-4.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/banners/Obscura-SDK-Installer.webp b/Tech4biz-Version01/Tech4biz/public/images/banners/Obscura-SDK-Installer.webp
new file mode 100644
index 0000000..9387ab8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/banners/Obscura-SDK-Installer.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/careers/Careerhero.webp b/Tech4biz-Version01/Tech4biz/public/images/careers/Careerhero.webp
new file mode 100644
index 0000000..7473d47
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/careers/Careerhero.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/Improving-financial-security.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/Improving-financial-security.webp
new file mode 100644
index 0000000..d015136
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/Improving-financial-security.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/ar-visualization.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/ar-visualization.webp
new file mode 100644
index 0000000..a748833
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/ar-visualization.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/automating_8.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/automating_8.webp
new file mode 100644
index 0000000..fb530bf
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/automating_8.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/building-the-future-with-blockchain.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/building-the-future-with-blockchain.webp
new file mode 100644
index 0000000..6e145f1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/building-the-future-with-blockchain.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/commerce-intelligence.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/commerce-intelligence.webp
new file mode 100644
index 0000000..3ba9518
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/commerce-intelligence.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/defending-against-cyber-threats.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/defending-against-cyber-threats.webp
new file mode 100644
index 0000000..86112dc
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/defending-against-cyber-threats.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/cloud-commerce_7.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/cloud-commerce_7.webp
new file mode 100644
index 0000000..9e8ca5f
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/cloud-commerce_7.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/commerce-intelligence_8.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/commerce-intelligence_8.webp
new file mode 100644
index 0000000..3c182be
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/commerce-intelligence_8.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/learning-platform_1.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/learning-platform_1.webp
new file mode 100644
index 0000000..de7da95
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/learning-platform_1.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/retail-automation_2.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/retail-automation_2.webp
new file mode 100644
index 0000000..aa0b948
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/retail-automation_2.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/retail-management_3.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/retail-management_3.webp
new file mode 100644
index 0000000..eb2f8ff
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/retail-management_3.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/risk-analytics_4.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/risk-analytics_4.webp
new file mode 100644
index 0000000..a0125ea
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/risk-analytics_4.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/security-platform_5.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/security-platform_5.webp
new file mode 100644
index 0000000..430532f
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/security-platform_5.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/speech-recognition_6.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/speech-recognition_6.webp
new file mode 100644
index 0000000..90d22ba
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/details/speech-recognition_6.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/dynamic-pricing-and-analytics.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/dynamic-pricing-and-analytics.webp
new file mode 100644
index 0000000..5db3394
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/dynamic-pricing-and-analytics.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/enhancing-healthcare-data-management.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/enhancing-healthcare-data-management.webp
new file mode 100644
index 0000000..c6c858e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/enhancing-healthcare-data-management.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/enhancing-manufacturing-processes-with-rpa.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/enhancing-manufacturing-processes-with-rpa.webp
new file mode 100644
index 0000000..d9a8729
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/enhancing-manufacturing-processes-with-rpa.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/fitness_3.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/fitness_3.webp
new file mode 100644
index 0000000..b194522
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/fitness_3.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/iotconnecctivity_4.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/iotconnecctivity_4.webp
new file mode 100644
index 0000000..228a202
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/iotconnecctivity_4.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/metaverse-and-ar.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/metaverse-and-ar.webp
new file mode 100644
index 0000000..aa99e31
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/metaverse-and-ar.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/optimizing-manufacturing-methods.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/optimizing-manufacturing-methods.webp
new file mode 100644
index 0000000..611f4bc
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/optimizing-manufacturing-methods.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/retail-management.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/retail-management.webp
new file mode 100644
index 0000000..a5c10fb
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/retail-management.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/risk-analytics.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/risk-analytics.webp
new file mode 100644
index 0000000..65cf102
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/risk-analytics.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/smart-mall-revolution.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/smart-mall-revolution.webp
new file mode 100644
index 0000000..1234d63
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/smart-mall-revolution.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/smart-retail-assistant.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/smart-retail-assistant.webp
new file mode 100644
index 0000000..2b26345
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/smart-retail-assistant.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/transforming-e-commerce.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/transforming-e-commerce.webp
new file mode 100644
index 0000000..aa23826
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/transforming-e-commerce.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/urban-connectivity_6.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/urban-connectivity_6.webp
new file mode 100644
index 0000000..edbe414
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/urban-connectivity_6.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/casestudies/voice-recognition-ai.webp b/Tech4biz-Version01/Tech4biz/public/images/casestudies/voice-recognition-ai.webp
new file mode 100644
index 0000000..8eece5c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/casestudies/voice-recognition-ai.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud-commerce.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud-commerce.webp
new file mode 100644
index 0000000..1cc1a42
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud-commerce.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/business-integration.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/business-integration.webp
new file mode 100644
index 0000000..8ae49f7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/business-integration.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/cta/arrow-shape.png b/Tech4biz-Version01/Tech4biz/public/images/cloud/cta/arrow-shape.png
new file mode 100644
index 0000000..82b654e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/cta/arrow-shape.png differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/features-for-security-and-compliance.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/features-for-security-and-compliance.webp
new file mode 100644
index 0000000..5a74524
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/features-for-security-and-compliance.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/enterprise-cloud Infrastructure.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/enterprise-cloud Infrastructure.webp
new file mode 100644
index 0000000..575fb9e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/enterprise-cloud Infrastructure.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/infra-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/infra-platform.webp
new file mode 100644
index 0000000..40fcc3c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/infra-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/platform-as-servicw.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/platform-as-servicw.webp
new file mode 100644
index 0000000..97326d8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/platform-as-servicw.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/saas.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/saas.webp
new file mode 100644
index 0000000..5b0f78c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/infra/saas.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/performance-and-scalability.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/performance-and-scalability.webp
new file mode 100644
index 0000000..54afacc
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/performance-and-scalability.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/cloud/public-cloud-orchestration-and-design.webp b/Tech4biz-Version01/Tech4biz/public/images/cloud/public-cloud-orchestration-and-design.webp
new file mode 100644
index 0000000..912116c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/cloud/public-cloud-orchestration-and-design.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/icons/agile.webp b/Tech4biz-Version01/Tech4biz/public/images/icons/agile.webp
new file mode 100644
index 0000000..1b87252
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/icons/agile.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/icons/cloudintegration.webp b/Tech4biz-Version01/Tech4biz/public/images/icons/cloudintegration.webp
new file mode 100644
index 0000000..27540e3
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/icons/cloudintegration.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/icons/customsolution.webp b/Tech4biz-Version01/Tech4biz/public/images/icons/customsolution.webp
new file mode 100644
index 0000000..7dff3b7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/icons/customsolution.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/icons/quailtyassurance.webp b/Tech4biz-Version01/Tech4biz/public/images/icons/quailtyassurance.webp
new file mode 100644
index 0000000..4baa3a7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/icons/quailtyassurance.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/icons/twitter_icons.png b/Tech4biz-Version01/Tech4biz/public/images/icons/twitter_icons.png
new file mode 100644
index 0000000..d39b064
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/icons/twitter_icons.png differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/icons/whatsapp-icons.png b/Tech4biz-Version01/Tech4biz/public/images/icons/whatsapp-icons.png
new file mode 100644
index 0000000..1e302c1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/icons/whatsapp-icons.png differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/Cloudtopia.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/Cloudtopia.webp
new file mode 100644
index 0000000..40d7380
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/Cloudtopia.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/aws.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/aws.webp
new file mode 100644
index 0000000..c4c23c6
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/aws.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/azure.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/azure.webp
new file mode 100644
index 0000000..51912cf
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/azure.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/ibm.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/ibm.webp
new file mode 100644
index 0000000..bf33c3c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/ibm.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/iso.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/iso.webp
new file mode 100644
index 0000000..26925e2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/iso.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/logo-light.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/logo-light.webp
new file mode 100644
index 0000000..2a073a5
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/logo-light.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/logo.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/logo.webp
new file mode 100644
index 0000000..af933a8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/logo.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/logos/openai.webp b/Tech4biz-Version01/Tech4biz/public/images/logos/openai.webp
new file mode 100644
index 0000000..0e5fee1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/logos/openai.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/placeholder.jpg b/Tech4biz-Version01/Tech4biz/public/images/placeholder.jpg
new file mode 100644
index 0000000..7e35296
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/placeholder.jpg differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/pressrelease/Hero-PressRelease.webp b/Tech4biz-Version01/Tech4biz/public/images/pressrelease/Hero-PressRelease.webp
new file mode 100644
index 0000000..1b0c5a4
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/pressrelease/Hero-PressRelease.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/ASIC-AI-Deployment.webp b/Tech4biz-Version01/Tech4biz/public/images/products/ASIC-AI-Deployment.webp
new file mode 100644
index 0000000..ae4a7ac
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/ASIC-AI-Deployment.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/Accelerated-Performance.webp b/Tech4biz-Version01/Tech4biz/public/images/products/Accelerated-Performance.webp
new file mode 100644
index 0000000..1205810
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/Accelerated-Performance.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/Adaptive-Solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/products/Adaptive-Solutions.webp
new file mode 100644
index 0000000..ff9119b
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/Adaptive-Solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/Advanced-FPGA-Architecture.webp b/Tech4biz-Version01/Tech4biz/public/images/products/Advanced-FPGA-Architecture.webp
new file mode 100644
index 0000000..5c0da3b
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/Advanced-FPGA-Architecture.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/card/cloud-drive-storage-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/products/card/cloud-drive-storage-platform.webp
new file mode 100644
index 0000000..ca59000
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/card/cloud-drive-storage-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/card/cloudtopiaa-enterprise-solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/products/card/cloudtopiaa-enterprise-solutions.webp
new file mode 100644
index 0000000..7485062
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/card/cloudtopiaa-enterprise-solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/card/codenuk-coding-solution-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/products/card/codenuk-coding-solution-platform.webp
new file mode 100644
index 0000000..9fd0305
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/card/codenuk-coding-solution-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/card/learning-management-system.webp b/Tech4biz-Version01/Tech4biz/public/images/products/card/learning-management-system.webp
new file mode 100644
index 0000000..7b6c4aa
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/card/learning-management-system.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/cloud-commerce-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/products/cloud-commerce-platform.webp
new file mode 100644
index 0000000..2774ecc
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/cloud-commerce-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/commerce-intelligence-dashboard.webp b/Tech4biz-Version01/Tech4biz/public/images/products/commerce-intelligence-dashboard.webp
new file mode 100644
index 0000000..848378e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/commerce-intelligence-dashboard.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/connected-retail-iot.webp b/Tech4biz-Version01/Tech4biz/public/images/products/connected-retail-iot.webp
new file mode 100644
index 0000000..cba55d9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/connected-retail-iot.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/CloudDrivreliability.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/CloudDrivreliability.webp
new file mode 100644
index 0000000..c0ac852
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/CloudDrivreliability.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/Clouddrivorganization.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/Clouddrivorganization.webp
new file mode 100644
index 0000000..6c7a15e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/Clouddrivorganization.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/cloudrivCollab.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/cloudrivCollab.webp
new file mode 100644
index 0000000..dbb209f
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/cloudrivCollab.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/cloudrivFlexibility.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/cloudrivFlexibility.webp
new file mode 100644
index 0000000..c41711e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudriv/cloudrivFlexibility.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaCollaboration.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaCollaboration.webp
new file mode 100644
index 0000000..3d49cc9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaCollaboration.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaFlexibility.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaFlexibility.webp
new file mode 100644
index 0000000..5b65381
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaFlexibility.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaOrganization.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaOrganization.webp
new file mode 100644
index 0000000..fa70298
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaOrganization.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaReliability.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaReliability.webp
new file mode 100644
index 0000000..0760c66
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/cloudtopia/cloudtopiaaReliability.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukCollaboration.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukCollaboration.webp
new file mode 100644
index 0000000..9590c50
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukCollaboration.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukReliablity.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukReliablity.webp
new file mode 100644
index 0000000..c1c6881
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukReliablity.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukScalability.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukScalability.webp
new file mode 100644
index 0000000..2d60518
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukScalability.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukZapspeed.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukZapspeed.webp
new file mode 100644
index 0000000..28181e3
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/codenuk/codenukZapspeed.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMScollaboration.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMScollaboration.webp
new file mode 100644
index 0000000..793920f
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMScollaboration.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSflexibility.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSflexibility.webp
new file mode 100644
index 0000000..122ba3e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSflexibility.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSorganization.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSorganization.webp
new file mode 100644
index 0000000..eb2a399
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSorganization.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSreliability.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSreliability.webp
new file mode 100644
index 0000000..52b2fbc
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/lms/LMSreliability.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/details/ns-last.webp b/Tech4biz-Version01/Tech4biz/public/images/products/details/ns-last.webp
new file mode 100644
index 0000000..71fb8e6
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/details/ns-last.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/learning-mixed-reality-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/products/learning-mixed-reality-platform.webp
new file mode 100644
index 0000000..04133d8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/learning-mixed-reality-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/risk-analytics-dashboard.webp b/Tech4biz-Version01/Tech4biz/public/images/products/risk-analytics-dashboard.webp
new file mode 100644
index 0000000..2f79f6c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/risk-analytics-dashboard.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/security-defense-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/products/security-defense-platform.webp
new file mode 100644
index 0000000..6726238
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/security-defense-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/smart-retail-automation-inventory-management-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/products/smart-retail-automation-inventory-management-platform.webp
new file mode 100644
index 0000000..6a67f8a
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/smart-retail-automation-inventory-management-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/products/speech-recognition-platform.webp b/Tech4biz-Version01/Tech4biz/public/images/products/speech-recognition-platform.webp
new file mode 100644
index 0000000..72f1941
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/products/speech-recognition-platform.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/circuit-board-close-up-with-different-components.avif b/Tech4biz-Version01/Tech4biz/public/images/services/circuit-board-close-up-with-different-components.avif
new file mode 100644
index 0000000..201cd71
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/circuit-board-close-up-with-different-components.avif differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cloud/custom-solution-design.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/custom-solution-design.svg
new file mode 100644
index 0000000..7550510
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/custom-solution-design.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 64 64" width="512" height="512"><path d="M62.39,48.08l-7-3a1,1,0,0,0-.78,0l-7,3A1,1,0,0,0,47,49v4H43V48a1,1,0,0,0-1-1H35V39.8a12.19,12.19,0,0,0,3.88-1.72,1,1,0,0,0,.44-.8,2,2,0,0,1,2-2A1,1,0,0,0,42,35h5a11,11,0,0,0,2.63-21.67A10,10,0,0,0,40,6a9.66,9.66,0,0,0-2.51.33A13,13,0,0,0,14,13.41,11,11,0,0,0,17,35h5a1,1,0,0,0,.69.32,2,2,0,0,1,2,2,1,1,0,0,0,.44.8A12.19,12.19,0,0,0,29,39.8V47H22a1,1,0,0,0-1,1v5H17V49a1,1,0,0,0-.61-.92l-7-3a1,1,0,0,0-.78,0l-7,3A1,1,0,0,0,1,49v9a1,1,0,0,0,.5.87l7,4a1,1,0,0,0,1,0l7-4A1,1,0,0,0,17,58V55h5a1,1,0,0,0,1-1V49h6V60a3,3,0,0,0,6,0V49h6v5a1,1,0,0,0,1,1h5v3a1,1,0,0,0,.5.87l7,4a1,1,0,0,0,1,0l7-4A1,1,0,0,0,63,58V49A1,1,0,0,0,62.39,48.08ZM8,60.28,3,57.42v-6.9l5,2.14Zm1-9.37L4.54,49,9,47.09,13.46,49Zm6,6.51-5,2.86V52.66l5-2.14Zm6.92-36.3A12,12,0,0,0,20,25.75a1,1,0,0,0,.24.85,2,2,0,0,1,0,2.8,1,1,0,0,0-.24.85A12.24,12.24,0,0,0,20.89,33H17a9,9,0,0,1-1.79-17.82,1,1,0,0,0,.8-1,1.48,1.48,0,0,0,0-.2A11,11,0,0,1,36.24,8a1,1,0,0,0,1.17.4A7.92,7.92,0,0,1,40,8a8,8,0,0,1,7.83,6.37,1,1,0,0,0,.8.78A9,9,0,0,1,47,33H43.11A12.24,12.24,0,0,0,44,30.25a1,1,0,0,0-.24-.85,2,2,0,0,1,0-2.8,1,1,0,0,0,.24-.85,12,12,0,0,0-1.9-4.63,1,1,0,0,0-.8-.44,2,2,0,0,1-2-2,1,1,0,0,0-.44-.8A12,12,0,0,0,34.25,16a1,1,0,0,0-.85.24,2,2,0,0,1-2.8,0,1,1,0,0,0-.85-.24,12,12,0,0,0-4.63,1.9,1,1,0,0,0-.44.8,2,2,0,0,1-2,2A1,1,0,0,0,21.92,21.12ZM29,37.74a10.13,10.13,0,0,1-2.37-1.07,4,4,0,0,0-3.3-3.3,10.4,10.4,0,0,1-1.26-3,4,4,0,0,0,0-4.66,10.4,10.4,0,0,1,1.26-3,4,4,0,0,0,3.3-3.3,10.35,10.35,0,0,1,3.05-1.26,4.06,4.06,0,0,0,4.64,0,10.35,10.35,0,0,1,3,1.26,4,4,0,0,0,3.3,3.3,10.4,10.4,0,0,1,1.26,3,4,4,0,0,0,0,4.66,10.4,10.4,0,0,1-1.26,3,4,4,0,0,0-3.3,3.3A10.13,10.13,0,0,1,35,37.74V35.39A7.92,7.92,0,0,0,40,28a8,8,0,0,0-16,0,7.92,7.92,0,0,0,5,7.39ZM33,60a1,1,0,0,1-2,0V59h2Zm0-3H31V35h2ZM31.39,33,32,31.16,32.61,33Zm3.43.29L33,27.68a1,1,0,0,0-1.9,0l-1.87,5.61a6,6,0,1,1,5.64,0ZM54,60.28l-5-2.86v-6.9l5,2.14Zm1-9.37L50.54,49,55,47.09,59.46,49Zm6,6.51-5,2.86V52.66l5-2.14Z"/><path d="M27,5a9,9,0,0,0-9,9h2a7,7,0,0,1,7-7Z"/></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cloud/deployment-integration.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/deployment-integration.svg
new file mode 100644
index 0000000..cb3df73
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/deployment-integration.svg
@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512" height="512">
+<g>
+	<g>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M340.333,504.5H71.5c-12.15,0-22-9.85-22-22v-28c0-4.418,3.582-8,8-8h397c4.418,0,8,3.582,8,8v28c0,12.15-9.85,22-22,22h-64.611"/>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M211,446.703h90v18.167c0,5.431-4.403,9.833-9.833,9.833h-70.333c-5.431,0-9.833-4.403-9.833-9.833V446.703z"/>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M81,301v-61.5c0-11.046,8.954-20,20-20h288.833"/>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M431,347v79.5c0,11.046-8.954,20-20,20H101c-11.046,0-20-8.954-20-20v-32.833"/>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M111,302.111v-49.835c0-1.533,1.243-2.776,2.776-2.776h276.058"/>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M401,342.667v71.058c0,1.533-1.243,2.776-2.776,2.776H113.776c-1.533,0-2.776-1.243-2.776-2.776v-19.169"/>
+		<g>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="100.379" y1="475.5" x2="113.775" y2="475.5"/>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="140.565" y1="475.5" x2="153.961" y2="475.5"/>
+		</g>
+		<g>
+			<g>
+				
+					<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="190.68" y1="120.982" x2="190.68" y2="303.72"/>
+				
+					<polyline style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="&#10;&#9;&#9;&#9;&#9;&#9;223.578,285.124 192.595,314.693 157.782,285.124 &#9;&#9;&#9;&#9;"/>
+			</g>
+			<g>
+				
+					<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="321.32" y1="290.969" x2="321.32" y2="108.23"/>
+				
+					<polyline style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="&#10;&#9;&#9;&#9;&#9;&#9;288.422,126.826 319.405,97.257 354.218,126.826 &#9;&#9;&#9;&#9;"/>
+			</g>
+		</g>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M113.682,58.279c-3.026,5.297-5.043,11.243-5.777,17.574c-0.696,6.005-0.229,11.803,1.177,17.222&#10;&#9;&#9;&#9;c0.343,1.322-0.703,2.591-2.061,2.456c-1.136-0.113-2.288-0.172-3.454-0.172c-20.481,0-36.918,17.334-35.48,38.149&#10;&#9;&#9;&#9;c1.225,17.732,15.69,32.017,33.412,33.023c10.615,0.602,20.283-3.465,27.165-10.333c0.923-0.921,2.451-0.73,3.09,0.407&#10;&#9;&#9;&#9;c7.987,14.212,23.19,23.814,40.636,23.814c14.04,0,26.621-6.225,35.164-16.06c0.816-0.94,2.288-0.889,3.026,0.113&#10;&#9;&#9;&#9;c10.272,13.942,26.79,22.987,45.419,22.987s35.148-9.045,45.419-22.987c0.738-1.002,2.21-1.053,3.026-0.113&#10;&#9;&#9;&#9;c8.543,9.836,21.124,16.06,35.164,16.06c17.446,0,32.648-9.602,40.636-23.814c0.639-1.137,2.168-1.328,3.09-0.407&#10;&#9;&#9;&#9;c6.881,6.868,16.55,10.935,27.165,10.333c17.722-1.006,32.187-15.291,33.412-33.023c1.438-20.816-15-38.149-35.48-38.149&#10;&#9;&#9;&#9;c-1.166,0-2.317,0.059-3.454,0.172c-1.357,0.135-2.404-1.135-2.061-2.456c1.407-5.42,1.873-11.218,1.177-17.222&#10;&#9;&#9;&#9;c-2.562-22.099-20.755-39.495-42.918-41.054c-16.348-1.15-31.048,6.155-40.204,17.982c-0.967,1.249-2.91,0.892-3.401-0.61&#10;&#9;&#9;&#9;C309.095,26.235,284.734,7.5,256,7.5s-53.095,18.735-61.572,44.671c-0.491,1.502-2.434,1.859-3.401,0.61&#10;&#9;&#9;&#9;c-9.156-11.827-23.856-19.132-40.204-17.982c-3.667,0.258-7.225,0.95-10.622,2.024"/>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M504.5,212.701v111.114c0,11.797-9.639,21.361-21.529,21.361h-70.393c-11.89,0-21.529-9.564-21.529-21.361v-22.101&#10;&#9;&#9;&#9;c0-1.401-0.975-2.613-2.344-2.912l-25.893-5.663c-3.217-0.704-3.991-4.939-1.23-6.734l28.111-18.28&#10;&#9;&#9;&#9;c0.846-0.55,1.356-1.49,1.356-2.499v-52.925c0-11.797,9.639-21.361,21.529-21.361h70.393&#10;&#9;&#9;&#9;C494.861,191.34,504.5,200.904,504.5,212.701z"/>
+		<g>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="426.93" y1="243.243" x2="447.046" y2="243.243"/>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="426.93" y1="267.243" x2="467.163" y2="267.243"/>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="426.93" y1="291.243" x2="467.163" y2="291.243"/>
+		</g>
+		<path style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" d="&#10;&#9;&#9;&#9;M127.5,391.72h-116c-2.209,0-4-1.791-4-4v-80c0-2.209,1.791-4,4-4h116c2.209,0,4,1.791,4,4v80&#10;&#9;&#9;&#9;C131.5,389.93,129.709,391.72,127.5,391.72z"/>
+		<g>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="39.154" y1="335.72" x2="65.41" y2="335.72"/>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="39.154" y1="359.72" x2="91.667" y2="359.72"/>
+		</g>
+		<g>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="249.39" y1="328.746" x2="272.914" y2="328.746"/>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="249.39" y1="354.968" x2="347.667" y2="354.968"/>
+			
+				<line style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" x1="249.39" y1="381.19" x2="347.667" y2="381.19"/>
+		</g>
+	</g>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cloud/discovery-assessment.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/discovery-assessment.svg
new file mode 100644
index 0000000..828f876
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/discovery-assessment.svg
@@ -0,0 +1 @@
+<svg id="_x33_0" enable-background="new 0 0 62.828 60.414" height="512" viewBox="0 0 62.828 60.414" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m2.414 24h8c1.103 0 2-.897 2-2v-6h4.051c.518 7.805 7.015 14 14.949 14s14.431-6.195 14.949-14h3.051v5h2 2 4 4v-2-11c0-.552-.448-1-1-1h-2c-.552 0-1 .448-1 1v11h-4v-5c0-.552-.448-1-1-1h-2c-.552 0-1 .448-1 1h-3.051c-.518-7.805-7.015-14-14.949-14s-14.431 6.195-14.949 14h-4.051v-6c0-1.103-.897-2-2-2h-8c-1.103 0-2 .897-2 2v14c0 1.103.898 2 2 2zm29-22c6.83 0 12.435 5.299 12.949 12h-2c-.507-5.598-5.221-10-10.949-10s-10.442 4.402-10.949 10h-2c.514-6.701 6.119-12 12.949-12zm8.486 17.242-4.244 4.244-1.242-1.244v1.758h-6v-1.757l-1.242 1.243-4.244-4.244 1.244-1.242h-1.758v-6h1.758l-1.244-1.242 4.244-4.244 1.242 1.244v-1.758h6v1.757l1.242-1.243 4.244 4.244-1.244 1.242h1.758v6h-1.758zm-19.435-3.242c.508 5.598 5.221 10 10.949 10s10.442-4.402 10.949-10h2c-.514 6.701-6.119 12-12.949 12s-12.435-5.299-12.949-12zm-18.051-8h8l.001 14h-8.001z"/><path d="m4.414 10h4v2h-4z"/><path d="m4.414 14h4v2h-4z"/><path d="m4.414 18h4v2h-4z"/><path d="m28.414 31.719v4.281h6v-4.281c-.976.175-1.975.281-3 .281s-2.024-.107-3-.281z"/><path d="m36.809 12.765c-.279-.674-.17-1.434.272-1.998l-1.435-1.435c-.565.441-1.324.551-1.998.272-.673-.278-1.133-.893-1.219-1.604h-2.029c-.086.711-.546 1.326-1.22 1.605-.675.28-1.435.169-1.998-.272l-1.435 1.435c.442.563.552 1.323.272 1.998-.279.675-.895 1.135-1.605 1.22v2.029c.711.085 1.326.545 1.605 1.22.279.674.17 1.434-.272 1.998l1.435 1.435c.565-.442 1.323-.551 1.998-.272.674.279 1.134.894 1.22 1.605h2.029c.086-.711.546-1.326 1.22-1.605.676-.279 1.435-.169 1.998.272l1.435-1.435c-.442-.563-.552-1.323-.272-1.998.279-.675.895-1.135 1.605-1.22v-2.029c-.712-.086-1.327-.546-1.606-1.221zm-5.395 7.235c-2.757 0-5-2.243-5-5s2.243-5 5-5 5 2.243 5 5-2.243 5-5 5z"/><circle cx="31.414" cy="15" r="3"/><path d="m28.414 55c0 .552.448 1 1 1h4c.552 0 1-.448 1-1v-17h-6z"/><path d="m44.414 56.586v-26.586h-2v26.586l-2.293-2.293-1.414 1.414 4.707 4.707 4.707-4.707-1.414-1.414z"/><path d="m58.121 42.293-1.414 1.414 2.293 2.293h-8.586v-20h-2v20c0 1.103.897 2 2 2h8.586l-2.293 2.293 1.414 1.414 4.707-4.707z"/><path d="m20.414 56.586v-26.586h-2v26.586l-2.293-2.293-1.414 1.414 4.707 4.707 4.707-4.707-1.414-1.414z"/><path d="m12.414 46h-8.586l2.293-2.293-1.414-1.414-4.707 4.707 4.707 4.707 1.414-1.414-2.293-2.293h8.586c1.103 0 2-.897 2-2v-20h-2z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cloud/education-and-e-learning.webp b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/education-and-e-learning.webp
new file mode 100644
index 0000000..4a58f97
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/education-and-e-learning.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cloud/nonprofits-community-organizations.webp b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/nonprofits-community-organizations.webp
new file mode 100644
index 0000000..df5ee25
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/nonprofits-community-organizations.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cloud/optimization-support.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/optimization-support.svg
new file mode 100644
index 0000000..359716e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/optimization-support.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g><path d="m332.92 236.99c.79 4.31-2.1 8.45-6.43 9.24-4.34.77-8.48-2.1-9.24-6.43-5.19-28.91-30.5-50.34-60.29-50.34s-55.11 21.43-60.29 50.34c-.77 4.34-4.9 7.2-9.24 6.43-4.34-.79-7.2-4.93-6.43-9.24 6.55-36.6 38.47-63.52 75.97-63.52 37.48 0 69.4 26.92 75.95 63.52zm-43.23 2.98c2.98-3.26 8.02-3.46 11.28-.48 3.23 2.98 3.43 8.05.45 11.28l-20.35 22.19c11.2 18.6-2.18 42.6-24.12 42.6-24.97 0-37.56-30.36-19.87-48.02 8.45-8.48 21.4-10.69 32.23-5.39zm-32.74 35.32c-10.77 0-16.19 13.1-8.56 20.72 7.6 7.63 20.69 2.21 20.69-8.59 0-6.69-5.41-12.13-12.13-12.13zm142.16 87.05-30.05 30.05c-1.81 1.81-1.81 4.88 0 6.69l61.11 61.11c1.84 1.84 4.88 1.84 6.72 0l30.02-30.02c1.84-1.84 1.84-4.88 0-6.72l-61.09-61.12c-1.83-1.81-4.87-1.81-6.71.01zm-36.14 13.52 19.16-19.16-14.6-14.63c-3-2.98-3.12-7.74-.43-10.89 8.33-11.4 14.97-24.12 19.47-37.84 16.24-49.35 2.89-103.07-33.17-139.12-53.32-53.32-139.61-53.32-192.93 0-24.69 24.72-39.97 58.82-39.97 96.46h.03c0 75.35 61.06 136.43 136.4 136.43 29.48 0 57.69-9.38 80.99-26.62 3.2-2.38 7.63-1.98 10.37.77l.03-.03zm31.63-29.34c7.6-3.12 16.53-1.5 22.54 4.51l61.09 61.12c8.11 8.08 8.11 21.26 0 29.34l-30.02 30.02c-8.08 8.08-21.26 8.08-29.34 0l-61.11-61.11c-5.81-5.81-7.51-14.4-4.76-21.85l-11.23-11.23c-60.32 40.48-141.05 32.68-192.59-18.85-27.58-27.58-44.65-65.68-44.65-107.77h.03c0-84.22 68.17-152.39 152.39-152.39 84.25 0 152.42 68.23 152.42 152.39 0 30.53-9.04 59.87-25.8 84.81zm-137.65-191.56c-52.87 0-95.73 42.86-95.73 95.73s42.86 95.73 95.73 95.73 95.73-42.86 95.73-95.73-42.86-95.73-95.73-95.73zm-79 16.72c43.65-43.63 114.38-43.63 158 0 43.63 43.65 43.63 114.38 0 158-43.63 43.63-114.35 43.63-158 0-43.62-43.62-43.62-114.35 0-158zm262.04 155.4c-1.67 4.08-6.35 6.01-10.43 4.34-4.08-1.7-6.01-6.38-4.31-10.46 4.2-10.03 7.34-19.87 9.69-30.42.6-2.75 2.55-4.85 4.99-5.75l34.01-12.79v-42.63l-34.02-12.76c-2.66-1.02-4.51-3.29-5.02-5.9-2.3-10.26-5.47-20.21-9.44-29.79-4.05-9.72-8.9-19.05-14.54-27.89-1.56-2.49-1.62-5.47-.37-7.91l14.91-32.83-30.13-30.1-33.13 15.05c-2.55 1.13-5.39.85-7.57-.54-17.66-11.23-37.36-19.45-57.83-23.98-2.75-.62-4.85-2.55-5.75-5.02l-12.78-34.02h-42.63l-12.76 34.02c-.99 2.69-3.29 4.51-5.9 5.05-20.01 4.25-40.45 13.01-57.68 23.95-2.47 1.56-5.47 1.62-7.91.37l-32.83-14.88-30.1 30.1 15.05 33.17c1.13 2.52.85 5.36-.54 7.54v.03c-11.23 17.63-19.45 37.36-23.98 57.83-.62 2.72-2.55 4.82-5.02 5.75l-34.02 12.76v42.63l34.02 12.78c2.69.99 4.51 3.26 5.05 5.87 4.25 19.96 13.07 40.54 23.95 57.71 1.56 2.47 1.62 5.47.4 7.88l-14.91 32.83 30.1 30.13 33.17-15.08c2.52-1.13 5.36-.85 7.54.54h.03c17.63 11.23 37.36 19.45 57.83 24.01 2.72.59 4.82 2.55 5.75 4.99l12.76 34.02h42.63l12.78-34.02c.99-2.66 3.26-4.51 5.87-5.02 9.98-2.13 20.83-5.73 30.3-9.67 4.08-1.7 8.76.23 10.46 4.31 1.67 4.08-.26 8.76-4.31 10.43-9.21 3.85-19.02 7.09-28.89 9.52l-12.98 34.58c-.94 3.37-4.05 5.87-7.74 5.87h-53.63v-.03c-3.23 0-6.26-1.98-7.48-5.19l-13.21-35.23c-19.53-4.82-37.98-12.47-55.02-22.79l-33.85 15.36c-3.03 1.62-6.86 1.13-9.41-1.39l-37.93-37.96c-2.27-2.3-3.03-5.81-1.64-8.93l15.59-34.3c-10.29-17.04-17.97-35.52-22.76-55.02l-34.61-13.01c-3.37-.91-5.87-4.03-5.87-7.71v-53.63h.03c.03-3.23 1.98-6.29 5.22-7.48l35.23-13.21c4.79-19.53 12.47-37.98 22.76-55.02l-15.36-33.85c-1.62-3.03-1.13-6.86 1.42-9.41l37.93-37.93c2.3-2.27 5.84-3.03 8.93-1.64l34.33 15.59c17.04-10.29 35.57-18 55.02-22.76l12.98-34.61c.94-3.37 4.03-5.87 7.71-5.87h53.66v.03c3.23 0 6.26 1.98 7.46 5.22l13.24 35.23c19.5 4.79 37.98 12.47 55.02 22.76l33.85-15.36c3-1.62 6.83-1.13 9.38 1.42l37.96 37.93h-.03c2.3 2.3 3.03 5.84 1.64 8.93l-15.59 34.33c5.13 8.45 9.64 17.38 13.49 26.65 3.6 8.5 7.03 19.19 9.3 28.38l34.58 12.98c3.37.94 5.87 4.03 5.87 7.71v53.66h-.03c0 3.23-1.98 6.26-5.19 7.46l-35.23 13.24c-2.42 9.77-5.71 19.72-9.53 28.85z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cloud/real-estate-construction.webp b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/real-estate-construction.webp
new file mode 100644
index 0000000..4823bef
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/cloud/real-estate-construction.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/advanced-technology-stack.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/advanced-technology-stack.svg
new file mode 100644
index 0000000..4d47dc3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/advanced-technology-stack.svg
@@ -0,0 +1 @@
+<svg height="511pt" viewBox="-67 0 511 511.99975" width="511pt" xmlns="http://www.w3.org/2000/svg"><path d="m378.390625 354.53125c0-2.730469-1.488281-5.25-3.878906-6.566406l-33.4375-18.425782 33.4375-18.425781c2.394531-1.320312 3.878906-3.835937 3.878906-6.566406 0-2.734375-1.488281-5.25-3.878906-6.566406l-77.105469-42.488281c15.179688-19.074219 23.765625-42.96875 23.765625-67.867188v-148.292969c0-7.097656-5.042969-13.3125-11.988281-14.769531l-113.9375-23.957031c-3.847656-.808594-7.753906-.808594-11.605469 0l-113.933594 23.953125c-6.945312 1.460937-11.988281 7.675781-11.988281 14.769531v148.640625c0 24.769531 8.519531 48.585938 23.578125 67.625l-76.917969 42.382812c-2.394531 1.320313-3.878906 3.835938-3.878906 6.566407 0 2.734375 1.488281 5.25 3.878906 6.566406l33.4375 18.429687-33.4375 18.425782c-2.394531 1.316406-3.878906 3.832031-3.878906 6.566406 0 2.730469 1.488281 5.246094 3.878906 6.566406l33.4375 18.425782-33.4375 18.425781c-2.394531 1.320312-3.878906 3.835937-3.878906 6.566406 0 2.734375 1.488281 5.25 3.878906 6.566406l181.449219 99.984375c1.125.621094 2.371094.933594 3.617187.933594 1.246094 0 2.492188-.3125 3.621094-.933594l181.449219-99.984375c2.390625-1.316406 3.878906-3.832031 3.878906-6.566406 0-2.730469-1.488281-5.246094-3.878906-6.566406l-33.441406-18.425781 33.441406-18.425782c2.386719-1.316406 3.875-3.835937 3.875-6.566406zm-305.675781-315.199219c0-.046875.03125-.085937.074218-.097656l113.9375-23.953125c.902344-.1875 1.808594-.285156 2.71875-.285156.90625 0 1.816407.097656 2.71875.285156l113.933594 23.953125c.046875.011719.078125.050781.078125.097656v148.292969c0 30.300781-14.730469 58.890625-39.40625 76.476562l-74.070312 52.785157c-2.351563 1.679687-5.511719 1.667969-7.855469-.023438l-73.132812-52.710937c-24.417969-17.601563-38.996094-46.082032-38.996094-76.183594zm18.984375 227.648438c3.515625 3.339843 7.261719 6.464843 11.242187 9.335937l73.128906 52.710938c3.796876 2.738281 8.257813 4.109375 12.714844 4.109375 4.417969 0 8.839844-1.347657 12.617188-4.039063l74.070312-52.789062c4.070313-2.898438 7.898438-6.066406 11.488282-9.453125l68.398437 37.6875-165.914063 91.425781-165.914062-91.425781zm207.59375 118.445312c-3.625 1.996094-4.945313 6.558594-2.945313 10.183594 1.363282 2.480469 3.929688 3.882813 6.574219 3.882813 1.222656 0 2.460937-.300782 3.609375-.933594l19.007812-10.472656 29.820313 16.429687-165.914063 91.425781-165.910156-91.425781 29.820313-16.429687 132.472656 72.996093c1.125.621094 2.371094.933594 3.621094.933594 1.246093 0 2.492187-.3125 3.617187-.933594l83.476563-45.996093c3.625-2 4.945312-6.5625 2.949219-10.1875-2-3.625-6.5625-4.945313-10.1875-2.945313l-79.855469 44.003906-165.914063-91.425781 29.820313-16.429688 132.472656 72.996094c1.125.621094 2.375.933594 3.621094.933594 1.246093 0 2.492187-.3125 3.617187-.933594l132.476563-72.996094 29.820312 16.429688zm0 0"/><path d="m119.308594 253.605469 65.136718 46.953125c1.3125.945312 2.847657 1.417968 4.386719 1.417968 1.523438 0 3.046875-.464843 4.351563-1.394531l66.042968-47.066406c21.261719-15.152344 33.953126-39.785156 33.953126-65.890625v-66.609375c0-4.140625-3.355469-7.496094-7.496094-7.496094s-7.5 3.355469-7.5 7.496094v66.609375c0 21.269531-10.339844 41.335938-27.660156 53.679688l-61.664063 43.949218-60.78125-43.8125c-17.136719-12.355468-27.371094-32.34375-27.371094-53.472656v-126l88.738281-18.652344 88.738282 18.652344v29.054688c0 4.144531 3.359375 7.5 7.5 7.5s7.496094-3.355469 7.496094-7.5v-35.136719c0-3.546875-2.484376-6.609375-5.953126-7.339844l-96.238281-20.230469c-1.015625-.214844-2.066406-.214844-3.085937 0l-96.234375 20.230469c-3.472657.730469-5.957031 3.792969-5.957031 7.339844v132.082031c0 25.933594 12.558593 50.472656 33.597656 65.636719zm0 0"/><path d="m110.964844 148.507812c0 43.273438 35.207031 78.480469 78.480468 78.480469 43.273438 0 78.476563-35.207031 78.476563-78.480469 0-43.269531-35.203125-78.476562-78.476563-78.476562-43.273437 0-78.480468 35.207031-78.480468 78.476562zm141.960937 0c0 35.007813-28.476562 63.484376-63.480469 63.484376-35.003906 0-63.484374-28.476563-63.484374-63.484376 0-35.003906 28.480468-63.480468 63.484374-63.480468 35.003907 0 63.480469 28.476562 63.480469 63.480468zm0 0"/><path d="m166.445312 107.039062c-2.632812 3.1875-3.695312 7.34375-2.914062 11.402344l5.507812 28.652344c-4.546874 5.015625-7.085937 11.507812-7.085937 18.410156 0 15.160156 12.332031 27.492188 27.492187 27.492188 15.160157 0 27.492188-12.332032 27.492188-27.492188 0-6.902344-2.539062-13.394531-7.089844-18.410156l5.511719-28.652344c.78125-4.058594-.28125-8.214844-2.914063-11.402344-2.632812-3.1875-6.515624-5.015624-10.648437-5.015624h-24.703125c-4.132812 0-8.015625 1.828124-10.648438 5.015624zm33.917969 9.980469-6.019531 31.300781c-.53125 2.765626.53125 5.597657 2.753906 7.328126 3.078125 2.398437 4.84375 5.988281 4.84375 9.855468 0 6.890625-5.605468 12.496094-12.496094 12.496094-6.890624 0-12.496093-5.605469-12.496093-12.496094 0-3.867187 1.761719-7.457031 4.839843-9.855468 2.226563-1.730469 3.289063-4.5625 2.757813-7.328126l-6.019531-31.300781zm0 0"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/customized-strategies.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/customized-strategies.svg
new file mode 100644
index 0000000..7cbce00
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/customized-strategies.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 66 66" width="512" xmlns="http://www.w3.org/2000/svg"><g id="XMLID_718_"><path id="XMLID_1169_" d="m64.3 28.8-7.3-2.3c-.6-2.1-1.4-4-2.4-5.8l3.6-6.8c.2-.4.1-.9-.2-1.2l-4.7-4.7c-.3-.3-.8-.4-1.2-.2l-6.8 3.6c-1.8-1.1-3.8-1.9-5.8-2.4l-2.3-7.3c-.1-.4-.5-.7-1-.7h-6.5c-.4 0-.8.3-1 .7l-2.2 7.3c-2 .6-4 1.4-5.8 2.4l-6.8-3.6c-.4-.1-.9-.1-1.2.2l-4.7 4.7c-.3.3-.4.8-.2 1.2l3.6 6.8c-1 1.8-1.9 3.7-2.4 5.8l-7.3 2.3c-.4.1-.7.5-.7 1v6.5c0 .4.3.8.7 1l7.3 2.2c.6 2.1 1.4 4 2.4 5.8l-3.6 6.8c-.1.4-.1.9.2 1.2l4.6 4.6c.3.3.8.4 1.2.2l6.8-3.6c1.8 1.1 3.8 1.9 5.8 2.4l2.3 7.3c.1.4.5.7 1 .7h6.5c.4 0 .8-.3 1-.7l2.3-7.3c2-.5 4-1.3 5.8-2.4l6.8 3.6c.4.2.9.1 1.2-.2l4.6-4.6c.3-.3.4-.8.2-1.2l-3.6-6.8c1-1.8 1.8-3.7 2.4-5.8l7.3-2.3c.4-.1.7-.5.7-1v-6.5c.1-.4-.2-.8-.6-.9zm-1.3 6.7-7.2 2.2c-.3.1-.6.4-.7.7-.6 2.3-1.4 4.4-2.6 6.3-.2.3-.2.7 0 1l3.5 6.7-3.6 3.6-6.6-3.5c-.3-.2-.7-.2-1 0-2 1.2-4.1 2.1-6.3 2.6-.3.1-.6.3-.7.7l-2.3 7.2h-5.1l-2.2-7.1c-.1-.3-.4-.6-.7-.7-2.2-.5-4.3-1.4-6.3-2.6-.3-.2-.7-.2-1 0l-6.6 3.4-3.6-3.6 3.5-6.6c.2-.3.2-.7 0-1-1.2-1.9-2.1-4-2.6-6.3-.1-.3-.3-.6-.7-.7l-7.2-2.3v-5.1l7.1-2.2c.3-.1.6-.4.7-.7.6-2.3 1.4-4.4 2.6-6.3.2-.3.2-.7 0-1l-3.4-6.6 3.6-3.6 6.6 3.5c.3.2.7.2 1 0 2-1.2 4.1-2.1 6.3-2.6.3-.1.6-.3.7-.7l2.3-7.2h5.1l2.2 7.2c.1.3.4.6.7.7 2.2.5 4.3 1.4 6.3 2.6.3.2.7.2 1 0l6.6-3.5 3.6 3.6-3.5 6.7c-.2.3-.1.7 0 1 1.2 1.9 2 4 2.6 6.3.1.3.3.6.7.7l7.2 2.2z"/><path id="XMLID_1202_" d="m53.7 32h-2.3c-.5-9.3-8-16.8-17.3-17.3v-2.4c0-.6-.4-1-1-1s-1 .4-1 1v2.4c-9.3.5-16.8 8-17.3 17.3h-2.3c-.6 0-1 .4-1 1s.4 1 1 1h2.3c.5 9.3 8 16.8 17.3 17.3v2.3c0 .6.4 1 1 1s1-.4 1-1v-2.3c9.3-.5 16.8-8 17.3-17.3h2.3c.6 0 1-.4 1-1s-.5-1-1-1zm-19.7 17.3v-2.2c0-.6-.4-1-1-1s-1 .4-1 1v2.2c-8.2-.5-14.8-7.1-15.3-15.3h2.2c.6 0 1-.4 1-1s-.4-1-1-1h-2.2c.5-8.2 7.1-14.8 15.3-15.3v2.2c0 .6.4 1 1 1s1-.4 1-1v-2.2c8.2.5 14.8 7.1 15.3 15.3h-2.2c-.6 0-1 .4-1 1s.4 1 1 1h2.2c-.5 8.2-7.1 14.8-15.3 15.3z"/><path id="XMLID_1243_" d="m42.7 22.6c-.3-.2-.7-.1-1 .1-2.7 2.1-5.3 2.1-8.1 0-.4-.3-.8-.3-1.2 0-2.7 2.1-5.3 2.1-8.1 0-.3-.2-.7-.3-1-.1s-.6.5-.6.9v11c0 5.9 9.5 9.5 9.9 9.7.1 0 .2.1.4.1.1 0 .2 0 .4-.1.4-.2 9.9-3.8 9.9-9.7v-11c-.1-.3-.3-.7-.6-.9zm-1.5 11.9c0 3.5-5.7 6.6-8.3 7.6-2.6-1.1-8.3-4.1-8.3-7.6v-9.2c2.7 1.4 5.5 1.2 8.3-.6 2.7 1.8 5.5 2 8.3.6z"/><path id="XMLID_1246_" d="m33 28.4c-1.7 0-3 1.3-3 3 0 1.3.8 2.4 2 2.8v2.3c0 .6.4 1 1 1s1-.4 1-1v-2.3c1.2-.4 2-1.5 2-2.8 0-1.6-1.3-3-3-3zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/financial-security-3d-render.webp b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/financial-security-3d-render.webp
new file mode 100644
index 0000000..c14583b
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/financial-security-3d-render.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/healthcare-security.webp b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/healthcare-security.webp
new file mode 100644
index 0000000..266cea9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/healthcare-security.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/monitoring-software.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/monitoring-software.svg
new file mode 100644
index 0000000..390d659
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/monitoring-software.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m468.93 193.317v199.793c0 8.919-7.303 16.224-16.223 16.224h-425.483c-8.922 0-16.223-7.3-16.223-16.224v-288.006c0-8.923 7.3-16.224 16.223-16.224h272.92c-.158 1.005-.24 2.033-.24 3.078v23.699c0 .317.026.629.042.943h-261.226v249.899h402.491v-175.544l6.095-2.525 4.021 2.697c5.328 3.573 11.869 4.238 17.603 2.191zm-141.89 268.025h-54.925v-36.707h-64.301v36.707h-54.925c-17.617 0-31.986 14.369-31.986 31.986v7.763h238.124v-7.763c0-17.615-14.369-31.986-31.987-31.986zm-94.725-144.239v18.181c0 4.225 3.425 7.65 7.65 7.65s7.65-3.425 7.65-7.65v-18.181c0-4.225-3.425-7.65-7.65-7.65s-7.65 3.425-7.65 7.65zm-50.702-10.497-7.57 13.11c-2.113 3.647-.868 8.317 2.779 10.429 3.647 2.113 8.317.868 10.429-2.779l7.57-13.11c2.113-3.647.868-8.317-2.779-10.43s-8.317-.868-10.429 2.779zm106.305-2.779c-3.647 2.096-4.905 6.752-2.809 10.4l7.569 13.11c2.096 3.647 6.752 4.905 10.4 2.809s4.905-6.752 2.809-10.4l-7.569-13.11c-2.096-3.647-6.753-4.905-10.4-2.809zm-95.876-124.443c3.647-2.112 4.892-6.782 2.779-10.429l-7.57-13.111c-2.113-3.647-6.782-4.892-10.429-2.779-3.647 2.112-4.892 6.782-2.78 10.43l7.571 13.111c2.113 3.647 6.782 4.892 10.429 2.779zm100.636-23.511-7.569 13.111c-2.096 3.647-.838 8.304 2.809 10.4s8.303.838 10.4-2.809l7.569-13.111c2.096-3.647.838-8.304-2.809-10.4s-8.303-.839-10.4 2.809zm-52.713 17.884c4.225 0 7.65-3.425 7.65-7.65v-18.18c0-4.225-3.425-7.65-7.65-7.65s-7.65 3.425-7.65 7.65v18.18c0 4.225 3.425 7.65 7.65 7.65zm103.826 67.848c-22.941-29.989-55.319-49.976-91.71-53.636 17.546 5.215 30.344 21.463 30.344 40.703 0 23.45-19.01 42.46-42.46 42.46s-42.46-19.01-42.46-42.46c0-6.839 1.619-13.3 4.492-19.023.146 12.714 10.496 22.976 23.244 22.976 6.769 0 12.862-2.894 17.111-7.511-1.309.617-2.771.963-4.314.963-5.592 0-10.125-4.533-10.125-10.125s4.533-10.125 10.125-10.125c4.972 0 9.107 3.584 9.963 8.31.32-1.536.489-3.128.489-4.759 0-10.026-6.348-18.566-15.242-21.829-38.582 2.138-73.039 22.593-97.108 54.057 25.459 33.279 62.537 54.246 103.827 54.246s78.368-20.967 103.826-54.246zm157.208-149.647v23.699c0 2.123-1.466 3.907-3.549 4.318l-12.789 2.521-9.21 22.231 7.261 10.828c1.183 1.764.958 4.061-.543 5.563l-16.758 16.758c-1.502 1.501-3.799 1.726-5.563.543l-10.828-7.261-22.23 9.21-2.522 12.789c-.411 2.084-2.194 3.549-4.317 3.549h-23.699c-2.123 0-3.907-1.466-4.318-3.549l-2.522-12.79-22.23-9.21-10.828 7.261c-1.763 1.183-4.061.958-5.562-.543l-16.758-16.758c-1.501-1.501-1.726-3.799-.543-5.563l7.261-10.828-9.21-22.231-12.789-2.521c-2.083-.411-3.549-2.194-3.549-4.318v-23.699c0-2.124 1.466-3.907 3.549-4.318l12.789-2.522 9.21-22.231-7.261-10.828c-1.183-1.763-.958-4.061.543-5.563l16.758-16.758c1.501-1.501 3.799-1.725 5.562-.543l10.828 7.261 22.23-9.21 2.522-12.789c.411-2.083 2.194-3.549 4.317-3.549h23.699c2.123 0 3.907 1.466 4.317 3.549l2.522 12.789 22.231 9.21 10.828-7.261c1.764-1.183 4.061-.958 5.562.543l16.758 16.758c1.501 1.501 1.725 3.799.543 5.563l-7.261 10.828 9.21 22.231 12.789 2.522c2.083.411 3.549 2.194 3.549 4.318zm-45.257 11.849c0-26.311-21.329-47.641-47.641-47.641s-47.641 21.33-47.641 47.641 21.33 47.641 47.641 47.641 47.641-21.329 47.641-47.641z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/retail-security-innovation.webp b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/retail-security-innovation.webp
new file mode 100644
index 0000000..5795290
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/retail-security-innovation.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/risk-management.svg b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/risk-management.svg
new file mode 100644
index 0000000..aaf4abe
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/cybersecurity/risk-management.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 74 74" height="512" viewBox="0 0 74 74" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m62.41 17.57c.47 0 .85-.38.85-.85v-1.26c0-.47-.38-.85-.85-.85h-10.27c-.47 0-.85.38-.85.85v1.26c0 .47.38.85.85.85zm-10.12-1.96h9.96v.97h-9.96z"/><path d="m48.81 19.61c0 .28.22.5.5.5h15.93c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-15.93c-.28 0-.5.22-.5.5z"/><path d="m49.31 22.65h15.93c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-15.93c-.28 0-.5.22-.5.5s.22.5.5.5z"/><path d="m69.4 20.81c-.06-.14-.18-.25-.32-.3-.14-.04-.3-.02-.42.06l-.32.21v-7.48c0-1.05-.85-1.91-1.9-1.91h-5.23l-2.51-2.82c-.72-.8-2.12-.8-2.84.01l-2.51 2.81h-5.23c-1.05 0-1.9.86-1.9 1.91v7.48l-.31-.2c-.13-.09-.29-.11-.44-.06s-.26.16-.31.31c-.07.21-.11.42-.11.63v3.73h-15.19v-15.76c0-1.38-1.12-2.5-2.5-2.5h-20.36c-1.38 0-2.5 1.12-2.5 2.5v20.36c0 1.38 1.12 2.5 2.5 2.5h8.24v10c0 .28.22.5.5.5s.5-.22.5-.5v-10h1.21v8.94c0 .28.22.5.5.5s.5-.22.5-.5v-8.94h8.92c1.38 0 2.5-1.12 2.5-2.5v-1.39h27.39c.13 0 .24.11.24.24v21.24c0 .13-.11.24-.24.24h-30.88c-.28 0-.5.22-.5.5s.22.5.5.5h30.88c.68 0 1.24-.56 1.24-1.24v-21.24c0-.68-.56-1.24-1.24-1.24h-27.4v-1.21h27.4c1.34 0 2.44 1.09 2.44 2.44v21.25c0 1.35-1.1 2.45-2.44 2.45h-29.57c-.28 0-.5.22-.5.5s.22.5.5.5h29.58c.95 0 1.82-.39 2.44-1.02v4.57c0 1.35-1.1 2.45-2.44 2.45h-25.44c-.28 0-.5.22-.5.5s.22.5.5.5h11.61v3.7h-9.44c-.28 0-.5.22-.5.5s.22.5.5.5h14.4c.28 0 .52.24.52.52s-.24.52-.52.52h-14.93c-.28 0-.5.22-.5.5s.22.5.5.5h14.94c.84 0 1.52-.68 1.52-1.52s-.68-1.52-1.52-1.52h-3.96v-3.7h12.82c1.9 0 3.44-1.55 3.44-3.45v-28.25c0-1.9-1.54-3.44-3.44-3.44h-4.52l-5.53-3.73v-8.16c0-.5.4-.91.9-.91h18.32c.5 0 .9.41.9.91v8.13s-4.37 2.76-4.44 2.76h-2.67c-.28 0-.5.22-.5.5s.22.5.5.5h1.39l-.49.32c-.23.15-.3.46-.15.69.15.24.46.3.69.15l6.84-4.49v13.06c0 .15-.04.28-.1.4l-5.93-3.88c-.23-.15-.54-.09-.69.15-.15.23-.09.54.15.69l5.41 3.54h-5.14c-.28 0-.5.22-.5.5s.22.5.5.5h5.4c.84-.05 1.25-.48 1.27-.5.38-.34.63-.84.63-1.4v-13.46c-.01-.24-.04-.46-.11-.65zm-40.54 4.88v4.1c0 .83-.67 1.5-1.5 1.5h-9.4c-.01 0-.01 0-.02 0s-.01 0-.02 0h-2.17c-.01 0-.01 0-.02 0s-.01 0-.02 0h-8.71c-.82 0-1.5-.67-1.5-1.5v-20.36c0-.83.68-1.5 1.5-1.5h20.37c.83 0 1.5.67 1.5 1.5v16.26zm22.1-.5h-4.91v-3.31zm3.73-13.8 1.91-2.15c.35-.38 1.01-.38 1.36 0l1.91 2.15z"/><path d="m39.97 56.51c0-1.1-.9-2-2-2-1.09 0-1.98.9-1.98 2s.89 2 1.98 2c1.1 0 2-.89 2-2zm-2.99 0c0-.55.44-1 .98-1 .55 0 1 .45 1 1s-.45 1-1 1c-.53 0-.98-.45-.98-1z"/><path d="m37.98 47.11c4.32 0 7.84-3.52 7.84-7.85 0-4.32-3.52-7.84-7.84-7.84-4.33 0-7.85 3.52-7.85 7.84 0 4.33 3.52 7.85 7.85 7.85zm0-14.69c3.77 0 6.84 3.07 6.84 6.84 0 3.78-3.07 6.85-6.84 6.85-3.78 0-6.85-3.07-6.85-6.85 0-3.77 3.07-6.84 6.85-6.84z"/><path d="m31.82 39.6c.11.13 2.78 3.11 6.15 3.11 3.38 0 6.04-2.99 6.15-3.11.17-.19.17-.47 0-.66-.11-.13-2.77-3.11-6.15-3.11-3.37 0-6.04 2.99-6.15 3.11-.16.19-.16.47 0 .66zm6.15-2.78c2.3 0 4.32 1.71 5.08 2.44-.76.74-2.77 2.44-5.08 2.44-2.3 0-4.31-1.71-5.07-2.44.76-.73 2.78-2.44 5.07-2.44z"/><path d="m40.1 39.27c0-1.19-.93-2.12-2.12-2.12s-2.12.93-2.12 2.12.93 2.12 2.12 2.12 2.12-.93 2.12-2.12zm-3.25 0c0-.63.49-1.12 1.12-1.12s1.12.49 1.12 1.12-.49 1.12-1.12 1.12-1.12-.49-1.12-1.12z"/><path d="m20.65 43.91c-.45-.77-1.26-1.23-2.15-1.23s-1.7.46-2.15 1.23l-11.49 19.39c-.46.78-.47 1.72-.02 2.51s1.26 1.26 2.17 1.26h22.98c.91 0 1.72-.47 2.17-1.26s.44-1.73-.02-2.51zm10.65 21.4c-.27.47-.76.76-1.3.76h-22.99c-.55 0-1.03-.28-1.3-.76-.27-.47-.26-1.04.01-1.51l11.49-19.38c.27-.46.76-.74 1.29-.74s1.02.28 1.29.74l11.5 19.38c.27.47.28 1.04.01 1.51z"/><path d="m20.1 46.64c-.33-.59-.94-.96-1.6-.96-.67 0-1.26.36-1.6.95l-8.77 15.5c-.34.58-.34 1.31-.02 1.9.33.61.93.98 1.61.98h17.54c.68 0 1.29-.37 1.62-.98.32-.59.31-1.32-.02-1.9zm7.91 16.93c-.16.29-.43.46-.74.46h-17.54c-.31 0-.58-.17-.73-.46-.16-.29-.16-.65 0-.93l8.77-15.51c.16-.28.42-.44.73-.44.3 0 .57.17.73.45l8.77 15.51c.16.28.17.64.01.92z"/><path d="m17.38 58.36c.01.28.13.54.36.76.2.18.46.27.76.27.29 0 .55-.09.78-.3.19-.2.3-.45.31-.73l.29-5.54v-1.65c0-.37-.13-.71-.39-1.02-.55-.57-1.48-.55-2-.01-.27.27-.42.63-.42 1.02v1.68zm.7-7.19c0-.13.04-.24.13-.32.16-.17.42-.15.55-.02.09.1.13.21.13.34v1.62l-.29 5.51.5.03-.6.05c-.05 0-.08-.01-.08-.01-.03-.03-.04-.05-.04-.07l-.29-5.48v-1.65z"/><path d="m18.48 59.56c-.84 0-1.53.69-1.53 1.54 0 .84.69 1.53 1.53 1.53s1.53-.69 1.53-1.53c.01-.85-.68-1.54-1.53-1.54zm0 2.07c-.29 0-.53-.24-.53-.53 0-.3.24-.54.53-.54s.53.24.53.54c.01.29-.23.53-.53.53z"/><path d="m15.35 19.61c.49 0 .86-.17 1.14-.49.26-.32.39-.72.39-1.2 0-.49-.13-.89-.39-1.21-.27-.32-.65-.48-1.14-.48-.48 0-.86.17-1.13.48-.26.32-.4.72-.4 1.21 0 .48.14.89.4 1.2.27.32.65.49 1.13.49zm-.54-2.39c.13-.17.31-.26.54-.26s.41.08.54.26c.14.18.2.41.2.7 0 .28-.07.51-.2.69-.13.17-.31.26-.54.26s-.41-.09-.54-.26c-.14-.18-.2-.41-.2-.69 0-.29.06-.52.2-.7z"/><path d="m19.01 22.99c.49 0 .86-.17 1.14-.49.26-.32.39-.72.39-1.2 0-.49-.13-.89-.39-1.21-.27-.32-.65-.48-1.14-.48-.48 0-.86.17-1.13.48-.26.32-.4.72-.4 1.21 0 .48.14.89.4 1.2.27.33.65.49 1.13.49zm-.54-2.39c.13-.17.31-.26.54-.26.24 0 .41.08.55.26.13.18.2.41.2.7 0 .28-.07.51-.2.69-.14.17-.31.26-.55.26-.23 0-.41-.09-.54-.26-.14-.18-.2-.41-.2-.69s.07-.52.2-.7z"/><path d="m15.35 22.92c.07 0 .14-.02.2-.05.05-.04.1-.09.14-.14l3.64-5.84c.05-.08.08-.16.08-.23 0-.11-.04-.2-.11-.26s-.16-.09-.27-.09c-.13 0-.24.06-.32.17l-3.67 5.88c-.04.06-.06.12-.06.19 0 .11.04.2.12.27.06.06.15.1.25.1z"/><path d="m13.96 27.78c-3.38-1.34-5.56-4.55-5.56-8.18 0-2 .66-3.89 1.91-5.45.17-.22.14-.53-.08-.7s-.53-.14-.7.08c-1.4 1.74-2.13 3.84-2.13 6.07 0 4.05 2.43 7.62 6.19 9.11.06.02.12.04.18.04.2 0 .39-.12.46-.32.11-.26-.02-.55-.27-.65z"/><path d="m11.72 12.73c1.54-1.23 3.49-1.9 5.48-1.9 3.62 0 6.82 2.18 8.16 5.56.08.2.27.32.46.32.06 0 .12-.01.18-.04.26-.1.38-.39.28-.65-1.49-3.76-5.06-6.19-9.09-6.19-2.21 0-4.38.75-6.1 2.12-.22.17-.25.49-.08.7s.49.25.71.08z"/><path d="m26.3 17.75c-.27.04-.46.29-.42.57.06.42.09.84.09 1.28 0 4.85-3.93 8.79-8.77 8.79-.28 0-.5.22-.5.5s.22.5.5.5c5.39 0 9.77-4.39 9.77-9.79 0-.48-.03-.95-.1-1.42-.04-.28-.3-.47-.57-.43z"/><path d="m15.94 13.92c.27-.06.44-.33.38-.59-.06-.27-.32-.44-.59-.38-3.11.68-5.37 3.48-5.37 6.66 0 .69.11 1.39.31 2.07.07.22.26.35.48.35.05 0 .1-.01.14-.02.26-.08.41-.36.33-.62-.18-.59-.27-1.19-.27-1.78.01-2.73 1.93-5.11 4.59-5.69z"/><path d="m22.22 24.19c.18-.21.17-.52-.04-.71-.21-.18-.52-.17-.71.04-1.08 1.21-2.64 1.91-4.29 1.91-1.64 0-3.21-.7-4.3-1.91-.19-.21-.5-.22-.71-.04s-.22.5-.04.71c1.28 1.42 3.12 2.24 5.04 2.24 1.95.01 3.78-.81 5.05-2.24z"/><path d="m23.06 22c.05.02.1.02.15.02.21 0 .41-.13.48-.35.21-.66.32-1.35.32-2.08 0-3.18-2.25-5.98-5.36-6.66-.27-.06-.54.11-.59.38s.11.54.38.6c2.65.58 4.57 2.97 4.57 5.68 0 .62-.09 1.21-.27 1.77-.09.27.06.55.32.64z"/><path d="m29.49 33.71c-2.65 3.99-2.12 9.34 1.27 12.73.76.76 1.6 1.37 2.51 1.82.07.04.15.05.22.05.18 0 .36-.1.45-.28.12-.25.02-.55-.23-.67-.81-.4-1.57-.95-2.25-1.63-3.05-3.05-3.54-7.88-1.15-11.47.15-.23.09-.54-.14-.69-.22-.16-.53-.09-.68.14z"/><path d="m37.18 48.36c-.27-.01-.52.18-.54.46s.18.52.46.54c.29.02.57.04.85.04 2.66 0 5.21-1.05 7.11-2.95 2.1-2.1 3.16-5 2.92-7.96-.02-.27-.27-.48-.54-.46-.28.02-.48.26-.46.54.22 2.67-.74 5.28-2.63 7.17-1.89 1.88-4.51 2.84-7.17 2.62z"/><path d="m45.06 32.15c-3.4-3.4-8.76-3.93-12.74-1.27-.23.15-.29.46-.14.69s.46.29.69.14c3.59-2.4 8.41-1.92 11.47 1.14.67.67 1.23 1.43 1.65 2.24.09.17.26.27.44.27.08 0 .16-.02.23-.06.25-.13.34-.43.21-.67-.46-.9-1.07-1.74-1.81-2.48z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/dlt/cutting-edge-technology.svg b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/cutting-edge-technology.svg
new file mode 100644
index 0000000..51acda4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/cutting-edge-technology.svg
@@ -0,0 +1 @@
+<svg fill="none" height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m22 8c0-1.65685 1.3431-3 3-3s3 1.34315 3 3c0 1.61693-1.2792 2.9351-2.8808 2.9977l-1.2248 2.4495c-.1694.3388-.5156.5528-.8944.5528h-3v1h4.1707c.4118-1.1652 1.5231-2 2.8293-2 1.6569 0 3 1.3431 3 3s-1.3431 3-3 3c-1.3062 0-2.4175-.8348-2.8293-2h-4.1707v1h3c.3788 0 .725.214.8944.5528l1.2248 2.4495c1.6016.0626 2.8808 1.3808 2.8808 2.9977 0 1.6569-1.3431 3-3 3s-3-1.3431-3-3c0-.9756.4657-1.8424 1.1868-2.3903l-.8048-1.6097h-2.5527c-.4118 1.1652-1.5231 2-2.8293 2h-3c0 1.6569-1.3431 3-3 3h-6c-1.65685 0-3-1.3431-3-3v-12c0-1.65685 1.34314-3 3-3h6c1.6569 0 3 1.34315 3 3h3c1.3062 0 2.4175.8348 2.8293 2h2.5527l.8048-1.6097c-.7211-.54793-1.1868-1.41473-1.1868-2.3903zm-4 11c0 .5523-.4477 1-1 1h-3v-1h2c.5523 0 1-.4477 1-1v-4c0-.5523-.4477-1-1-1h-2v-1h3c.5523 0 1 .4477 1 1zm-6 1.1765v-10.1765c0-.55228-.4477-1-1-1h-6c-.55229 0-1 .44771-1 1v10.1765h1.7517c.03045-.5249.46576-.9412.9983-.9412h2.5c.53254 0 .9678.4163.9983.9412z" fill="rgb(0,0,0)" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/dlt/end-to-end-execution.svg b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/end-to-end-execution.svg
new file mode 100644
index 0000000..5947169
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/end-to-end-execution.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="512" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_x0020_1"><g id="_224026472"><g><g id="_224025848"><path d="m322 329h-133c-4 0-7-4-7-7v-134c0-4 3-7 7-7h133c4 0 7 3 7 7v134c0 3-3 7-7 7zm-126-14h119v-120h-119z"/></g><g id="_224025944"><path d="m363 237h-41c-4 0-7-3-7-7s3-7 7-7h41c14 0 26-11 26-26v-102c0-4 3-7 7-7s7 3 7 7v102c0 22-18 40-40 40zm-174 0h-41c-22 0-40-18-40-40v-102c0-4 4-7 7-7 4 0 7 3 7 7v102c0 15 12 26 26 26h41c4 0 7 3 7 7s-3 7-7 7z"/></g><g id="_224026520"><path d="m89 128c-2 0-4-1-5-2-3-3-3-7 0-10l27-26c2-2 7-2 9 0 3 3 3 8 0 10l-26 26c-2 1-3 2-5 2z"/></g><g id="_224025872"><path d="m142 128c-2 0-3-1-5-2l-26-26c-3-2-3-7-1-10 3-2 8-2 10 0l27 26c3 3 3 7 0 10-1 1-3 2-5 2z"/></g><g id="_224026112"><path d="m369 128c-2 0-4-1-5-2-3-3-2-7 0-10l27-26c3-2 7-2 10 0 3 3 2 8 0 10l-27 26c-1 1-3 2-5 2z"/></g><g id="_224026208"><path d="m422 128c-1 0-3-1-4-2l-27-26c-3-2-3-7 0-10 2-2 7-2 10 0l26 26c3 3 3 7 1 10-2 1-4 2-6 2z"/></g><g id="_224026232"><path d="m396 422c-4 0-7-4-7-7v-102c0-15-12-26-26-26h-41c-4 0-7-3-7-7s3-7 7-7h41c22 0 40 18 40 40v102c0 3-3 7-7 7zm-281 0c-3 0-7-4-7-7v-102c0-22 18-40 40-40h41c4 0 7 3 7 7s-3 7-7 7h-41c-14 0-26 11-26 26v102c0 3-3 7-7 7z"/></g><g id="_224026280"><path d="m396 422c-2 0-4-1-5-3-3-2-3-7 0-9l27-26c2-3 7-3 10 0 2 3 2 7-1 10l-26 26c-2 1-3 2-5 2z"/></g><g id="_224026592"><path d="m396 422c-2 0-4-1-5-2l-27-26c-2-3-3-7 0-10s7-3 10 0l27 26c2 2 3 7 0 9-2 2-3 3-5 3z"/></g><g id="_224026664"><path d="m115 422c-1 0-3-1-5-3s-2-7 1-9l26-26c3-3 7-3 10 0s3 7 0 10l-27 26c-1 1-3 2-5 2z"/></g><g id="_224026736"><path d="m115 422c-1 0-3-1-4-2l-27-26c-3-3-3-7 0-10 2-3 7-3 10 0l26 26c3 2 3 7 0 9-1 2-3 3-5 3z"/></g><g><g><g id="_224026856"><path d="m115 98c-27 0-49-22-49-49s22-49 49-49 49 22 49 49-22 49-49 49zm0-84c-19 0-35 16-35 35s16 35 35 35 35-16 35-35-16-35-35-35z"/></g><g id="_224026928"><path d="m397 98c-27 0-49-22-49-49s22-49 49-49 49 22 49 49-22 49-49 49zm0-84c-19 0-35 16-35 35s16 35 35 35 35-16 35-35-16-35-35-35z"/></g></g><g id="_224025968"><path d="m311 82h-110c-4 0-7-3-7-7v-52c0-4 3-7 7-7h110c4 0 7 3 7 7v52c0 4-3 7-7 7zm-103-14h96v-38h-96z"/></g><g id="_224027048"><path d="m355 56h-44c-3 0-7-3-7-7s4-7 7-7h44c4 0 7 3 7 7s-3 7-7 7zm-154 0h-44c-4 0-7-3-7-7s3-7 7-7h44c4 0 7 3 7 7s-3 7-7 7z"/></g></g><g id="_224027144"><path d="m256 195c-4 0-7-3-7-7v-113c0-4 3-7 7-7s7 3 7 7v113c0 4-3 7-7 7z"/></g><g><g><g id="_224027264"><path d="m115 512c-27 0-49-22-49-49s22-49 49-49 49 22 49 49-22 49-49 49zm0-84c-19 0-35 16-35 35s16 35 35 35 35-16 35-35-16-35-35-35z"/></g><g id="_224027336"><path d="m397 512c-27 0-49-22-49-49s22-49 49-49 49 22 49 49-22 49-49 49zm0-84c-19 0-35 16-35 35s16 35 35 35 35-16 35-35-16-35-35-35z"/></g></g><g id="_224027120"><path d="m311 496h-110c-4 0-7-3-7-7v-52c0-4 3-7 7-7h110c4 0 7 3 7 7v52c0 4-3 7-7 7zm-103-14h96v-38h-96z"/></g><g id="_224027456"><path d="m355 470h-44c-3 0-7-3-7-7s4-7 7-7h44c4 0 7 3 7 7s-3 7-7 7zm-154 0h-44c-4 0-7-3-7-7s3-7 7-7h44c4 0 7 3 7 7s-3 7-7 7z"/></g></g><g id="_224027528"><path d="m299 305h-87c-4 0-7-3-7-7v-86c0-4 3-7 7-7h87c4 0 7 3 7 7v86c0 4-3 7-7 7zm-80-14h73v-72h-73z"/></g><g><g id="_224027648"><path d="m273 262h-35c-4 0-7-3-7-7s3-7 7-7h35c4 0 7 3 7 7s-3 7-7 7z"/></g><g><g id="_224027744"><path d="m273 240h-35c-4 0-7-3-7-7s3-7 7-7h35c4 0 7 3 7 7s-3 7-7 7z"/></g><g id="_224027816"><path d="m273 284h-35c-3 0-7-3-7-7s4-7 7-7h35c4 0 7 3 7 7s-3 7-7 7z"/></g></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/dlt/financial-innovation.webp b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/financial-innovation.webp
new file mode 100644
index 0000000..621bcb9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/financial-innovation.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/dlt/healthcare-pharmaceuticals.webp b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/healthcare-pharmaceuticals.webp
new file mode 100644
index 0000000..bb8f6a0
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/healthcare-pharmaceuticals.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/dlt/seamless-integration.svg b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/seamless-integration.svg
new file mode 100644
index 0000000..9bce776
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/seamless-integration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m336.279 158.661h-160.558c-6.409 0-11.623 5.214-11.623 11.623v151.667c0 6.409 5.214 11.623 11.623 11.623h12.927v12.765c0 3.866 3.134 7 7 7h20.312c3.866 0 7-3.134 7-7v-12.765h66.081v12.765c0 3.866 3.134 7 7 7h20.312c3.866 0 7-3.134 7-7v-12.765h12.927c6.409 0 11.623-5.214 11.623-11.623v-151.667c-.001-6.409-5.215-11.623-11.624-11.623zm-127.319 180.678h-6.312v-5.765h6.312zm100.392 0h-6.312v-5.765h6.312zm24.55-19.765h-155.804v-146.913h155.804zm-110.532-66.456h1.49c.814 3.624 2.246 7.016 4.179 10.061l-1.062 1.062c-2.734 2.733-2.734 7.166 0 9.9 1.367 1.366 3.158 2.05 4.95 2.05s3.583-.684 4.95-2.05l1.062-1.062c3.045 1.934 6.436 3.365 10.061 4.179v1.491c0 3.866 3.134 7 7 7s7-3.134 7-7v-1.519c3.537-.814 6.935-2.232 10.028-4.185l1.096 1.096c1.367 1.366 3.158 2.05 4.95 2.05s3.583-.684 4.95-2.05c2.734-2.734 2.734-7.167 0-9.9l-1.042-1.042c2.006-3.111 3.427-6.514 4.215-10.081h1.434c3.866 0 7-3.134 7-7s-3.134-7-7-7h-1.49c-.815-3.624-2.247-7.015-4.181-10.06l1.064-1.064c2.734-2.733 2.734-7.166 0-9.899-2.733-2.733-7.166-2.733-9.899 0l-1.065 1.064c-3.045-1.934-6.436-3.366-10.059-4.181v-1.49c0-3.866-3.134-7-7-7s-7 3.134-7 7v1.49c-3.624.814-7.016 2.245-10.061 4.179l-1.062-1.062c-2.733-2.733-7.166-2.732-9.9 0-2.733 2.734-2.734 7.166 0 9.9l1.062 1.062c-1.934 3.045-3.365 6.437-4.179 10.061h-1.49c-3.866 0-7 3.134-7 7s3.133 7 6.999 7zm32.63-24.923c9.87 0 17.91 8.029 17.923 17.898 0 .037 0 .073.001.109.078 4.565-1.72 8.952-5.062 12.35-3.429 3.488-8.117 5.488-12.862 5.488-9.882 0-17.922-8.04-17.922-17.922-.001-9.883 8.039-17.923 17.922-17.923zm-73.771 50.161c0 3.67 2.826 6.675 6.419 6.971v11.721c0 6.688 5.441 12.129 12.129 12.129h110.446c6.688 0 12.129-5.441 12.129-12.129v-101.861c0-6.688-5.441-12.129-12.129-12.129h-110.446c-6.688 0-12.129 5.441-12.129 12.129v11.721c-3.593.296-6.419 3.301-6.419 6.971s2.826 6.675 6.419 6.971v50.537c-3.593.295-6.419 3.299-6.419 6.969zm127.123-81.298v98.119h-106.704v-9.828c3.797-.079 6.854-3.176 6.854-6.993s-3.056-6.914-6.854-6.993v-50.493c3.797-.079 6.854-3.176 6.854-6.993s-3.056-6.914-6.854-6.993v-9.828h106.704zm-224.687-133.161h-40.666c-3.866 0-7 3.134-7 7v40.666c0 3.866 3.134 7 7 7h40.666c3.866 0 7-3.134 7-7v-40.666c0-3.866-3.134-7-7-7zm-7 40.665h-26.666v-26.665h26.666zm363.438-40.665h-40.666c-3.866 0-7 3.134-7 7v40.666c0 3.866 3.134 7 7 7h40.666c3.866 0 7-3.134 7-7v-40.666c0-3.866-3.134-7-7-7zm-7 40.665h-26.666v-26.665h26.666zm34.999 42c1.856 0 3.637-.738 4.95-2.05l26.898-26.898c1.312-1.313 2.05-3.093 2.05-4.95v-96.664c0-3.866-3.134-7-7-7h-96.665c-1.856 0-3.637.738-4.95 2.05l-26.898 26.898c-1.312 1.313-2.05 3.093-2.05 4.95v27.883h-218.875v-54.781c0-3.866-3.134-7-7-7h-96.664c-1.856 0-3.637.738-4.95 2.05l-26.898 26.898c-1.312 1.313-2.05 3.094-2.05 4.95v96.665c0 3.866 3.134 7 7 7h54.781v218.875h-27.883c-1.856 0-3.637.737-4.95 2.051l-26.898 26.898c-1.312 1.312-2.05 3.092-2.05 4.949v96.664c0 3.866 3.134 7 7 7h96.665c1.856 0 3.637-.737 4.95-2.051l26.898-26.898c1.312-1.312 2.05-3.093 2.05-4.949v-27.883h218.875v54.781c0 3.866 3.134 7 7 7h96.665c1.856 0 3.637-.737 4.95-2.051l26.898-26.898c1.312-1.312 2.05-3.093 2.05-4.949v-96.664c0-3.866-3.134-7-7-7h-54.782v-218.876zm-89.664-96.664h82.665v82.665h-82.665zm96.664 72.765v-76.866l12.898-12.898v76.866zm-73.867-99.663h76.866l-12.898 12.898h-76.866zm-356.438 0h76.866l-12.898 12.898h-76.866zm86.765 9.899v76.866l-12.898 12.898v-76.866zm-109.562 16.999h82.665v82.665h-82.665zm22.797 329.54h76.866l-12.898 12.898h-76.866zm-22.797 26.898h82.665v82.664h-82.665zm96.664 72.764v-76.865l12.898-12.898v76.865zm269.673-86.764 12.898-12.898h76.866l-12.898 12.898zm-9.899 14h82.665v82.664h-82.665zm96.664 72.764v-76.865l12.898-12.898v76.865zm-48.883-113.662h-27.883c-1.856 0-3.637.737-4.95 2.051l-26.898 26.898c-1.312 1.312-2.05 3.093-2.05 4.949v27.883h-218.876v-54.781c0-3.866-3.134-7-7-7h-54.781v-218.876h27.883c1.856 0 3.637-.738 4.95-2.05l26.898-26.898c1.312-1.313 2.05-3.093 2.05-4.95v-27.883h218.875v54.781c0 3.866 3.134 7 7 7h54.781v218.876zm13.884 54.896h-40.666c-3.866 0-7 3.134-7 7v40.666c0 3.866 3.134 7 7 7h40.666c3.866 0 7-3.134 7-7v-40.666c0-3.866-3.134-7-7-7zm-7 40.666h-26.666v-26.666h26.666zm-349.438-40.666h-40.666c-3.866 0-7 3.134-7 7v40.666c0 3.866 3.134 7 7 7h40.666c3.866 0 7-3.134 7-7v-40.666c0-3.866-3.134-7-7-7zm-7 40.666h-26.666v-26.666h26.666z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/dlt/strategic-planning.svg b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/strategic-planning.svg
new file mode 100644
index 0000000..a3c06ae
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/strategic-planning.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="1.707in" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 1707 1707" width="1.707in" xmlns="http://www.w3.org/2000/svg"><g id="Layer_x0020_1"><g id="_310986872"><g><g><g><path d="m853 731c-188 0-341-153-341-341s153-341 341-341c189 0 342 153 342 341s-153 341-342 341zm0-637c-163 0-296 133-296 296s133 296 296 296 296-133 296-296-133-296-296-296z"/></g><g><g><path d="m926 558h-145c-13 0-23-10-23-23 0-12 10-23 23-23h122v-99h-122c-13 0-23-10-23-23v-145c0-13 10-23 23-23h145c12 0 23 10 23 23 0 12-11 23-23 23h-123v99h123c12 0 23 10 23 23v145c0 13-11 23-23 23z"/></g><g><path d="m853 268c-12 0-22-11-22-23v-52c0-12 10-22 22-22 13 0 23 10 23 22v52c0 12-10 23-23 23z"/></g><g><path d="m853 609c-12 0-22-10-22-22v-52c0-12 10-23 22-23 13 0 23 11 23 23v52c0 12-10 22-23 22z"/></g></g></g><g><path d="m853 1043c-12 0-22-10-22-23v-311c0-13 10-23 22-23 13 0 23 10 23 23v311c0 13-10 23-23 23z"/></g><g><path d="m1020 1292h-334c-12 0-22-10-22-23v-249c0-12 10-22 22-22h334c13 0 23 10 23 22v249c0 13-10 23-23 23zm-311-46h289v-203h-289z"/></g><g><path d="m1365 1167h-345c-12 0-22-10-22-22 0-13 10-23 22-23h323l1-709h-172c-13 0-23-10-23-23s10-23 23-23h195c6 0 12 3 16 7s7 10 7 16l-2 755c0 12-10 22-23 22z"/></g><g><path d="m686 1167h-345c-12 0-22-10-22-22l-2-755c0-6 2-12 6-16 5-4 11-7 17-7h195c12 0 22 10 22 23s-10 23-22 23h-173l2 709h322c13 0 23 10 23 23 0 12-10 22-23 22z"/></g><g><path d="m1589 1567h-579c-12 0-23-10-23-23 0-12 11-23 23-23h556v-303c0-13 10-23 23-23 12 0 22 10 22 23v326c0 13-10 23-22 23zm0-451c-13 0-23-10-23-22v-304h-200c-12 0-22-10-22-23 0-12 10-22 22-22h223c12 0 22 10 22 22v327c0 12-10 22-22 22z"/></g><g><path d="m697 1567h-579c-12 0-23-10-23-23v-326c0-13 11-23 23-23 13 0 23 10 23 23v303h556c12 0 22 11 22 23 0 13-10 23-22 23zm-579-451c-12 0-23-10-23-22v-327c0-12 11-22 23-22h222c13 0 23 10 23 22 0 13-10 23-23 23h-199v304c0 12-10 22-23 22z"/></g><g><path d="m1010 1658h-313c-13 0-23-10-23-23v-182c0-13 10-23 23-23h313c13 0 23 10 23 23v182c0 13-10 23-23 23zm-291-45h268v-137h-268z"/></g><g><path d="m853 1476c-12 0-22-10-22-23v-184c0-12 10-23 22-23 13 0 23 11 23 23v184c0 13-10 23-23 23z"/></g><g><path d="m1684 1241h-191c-12 0-23-11-23-23v-124c0-13 11-23 23-23h191c12 0 23 10 23 23v124c0 12-11 23-23 23zm-168-46h145v-79h-145z"/></g><g><path d="m214 1241h-191c-13 0-23-11-23-23v-124c0-13 10-23 23-23h191c12 0 22 10 22 23v124c0 12-10 23-22 23zm-169-46h146v-79h-146z"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/dlt/supply-chain.webp b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/supply-chain.webp
new file mode 100644
index 0000000..c452ff8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/dlt/supply-chain.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/employee-working-chroma-key-laptop-data-center-storing-information_482257-99361.webp b/Tech4biz-Version01/Tech4biz/public/images/services/employee-working-chroma-key-laptop-data-center-storing-information_482257-99361.webp
new file mode 100644
index 0000000..ee9d1ff
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/employee-working-chroma-key-laptop-data-center-storing-information_482257-99361.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/aerospace.webp b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/aerospace.webp
new file mode 100644
index 0000000..0f128dc
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/aerospace.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/automotive-components.webp b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/automotive-components.webp
new file mode 100644
index 0000000..2076dc2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/automotive-components.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/consumer-electronics.webp b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/consumer-electronics.webp
new file mode 100644
index 0000000..3b6c3b9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/consumer-electronics.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/custom-solutions.svg b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/custom-solutions.svg
new file mode 100644
index 0000000..62858a1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/custom-solutions.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m189.47 124.21 13.01 3.39c.35.9.72 1.78 1.1 2.65l-6.8 11.58c-1.62 2.75-1.17 6.23 1.08 8.48l14.82 14.83c2.26 2.25 5.75 2.69 8.49 1.08l11.58-6.82c.87.38 1.74.74 2.62 1.08l3.39 13.02c.8 3.08 3.58 5.23 6.76 5.23h20.96c3.19 0 5.97-2.16 6.77-5.24l3.36-13.01c.88-.34 1.76-.7 2.62-1.08l11.6 6.82c2.75 1.61 6.24 1.17 8.49-1.08l14.82-14.83c2.25-2.25 2.7-5.73 1.08-8.48l-6.82-11.6c.39-.86.75-1.74 1.09-2.63l13.04-3.39c3.08-.8 5.23-3.58 5.23-6.76v-20.93c0-3.18-2.15-5.96-5.23-6.77l-13.04-3.39c-.34-.89-.7-1.76-1.09-2.62l6.82-11.61c1.62-2.74 1.17-6.23-1.08-8.48l-14.82-14.82c-2.25-2.25-5.74-2.7-8.49-1.08l-11.6 6.82c-.86-.39-1.74-.75-2.62-1.09l-3.36-13c-.8-3.09-3.58-5.24-6.77-5.24h-20.96c-3.18 0-5.96 2.15-6.76 5.23l-3.39 13.01c-.88.34-1.75.7-2.62 1.09l-11.58-6.82c-2.74-1.62-6.23-1.17-8.49 1.08l-14.82 14.82c-2.25 2.25-2.7 5.74-1.08 8.48l6.81 11.6c-.39.87-.76 1.75-1.1 2.64l-13.02 3.38c-3.08.81-5.23 3.59-5.23 6.77v20.93c0 3.18 2.15 5.96 5.23 6.76zm66.52-53.01c19.73 0 35.78 16.05 35.78 35.78 0 19.74-16.05 35.79-35.78 35.79-19.72 0-35.76-16.05-35.76-35.79 0-19.73 16.04-35.78 35.76-35.78zm-69.03 133.41c0 7.9 5.03 14.63 12.05 17.2v19.41c0 11.23 9.15 20.37 20.4 20.37h2.12v.28c0 19 15.46 34.46 34.46 34.46 19.01 0 34.48-15.46 34.48-34.46v-.28h2.12c11.23 0 20.37-9.14 20.37-20.37v-19.41c7.02-2.57 12.05-9.3 12.05-17.2 0-13.7 6.26-21.31 14.18-30.96 10.83-13.17 24.3-29.57 24.3-65.65 0-59.28-48.23-107.5-107.5-107.5-59.26 0-107.48 48.22-107.48 107.5 0 36.08 13.46 52.48 24.28 65.65 7.92 9.64 14.17 17.26 14.17 30.96zm69.03-190.13c51.57 0 93.52 41.95 93.52 93.52 0 31.08-10.73 44.15-21.12 56.78-8.53 10.39-17.35 21.13-17.35 39.83 0 2.4-1.96 4.36-4.36 4.36h-101.39c-2.36 0-4.36-2-4.36-4.36 0-18.7-8.81-29.44-17.34-39.82-10.37-12.64-21.1-25.71-21.1-56.79 0-51.57 41.94-93.52 93.5-93.52zm138.45 358.46h-125.75v-25.07c0-13.82 11.24-25.06 25.06-25.06h63.15c25.98 0 47.13-21.13 47.13-47.11s-21.15-47.13-47.13-47.13h-30.95c-3.86 0-6.99 3.13-6.99 6.99s3.13 6.99 6.99 6.99h30.95c18.28 0 33.15 14.87 33.15 33.15 0 18.27-14.87 33.13-33.15 33.13h-63.15c-21.52 0-39.04 17.51-39.04 39.04v25.07h-137.17c-5.28 0-9.57 4.3-9.57 9.59v119.38c0 5.29 4.29 9.59 9.57 9.59h276.9c5.28 0 9.59-4.3 9.59-9.59v-119.38c0-5.29-4.31-9.59-9.59-9.59zm-164.59 28.85h13.07c3.85 0 6.98 3.13 6.98 6.99s-3.13 6.99-6.98 6.99h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99zm0 33.44h13.07c3.85 0 6.98 3.13 6.98 6.99s-3.13 6.99-6.98 6.99h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99zm-66.34 47.41h-13.07c-3.86 0-6.99-3.12-6.99-6.98s3.13-6.99 6.99-6.99h13.07c3.86 0 6.98 3.13 6.98 6.99s-3.12 6.98-6.98 6.98zm.31-33.43h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99h13.07c3.86 0 6.98 3.13 6.98 6.99s-3.12 6.99-6.98 6.99zm0-33.44h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99h13.07c3.86 0 6.98 3.13 6.98 6.99s-3.12 6.99-6.98 6.99zm39.24 66.87h-13.07c-3.86 0-6.99-3.12-6.99-6.98s3.13-6.99 6.99-6.99h13.07c3.85 0 6.98 3.13 6.98 6.99s-3.13 6.98-6.98 6.98zm.31-33.43h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99h13.07c3.86 0 6.98 3.13 6.98 6.99s-3.12 6.99-6.98 6.99zm0-33.44h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99h13.07c3.86 0 6.98 3.13 6.98 6.99s-3.12 6.99-6.98 6.99zm78.76 66.87h-52.6c-3.85 0-6.98-3.12-6.98-6.98s3.13-6.99 6.98-6.99h52.6c3.85 0 6.98 3.13 6.98 6.99s-3.13 6.98-6.98 6.98zm.34-33.43h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99h13.07c3.85 0 6.98 3.13 6.98 6.99s-3.13 6.99-6.98 6.99zm0-33.44h-13.07c-3.86 0-6.99-3.13-6.99-6.99s3.13-6.99 6.99-6.99h13.07c3.85 0 6.98 3.13 6.98 6.99s-3.13 6.99-6.98 6.99zm39.2 66.87h-13.04c-3.86 0-6.98-3.12-6.98-6.98s3.12-6.99 6.98-6.99h13.04c3.86 0 6.99 3.13 6.99 6.99s-3.13 6.98-6.99 6.98zm.34-33.43h-13.07c-3.85 0-6.98-3.13-6.98-6.99s3.13-6.99 6.98-6.99h13.07c3.86 0 6.99 3.13 6.99 6.99s-3.13 6.99-6.99 6.99zm0-33.44h-13.07c-3.85 0-6.98-3.13-6.98-6.99s3.13-6.99 6.98-6.99h13.07c3.86 0 6.99 3.13 6.99 6.99s-3.13 6.99-6.99 6.99zm39.21 66.87h-13.04c-3.86 0-6.99-3.12-6.99-6.98s3.13-6.99 6.99-6.99h13.04c3.86 0 6.99 3.13 6.99 6.99s-3.13 6.98-6.99 6.98zm.34-33.43h-13.07c-3.86 0-6.98-3.13-6.98-6.99s3.12-6.99 6.98-6.99h13.07c3.86 0 6.99 3.13 6.99 6.99s-3.13 6.99-6.99 6.99zm0-33.44h-13.07c-3.86 0-6.98-3.13-6.98-6.99s3.12-6.99 6.98-6.99h13.07c3.86 0 6.99 3.13 6.99 6.99s-3.13 6.99-6.99 6.99z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/end-to-end-support.svg b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/end-to-end-support.svg
new file mode 100644
index 0000000..f59eeac
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/end-to-end-support.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g id="text_&#xB7;_document_&#xB7;_file_&#xB7;_message_&#xB7;_chat" data-name="text &#xB7; document &#xB7; file &#xB7; message &#xB7; chat"><path d="m7 15v29h50v-29a1 1 0 0 0 -1-1h-4v2h2a1 1 0 0 1 1 1v24a1 1 0 0 1 -1 1h-44a1 1 0 0 1 -1-1v-24a1 1 0 0 1 1-1h2v-2h-4a1 1 0 0 0 -1 1z"/><path d="m17 22h2v2h-2z"/><path d="m17 32h2v2h-2z"/><path d="m14 36a1 1 0 0 0 1 1h34a1 1 0 0 0 1-1v-26h-36zm1-5a1 1 0 0 1 1-1h1v-4h-1a1 1 0 0 1 -1-1v-4a1 1 0 0 1 1-1h1v-3h-1a1 1 0 0 1 -1-1v-4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h8v-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h8v-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-1v3h1a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-1v4h1a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1-1v-1h-8v1a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1-1v-1h-8v1a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1-1z"/><path d="m12 18h-1v22h42v-22h-1v21h-40z"/><path d="m19 20h1a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-1v4h1a1 1 0 0 1 1 1v1h8v-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v1h8v-1a1 1 0 0 1 1-1h1v-4h-1a1 1 0 0 1 -1-1v-4a1 1 0 0 1 1-1h1v-3h-1a1 1 0 0 1 -1-1v-1h-8v1a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1-1v-1h-8v1a1 1 0 0 1 -1 1h-1zm13-1a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v1a1 1 0 0 1 -2 0h-2v8a1 1 0 0 1 -2 0v-8h-2a1 1 0 0 1 -2 0zm-8 3h1v-1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 0 2h-1v3h2a1 1 0 0 1 2 0 2.006 2.006 0 0 1 -2 2h-2a2.006 2.006 0 0 1 -2-2v-3h-1a1 1 0 0 1 0-2z"/><path d="m31 32h2v2h-2z"/><path d="m31 13h2v2h-2z"/><path d="m50 5a1 1 0 0 0 -1-1h-34a1 1 0 0 0 -1 1v3h36zm-33 2h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm4 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm4 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2z"/><path d="m45 32h2v2h-2z"/><path d="m45 22h2v2h-2z"/><path d="m45 13h2v2h-2z"/><path d="m17 13h2v2h-2z"/><path d="m24.22 56 .81-3.24a1 1 0 0 1 .97-.76h12a1 1 0 0 1 .97.76l.81 3.24h19.94l-2.5-10h-50.44l-2.5 10zm28.78-8h2v2h-2zm0 4h2v2h-2zm-4-4h2v2h-2zm0 4h2v2h-2zm-4-4h2v2h-2zm-4 0h2v2h-2zm0 4h6v2h-6zm-4-4h2v2h-2zm-4 0h2v2h-2zm-4 0h2v2h-2zm-4 0h2v2h-2zm-4 0h2v2h-2zm-4 0h2v2h-2zm0 4h6v2h-6zm-4-4h2v2h-2zm0 4h2v2h-2zm-4-4h2v2h-2zm0 4h2v2h-2z"/><path d="m26.28 56h11.44l-.5-2h-10.44z"/><path d="m4 59a1 1 0 0 0 1 1h54a1 1 0 0 0 1-1v-1h-56z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/hardware-design-development.webp b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/hardware-design-development.webp
new file mode 100644
index 0000000..2f9a6ff
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/hardware-design-development.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/innovation-driven.svg b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/innovation-driven.svg
new file mode 100644
index 0000000..fe504ca
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/innovation-driven.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m446.41 149.58h-23.85c-1.94-6.27-6.84-11.24-13.05-13.31v-6.73c11.14-10.7 17.47-25.48 17.47-40.99 0-31.33-25.49-56.82-56.82-56.82s-56.82 25.49-56.82 56.82c0 15.48 6.31 30.24 17.41 40.93v6.79c-6.22 2.06-11.11 7.04-13.05 13.31h-252.11c-12.8 0-23.21 10.41-23.21 23.21v251.75c0 12.79 10.41 23.2 23.21 23.2h133.57l-21.55 47.26h-38.46c-3.31 0-6 2.69-6 6s2.69 6 6 6h233.69c3.31 0 6-2.69 6-6s-2.69-6-6-6h-38.46l-21.55-47.27h133.57c12.79 0 23.2-10.41 23.2-23.2v-251.75c.01-12.79-10.4-23.2-23.19-23.2zm-121.07-61.03c0-24.71 20.11-44.82 44.82-44.82s44.82 20.11 44.82 44.82c0 12.97-5.62 25.3-15.41 33.82-1.31 1.14-2.06 2.79-2.06 4.53v8.32h-11.84l6.75-43.76c.32-2.06-.46-4.15-2.05-5.5s-3.78-1.77-5.76-1.12l-14.45 4.78-14.45-4.78c-1.98-.66-4.16-.23-5.76 1.12-1.59 1.35-2.37 3.43-2.05 5.5l6.75 43.76h-11.9v-8.38c0-1.73-.75-3.38-2.05-4.52-9.77-8.52-15.36-20.83-15.36-33.77zm41.45 46.67-5.54-35.9 7.03 2.32c1.22.4 2.54.4 3.77 0l7.03-2.32-5.54 35.9zm-29.64 12h65.96c4.61 0 8.35 3.75 8.35 8.35s-3.75 8.35-8.35 8.35h-65.96c-4.61 0-8.35-3.75-8.35-8.35s3.74-8.35 8.35-8.35zm60.34 28.71c-.2 14.92-12.4 27-27.37 27s-27.16-12.08-27.37-27zm-331.9-14.35h252.1c1.94 6.27 6.84 11.24 13.05 13.31v.67c0 21.71 17.66 39.38 39.38 39.38s39.38-17.66 39.38-39.38v-.67c6.22-2.06 11.11-7.04 13.05-13.31h23.85c6.18 0 11.2 5.03 11.2 11.21v221.05h-403.21v-221.06c0-6.18 5.02-11.2 11.2-11.2zm255.61 333.42h-130.4l21.55-47.27h87.29zm125.21-59.27h-380.82c-6.18 0-11.21-5.03-11.21-11.2v-18.69h403.22v18.69c.01 6.18-5.01 11.2-11.19 11.2zm-376.18-111.13 7.89.24c.79 2.35 1.74 4.65 2.85 6.87l-5.41 5.75c-2.22 2.36-2.16 6.06.13 8.35l15.01 15.01c2.29 2.29 5.99 2.35 8.35.13l5.75-5.4c2.22 1.11 4.52 2.06 6.87 2.85l.24 7.89c.1 3.24 2.76 5.81 6 5.81h21.23c3.24 0 5.9-2.57 6-5.81l.25-7.89c2.36-.79 4.66-1.74 6.88-2.85l5.74 5.4c2.36 2.22 6.06 2.17 8.36-.12l15.01-15.01c2.29-2.29 2.35-5.99.13-8.36l-5.4-5.74c1.11-2.23 2.07-4.53 2.86-6.89l7.88-.24c3.24-.1 5.82-2.75 5.82-6v-21.23c0-3.24-2.58-5.9-5.82-6l-7.88-.24c-.79-2.36-1.74-4.66-2.86-6.89l5.4-5.74c2.22-2.36 2.17-6.06-.13-8.36l-15.01-15.01c-2.29-2.29-6-2.35-8.36-.12l-5.74 5.4c-2.23-1.11-4.53-2.07-6.89-2.85l-.24-7.88c-.1-3.24-2.75-5.82-6-5.82h-21.23c-3.24 0-5.9 2.58-6 5.82l-.24 7.88c-2.36.79-4.66 1.74-6.88 2.85l-5.75-5.41c-2.36-2.22-6.06-2.16-8.35.13l-15.01 15.01c-2.29 2.29-2.35 5.99-.13 8.35l5.41 5.75c-1.11 2.22-2.06 4.52-2.85 6.87l-7.89.24c-3.24.1-5.81 2.76-5.81 6v21.23c0 3.27 2.58 5.92 5.82 6.03zm6.18-21.41 6.45-.2c2.71-.08 5.02-1.97 5.65-4.6 1.01-4.21 2.67-8.22 4.94-11.91 1.42-2.31 1.11-5.28-.74-7.25l-4.42-4.7 6.78-6.78 4.7 4.42c1.97 1.85 4.94 2.16 7.25.74 3.7-2.27 7.71-3.93 11.92-4.94 2.64-.63 4.52-2.95 4.6-5.66l.19-6.44h9.58l.19 6.44c.08 2.71 1.97 5.03 4.6 5.66 4.22 1.01 8.23 2.67 11.93 4.94 2.31 1.42 5.28 1.12 7.26-.74l4.69-4.42 6.77 6.77-4.42 4.69c-1.86 1.97-2.16 4.95-.74 7.26 2.28 3.7 3.94 7.71 4.94 11.93.63 2.64 2.95 4.52 5.66 4.6l6.44.19v9.58l-6.44.19c-2.71.08-5.03 1.97-5.66 4.6-1.01 4.22-2.67 8.23-4.94 11.93-1.42 2.31-1.12 5.28.74 7.26l4.42 4.69-6.77 6.77-4.69-4.42c-1.97-1.86-4.95-2.16-7.26-.74-3.7 2.27-7.71 3.94-11.92 4.94-2.63.63-4.52 2.94-4.6 5.65l-.2 6.45h-9.59l-.2-6.45c-.08-2.71-1.97-5.02-4.6-5.65-4.21-1.01-8.22-2.67-11.91-4.94-2.31-1.42-5.28-1.11-7.25.74l-4.7 4.42-6.78-6.78 4.42-4.7c1.85-1.97 2.16-4.94.74-7.25-2.27-3.69-3.93-7.7-4.94-11.91-.63-2.63-2.94-4.52-5.65-4.6l-6.45-.2v-9.58zm52.12 36.38c17.42 0 31.59-14.17 31.59-31.59s-14.17-31.59-31.59-31.59-31.59 14.17-31.59 31.59 14.17 31.59 31.59 31.59zm0-51.17c10.8 0 19.59 8.79 19.59 19.59s-8.79 19.59-19.59 19.59-19.59-8.79-19.59-19.59 8.79-19.59 19.59-19.59zm55.31-43.78 5.69.18c.52 1.48 1.12 2.93 1.8 4.35l-3.9 4.15c-2.22 2.36-2.16 6.06.13 8.35l12.27 12.27c2.29 2.29 5.99 2.35 8.35.13l4.15-3.9c1.42.68 2.87 1.28 4.35 1.8l.18 5.69c.1 3.24 2.76 5.81 6 5.81h17.35c3.24 0 5.9-2.57 6-5.81l.18-5.69c1.48-.52 2.93-1.13 4.35-1.8l4.14 3.9c2.36 2.22 6.06 2.17 8.36-.13l12.27-12.27c2.29-2.29 2.35-6 .12-8.36l-3.9-4.14c.68-1.42 1.28-2.87 1.81-4.36l5.68-.17c3.24-.1 5.82-2.75 5.82-6v-17.35c0-3.24-2.58-5.9-5.82-6l-5.68-.17c-.52-1.48-1.13-2.94-1.81-4.36l3.9-4.14c2.22-2.36 2.17-6.06-.12-8.36l-12.27-12.27c-2.29-2.29-6-2.35-8.36-.13l-4.14 3.9c-1.42-.68-2.87-1.28-4.36-1.81l-.17-5.68c-.1-3.24-2.75-5.82-6-5.82h-17.35c-3.24 0-5.9 2.58-6 5.82l-.17 5.68c-1.48.52-2.93 1.12-4.35 1.8l-4.15-3.9c-2.36-2.22-6.06-2.16-8.35.13l-12.27 12.27c-2.29 2.29-2.35 5.99-.13 8.35l3.9 4.15c-.68 1.42-1.28 2.87-1.8 4.35l-5.69.18c-3.24.1-5.81 2.76-5.81 6v17.35c-.01 3.26 2.56 5.91 5.8 6.01zm6.19-17.53 4.21-.13c2.71-.08 5.02-1.97 5.65-4.6.79-3.33 2.11-6.49 3.9-9.41 1.42-2.31 1.12-5.28-.74-7.25l-2.88-3.07 4.04-4.04 3.07 2.88c1.97 1.85 4.94 2.16 7.25.74 2.92-1.8 6.09-3.11 9.42-3.9 2.64-.63 4.52-2.95 4.6-5.66l.13-4.2h5.7l.13 4.2c.08 2.71 1.97 5.03 4.6 5.66 3.33.8 6.51 2.11 9.43 3.91 2.31 1.42 5.28 1.12 7.26-.74l3.06-2.88 4.03 4.03-2.88 3.06c-1.86 1.97-2.16 4.95-.74 7.26 1.8 2.93 3.11 6.1 3.91 9.43.63 2.64 2.95 4.52 5.66 4.6l4.2.13v5.7l-4.2.13c-2.71.08-5.03 1.97-5.66 4.6-.8 3.33-2.11 6.51-3.91 9.43-1.42 2.31-1.12 5.28.74 7.26l2.88 3.06-4.03 4.03-3.06-2.88c-1.97-1.86-4.95-2.16-7.26-.74-2.92 1.8-6.09 3.11-9.42 3.91-2.63.63-4.52 2.94-4.6 5.65l-.13 4.21h-5.72l-.13-4.21c-.08-2.71-1.97-5.02-4.6-5.65-3.33-.79-6.49-2.11-9.41-3.9-2.31-1.42-5.28-1.11-7.25.74l-3.07 2.88-4.04-4.04 2.88-3.07c1.85-1.97 2.16-4.94.74-7.25-1.79-2.92-3.11-6.09-3.9-9.41-.63-2.63-2.94-4.52-5.65-4.6l-4.21-.13zm41.5 25.86c12.68 0 23-10.32 23-23s-10.32-23-23-23-23 10.32-23 23 10.31 23 23 23zm0-34c6.07 0 11 4.94 11 11s-4.94 11-11 11-11-4.94-11-11 4.93-11 11-11zm132.63-202.71v-5.24c0-3.31 2.69-6 6-6s6 2.69 6 6v5.24c0 3.31-2.69 6-6 6s-6-2.69-6-6zm-37.97 8.15c-1.66-2.87-.67-6.54 2.2-8.2s6.54-.67 8.2 2.2l2.62 4.54c1.66 2.87.67 6.54-2.2 8.2-.94.55-1.98.8-2.99.8-2.07 0-4.09-1.08-5.2-3zm-28.38 22.38c1.66-2.87 5.33-3.85 8.2-2.2l4.54 2.62c2.87 1.66 3.85 5.33 2.2 8.2-1.11 1.92-3.13 3-5.2 3-1.02 0-2.05-.26-2.99-.8l-4.56-2.62c-2.87-1.66-3.85-5.33-2.19-8.2zm-11.19 41.77c0-3.31 2.69-6 6-6h5.24c3.31 0 6 2.69 6 6s-2.69 6-6 6h-5.24c-3.32 0-6-2.69-6-6zm26.12 33.15c1.66 2.87.67 6.54-2.2 8.2l-4.54 2.62c-.94.55-1.98.8-2.99.8-2.07 0-4.09-1.08-5.2-3-1.66-2.87-.67-6.54 2.2-8.2l4.54-2.62c2.86-1.65 6.53-.67 8.19 2.2zm88.37-98.77 2.62-4.54c1.66-2.87 5.33-3.85 8.2-2.2 2.87 1.66 3.85 5.33 2.2 8.2l-2.62 4.54c-1.11 1.92-3.13 3-5.2 3-1.02 0-2.05-.26-2.99-.8-2.88-1.66-3.86-5.33-2.21-8.2zm26.47 32.47c-1.66-2.87-.67-6.54 2.2-8.2l4.54-2.62c2.87-1.66 6.54-.67 8.2 2.2s.67 6.54-2.2 8.2l-4.54 2.62c-.94.55-1.98.81-2.99.81-2.08-.01-4.1-1.09-5.21-3.01zm14.88 27.15h5.24c3.31 0 6 2.69 6 6s-2.69 6-6 6h-5.24c-3.31 0-6-2.69-6-6s2.69-6 6-6zm.04 47.77c-1.11 1.92-3.13 3-5.2 3-1.02 0-2.05-.26-2.99-.81l-4.54-2.62c-2.87-1.66-3.85-5.33-2.2-8.2 1.66-2.87 5.33-3.85 8.2-2.2l4.54 2.62c2.87 1.67 3.85 5.34 2.19 8.21zm-182.35 216.86h145.86c12.47 0 22.62-10.15 22.62-22.62s-10.15-22.62-22.62-22.62h-16.95c-13.75 0-24.93-11.18-24.93-24.93v-46.66c0-3.31 2.69-6 6-6s6 2.69 6 6v46.66c0 7.13 5.8 12.93 12.93 12.93h16.95c19.09 0 34.62 15.53 34.62 34.62s-15.53 34.62-34.62 34.62h-145.86c-19.09 0-34.62-15.53-34.62-34.62v-21.7c0-3.31 2.69-6 6-6s6 2.69 6 6v21.7c0 12.47 10.14 22.62 22.62 22.62z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hardware/sustainability.svg b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/sustainability.svg
new file mode 100644
index 0000000..3abe7e5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/hardware/sustainability.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Icons" viewBox="0 0 60 60"><path d="M44,22A22,22,0,0,0,20.775.034,22.268,22.268,0,0,0,0,21.959,21.849,21.849,0,0,0,6.393,37.508,9.205,9.205,0,0,1,9,44a2.975,2.975,0,0,0,.779,2,2.957,2.957,0,0,0,0,4A2.951,2.951,0,0,0,9,52a3,3,0,0,0,2.478,2.947l2.241,2.8A5.961,5.961,0,0,0,18.4,60h7.2a5.959,5.959,0,0,0,4.679-2.254L31.5,56.221A11.728,11.728,0,0,0,35,59.12,7.325,7.325,0,0,0,38.524,60a7.846,7.846,0,0,0,4.438-1.375,8.839,8.839,0,0,0,2.059.96A8.946,8.946,0,0,0,47.7,60,8.309,8.309,0,0,0,51.8,58.937c8.7-4.928,8.383-16.95,8.077-20.518a1.559,1.559,0,0,0-.994-1.328,1.442,1.442,0,0,0-1.509.313c-2.712,2.538-5.458,3.219-8.365,3.94A23.734,23.734,0,0,0,43.761,43.1a8.15,8.15,0,0,0-2.82,2.445,25.71,25.71,0,0,0-3.514-1.027c-.822-.2-1.627-.393-2.421-.64a9.417,9.417,0,0,1,2.718-6.494A21.83,21.83,0,0,0,44,22ZM28.384,49H12a1,1,0,0,1-1-1,.967.967,0,0,1,.3-.713A.985.985,0,0,1,12,47H28.117C28.176,47.643,28.259,48.311,28.384,49ZM11.3,51.287A.985.985,0,0,1,12,51H28.861a16.81,16.81,0,0,0,.711,2H12a1,1,0,0,1-1-1A.967.967,0,0,1,11.3,51.287ZM28.719,56.5A3.975,3.975,0,0,1,25.6,58H18.4A3.976,3.976,0,0,1,15.28,56.5L14.082,55H29.921ZM44.671,44.878a21.945,21.945,0,0,1,4.823-1.594,19.764,19.764,0,0,0,8.46-3.728c.211,4.082-.107,13.66-7.138,17.641a6.754,6.754,0,0,1-9.205-2.921A7.532,7.532,0,0,1,44.671,44.878Zm-4.754,2.406a9.455,9.455,0,0,0-.112,7.85v0A8.28,8.28,0,0,0,41.3,57.287a5.721,5.721,0,0,1-5.339.078C30.3,54.285,29.88,47.025,30.022,43.6a17.449,17.449,0,0,0,6.941,2.863A26.636,26.636,0,0,1,39.917,47.284Zm-6.874-4.171a11.02,11.02,0,0,1-2.576-1.738A1.391,1.391,0,0,0,29.01,41.1a1.427,1.427,0,0,0-.907,1.222A26.07,26.07,0,0,0,28.01,45H12a1,1,0,0,1-1-1,11.218,11.218,0,0,0-3.191-7.9A19.86,19.86,0,0,1,2,21.963,20.245,20.245,0,0,1,20.885,2.03,20,20,0,0,1,36.3,35.98,11.416,11.416,0,0,0,33.043,43.113Z"/><path d="M39.924,20.455A2.008,2.008,0,0,0,38.676,18.8l-2.269-.906a14.88,14.88,0,0,0-1.315-3.171l.96-2.25a1.964,1.964,0,0,0-.3-2.064,17.777,17.777,0,0,0-2.163-2.164,1.967,1.967,0,0,0-2.064-.3l-2.25.961a14.872,14.872,0,0,0-3.17-1.315L25.2,5.314a2,2,0,0,0-1.655-1.243,16.759,16.759,0,0,0-3.089,0A2.006,2.006,0,0,0,18.8,5.319l-.906,2.27A14.872,14.872,0,0,0,14.722,8.9l-2.249-.96a1.961,1.961,0,0,0-2.065.3,17.819,17.819,0,0,0-2.162,2.163,1.965,1.965,0,0,0-.3,2.064l.961,2.251a14.88,14.88,0,0,0-1.315,3.171L5.319,18.8a2,2,0,0,0-1.242,1.643,15.7,15.7,0,0,0,0,3.111A2.006,2.006,0,0,0,5.324,25.2l2.269.906A14.88,14.88,0,0,0,8.908,29.28l-.96,2.25a1.964,1.964,0,0,0,.3,2.064,17.853,17.853,0,0,0,2.163,2.164,1.967,1.967,0,0,0,2.064.3l2.25-.961a14.872,14.872,0,0,0,3.17,1.315l.908,2.275a2,2,0,0,0,1.655,1.243c.535.048,1.07.071,1.591.071a14.944,14.944,0,0,0,1.5-.071A2.006,2.006,0,0,0,25.2,38.681l.906-2.27a14.872,14.872,0,0,0,3.17-1.315l2.249.96a1.961,1.961,0,0,0,2.064-.3A17.766,17.766,0,0,0,35.754,33.6a1.965,1.965,0,0,0,.3-2.064l-.961-2.251a14.88,14.88,0,0,0,1.315-3.171l2.274-.908a2,2,0,0,0,1.242-1.643A15.7,15.7,0,0,0,39.924,20.455Zm-1.99,2.891L35.2,24.438a1,1,0,0,0-.6.689A12.922,12.922,0,0,1,33.119,28.7a1,1,0,0,0-.063.908l1.168,2.7a15.64,15.64,0,0,1-1.911,1.91L29.6,33.06a1,1,0,0,0-.909.063A12.928,12.928,0,0,1,25.126,34.6a1,1,0,0,0-.689.6l-1.082,2.735a14.659,14.659,0,0,1-2.7,0L19.562,35.2a1,1,0,0,0-.688-.6,12.928,12.928,0,0,1-3.568-1.481,1,1,0,0,0-.909-.063l-2.7,1.169a15.663,15.663,0,0,1-1.909-1.913L10.944,29.6a1,1,0,0,0-.063-.908A12.922,12.922,0,0,1,9.4,25.127a1,1,0,0,0-.6-.689l-2.736-1.1a13.717,13.717,0,0,1,0-2.688L8.8,19.562a1,1,0,0,0,.6-.689A12.922,12.922,0,0,1,10.881,15.3a1,1,0,0,0,.063-.908l-1.168-2.7a15.637,15.637,0,0,1,1.911-1.91L14.4,10.94a1,1,0,0,0,.909-.063A12.928,12.928,0,0,1,18.874,9.4a1,1,0,0,0,.688-.6l1.083-2.734a14.57,14.57,0,0,1,2.7,0L24.437,8.8a1,1,0,0,0,.689.6,12.928,12.928,0,0,1,3.568,1.481,1,1,0,0,0,.909.063l2.7-1.169a15.661,15.661,0,0,1,1.909,1.913L33.056,14.4a1,1,0,0,0,.063.908A12.922,12.922,0,0,1,34.6,18.873a1,1,0,0,0,.6.689l2.734,1.082A13.629,13.629,0,0,1,37.934,23.346Z"/><path d="M22,12A10,10,0,1,0,32,22,10.011,10.011,0,0,0,22,12Zm0,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,22,30Z"/></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/hospital-team-examine-x-rays-discusses-treatment-strategy-medical-cabinet.webp b/Tech4biz-Version01/Tech4biz/public/images/services/hospital-team-examine-x-rays-discusses-treatment-strategy-medical-cabinet.webp
new file mode 100644
index 0000000..80dc27d
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/hospital-team-examine-x-rays-discusses-treatment-strategy-medical-cabinet.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/immersive/advanced-development.svg b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/advanced-development.svg
new file mode 100644
index 0000000..c95275c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/advanced-development.svg
@@ -0,0 +1 @@
+<svg id="Layer_5" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m31 1h2v2h-2z"/><path d="m31 5h2v9h-2z"/><path d="m35 5h2v2h-2z"/><path d="m27 5h2v2h-2z"/><path d="m33.682 2.232h2.171v2h-2.171z" transform="matrix(.707 -.707 .707 .707 7.898 25.531)"/><path d="m28.147 7.768h2.171v2h-2.171z" transform="matrix(.707 -.707 .707 .707 2.362 23.239)"/><path d="m33.768 7.682h2v2.171h-2z" transform="matrix(.707 -.707 .707 .707 3.981 27.148)"/><path d="m28.233 2.146h2v2.171h-2z" transform="matrix(.707 -.707 .707 .707 6.274 21.614)"/><path d="m55.553 3.342c-.211-.422-.895-.422-1.105 0l-3.83 7.658h2.382v11h4v-11h2.382z"/><path d="m11 22v-11h2.382l-3.829-7.658c-.211-.422-.895-.422-1.105 0l-3.83 7.658h2.382v11z"/><path d="m11 37.613 4-1.334v-9.892l-4 1.334z"/><path d="m32 36c3.859 0 7-3.14 7-7h2c0 2.826-1.312 5.349-3.356 7h2.827c1.628-1.969 2.529-4.434 2.529-7 0-3.8-1.582-7.056-4.335-9h-13.33c-2.753 1.944-4.335 5.2-4.335 9 0 2.567.901 5.032 2.529 7z"/><path d="m19 29c0-1.039.115-2.039.313-3h-2.313v10h4.056c-1.33-2.078-2.056-4.498-2.056-7z"/><path d="m38 17c0-.551-.448-1-1-1h-10c-.552 0-1 .449-1 1v1h12z"/><path d="m45 29c0 2.501-.725 4.921-2.056 7h4.056v-10h-2.313c.198.961.313 1.961.313 3z"/><path d="m17 49h30v-11h-30zm26-4h2v2h-2zm-4 0h2v2h-2zm-4 0h2v2h-2z"/><path d="m49 36.279 4 1.334v-9.892l-4-1.334z"/><path d="m43.345 52.338c.24-.429.453-.877.644-1.338h-3.334c-1.73 2.987-4.955 5-8.655 5s-6.925-2.013-8.655-5h-3.334c.191.461.404.909.644 1.338l.262.469-1.13 2.194 3.212 3.211 2.195-1.129.468.262c.868.486 1.809.875 2.797 1.153l.517.146.753 2.356h4.541l.754-2.356.517-.146c.988-.279 1.929-.667 2.797-1.153l.468-.262 2.195 1.129 3.212-3.211-1.13-2.194z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/immersive/consultant.svg b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/consultant.svg
new file mode 100644
index 0000000..624bf11
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/consultant.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m260.591 140.807c0 18.912 15.411 34.313 34.345 34.313 18.923 0 34.313-15.401 34.313-34.313 0-18.934-15.39-34.345-34.313-34.345-18.934-.001-34.345 15.411-34.345 34.345zm34.345-19.59c10.779 0 19.558 8.79 19.558 19.59 0 10.778-8.779 19.558-19.558 19.558-10.8 0-19.59-8.779-19.59-19.558 0-10.8 8.79-19.59 19.59-19.59zm166.226 99.873-35.403.783v-16.861h45.42c15.57 0 28.231 12.672 28.231 28.242v27.946c-15.359 1.915-17.865-.624-17.876-.634-.603-1.068.264-5.648.73-8.113 1.248-6.59 2.793-14.777-2.115-21.821-3.438-4.929-9.192-8.018-17.59-9.446-.456-.075-.932-.117-1.397-.096zm-35.403 62.376v-46.837l35.001-.772c3.755.709 6.325 1.84 7.288 3.205 1.365 1.957.487 6.579-.275 10.652-1.269 6.674-2.835 14.988 3.205 21.155 3.818 3.903 9.71 5.796 18.648 5.796 2.919 0 6.177-.201 9.784-.603v7.404c0 9.076-4.305 17.167-10.99 22.329-.127.106-.254.201-.381.307-4.707 3.512-10.546 5.606-16.861 5.606h-17.178c-15.57 0-28.241-12.672-28.241-28.242zm45.419 42.987c4.993 0 9.795-.857 14.258-2.433v17.188h-38.671v-15.369c2.359.402 4.77.613 7.235.613h17.178zm40.322 45.684v121.705h-85.413v-56.442l43.622-36.852c3.12-2.623 3.512-7.277.878-10.398-2.634-3.11-7.288-3.501-10.398-.867l-46.234 39.052-16.247 13.698h-70.541c-10.303 0-18.691-8.367-18.691-18.659 0-10.302 8.388-18.69 18.691-18.69h54.167c1.745 0 3.427-.614 4.76-1.735l55.669-46.985h53.533c8.937 0 16.204 7.256 16.204 16.173zm-111.011 84.652h10.853v37.053h-310.705v-37.053h299.83zm-359.107-66.638c-2.623 3.12-2.232 7.774.878 10.398l43.622 36.851v56.441h-85.382v-121.704c0-8.917 7.256-16.173 16.173-16.173h53.533l55.669 46.985c1.333 1.121 3.015 1.735 4.76 1.735h54.167c10.303 0 18.69 8.388 18.69 18.69 0 10.292-8.388 18.659-18.69 18.659h-70.51l-16.289-13.708-46.223-39.042c-3.11-2.634-7.764-2.242-10.398.868zm-28.824-128.951v-27.946c0-15.57 12.672-28.242 28.231-28.242h45.42v16.861l-35.371-.783c-.476-.011-.941.021-1.396.095-8.398 1.428-14.153 4.517-17.601 9.446-4.897 7.034-3.364 15.232-2.126 21.811.465 2.464 1.333 7.055.74 8.102-.021.032-2.527 2.581-17.897.656zm0 22.266v-7.404c3.607.402 6.865.603 9.784.603 8.949 0 14.83-1.893 18.659-5.796 6.04-6.167 4.474-14.481 3.216-21.155-.762-4.072-1.629-8.684-.264-10.641.952-1.375 3.533-2.507 7.288-3.216l34.969.772v46.837c0 15.57-12.672 28.242-28.231 28.242h-17.189c-6.251 0-12.037-2.052-16.723-5.511-.264-.233-.539-.444-.825-.645-6.506-5.173-10.684-13.148-10.684-22.086zm45.42 42.987c2.465 0 4.887-.222 7.256-.624v15.38h-38.671v-17.178c4.453 1.565 9.245 2.422 14.227 2.422zm157.15-163.19c10.503 39.179 47.387 64.777 87.677 60.852.243-.032.476-.042.719-.042.497 0 .994.053 1.481.159l53.892 11.032-5.215-31.013c-.381-2.253.307-4.559 1.851-6.23 19.378-20.986 26.55-49.979 19.177-77.544-11.794-43.971-57.171-70.171-101.153-58.409-43.99 11.794-70.201 57.192-58.429 101.195zm76.465-73.006v-3.501c2.211-.137 4.411-.137 6.653 0v3.501c0 3.49 2.433 6.494 5.839 7.214 5.373 1.142 10.408 3.237 14.988 6.209 2.919 1.904 6.77 1.502 9.234-.963l2.496-2.496c1.671 1.481 3.237 3.057 4.707 4.707l-2.496 2.507c-2.454 2.475-2.856 6.315-.952 9.234 2.972 4.57 5.067 9.604 6.209 14.957.719 3.406 3.723 5.839 7.214 5.839h3.501c.063 1.121.106 2.232.106 3.343 0 1.089-.042 2.2-.106 3.3h-3.501c-3.491 0-6.495 2.443-7.224 5.849-1.132 5.363-3.226 10.408-6.198 14.988-1.904 2.909-1.502 6.759.952 9.224l2.486 2.507c-1.47 1.661-3.036 3.226-4.696 4.696l-2.507-2.486c-2.465-2.454-6.315-2.856-9.224-.963-4.58 2.983-9.615 5.077-14.988 6.209-3.406.73-5.839 3.734-5.839 7.225v3.501c-2.242.138-4.443.138-6.653 0v-3.501c0-3.491-2.433-6.495-5.839-7.225-5.352-1.132-10.377-3.226-14.957-6.209-2.919-1.893-6.759-1.491-9.234.963l-2.507 2.496c-1.65-1.47-3.226-3.036-4.696-4.707l2.486-2.496c2.465-2.464 2.867-6.315.963-9.234-2.972-4.58-5.067-9.615-6.209-14.988-.719-3.406-3.723-5.849-7.214-5.849h-3.501c-.063-1.1-.106-2.211-.106-3.3 0-1.111.042-2.221.106-3.343h3.501c3.48 0 6.495-2.433 7.214-5.839 1.142-5.352 3.237-10.387 6.209-14.957 1.904-2.919 1.502-6.77-.963-9.245l-2.496-2.496c1.47-1.661 3.046-3.237 4.707-4.707l2.496 2.496c2.465 2.465 6.325 2.867 9.245.963 4.569-2.972 9.604-5.067 14.957-6.209 3.404-.72 5.837-3.734 5.837-7.214zm-131.489 66.638c-19.399-20.954-26.581-49.926-19.198-77.502 11.794-44.002 57.182-70.203 101.185-58.408 15.507 4.157 29.279 12.661 39.867 24.381-4.062.55-8.145 1.364-12.217 2.454-5.426 1.449-10.63 3.343-15.57 5.627-4.94 2.274-9.626 4.94-14.026 7.944h-71.377c-4.083 0-7.383 3.3-7.383 7.383 0 4.072 3.3 7.372 7.383 7.372h54.379c-3.385 3.713-6.473 7.679-9.245 11.857h-45.134c-4.083 0-7.383 3.3-7.383 7.372s3.3 7.373 7.383 7.373h37.064c-1.692 3.861-3.152 7.827-4.347 11.889h-32.716c-4.083 0-7.383 3.3-7.383 7.373 0 4.072 3.3 7.372 7.383 7.372h29.617c-1.608 12.27-.899 25.026 2.486 37.698 1.555 5.796 3.649 11.403 6.209 16.755l-50.328 10.334 5.225-31.045c.369-2.252-.319-4.558-1.874-6.229z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/immersive/continuous-support.svg b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/continuous-support.svg
new file mode 100644
index 0000000..86b8a00
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/continuous-support.svg
@@ -0,0 +1 @@
+<svg id="Layer_2" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" data-name="Layer 2"><path d="m36.56 34.87h-3.06c-.35 0-.64.29-.64.64s.29.64.64.64h3.06c.35 0 .64-.29.64-.64s-.29-.64-.64-.64z"/><path d="m42.4 26.11h-13.5c-2.04 0-3.7 1.66-3.7 3.7v2.63c0 2.04 1.66 3.7 3.7 3.7h.11c.35 0 .64-.29.64-.64s-.29-.64-.64-.64h-.11c-1.34 0-2.43-1.09-2.43-2.43v-2.63c0-1.34 1.09-2.43 2.43-2.43h13.5c1.34 0 2.43 1.09 2.43 2.43v2.63c0 1.34-1.09 2.43-2.43 2.43h-1.35c-.35 0-.64.29-.64.64s.29.64.64.64h1.35c2.04 0 3.7-1.66 3.7-3.7v-2.63c0-2.04-1.66-3.7-3.7-3.7z"/><path d="m52.21 25.18h-2.93c-2.18-2.38-6.05-3.91-11.15-4.28v-4.44c0-1.37-1.11-2.48-2.48-2.48s-2.48 1.11-2.48 2.48v4.44c-5.1.38-8.97 1.91-11.15 4.28h-2.93c-1.87 0-3.4 1.52-3.4 3.4v5.11c0 1.87 1.52 3.4 3.4 3.4h3.61c1.11 1.4 2.53 2.66 4.19 3.69-1.69.57-3.22 1.46-3.22 2.82 0 2.63 6.03 4 11.99 4s11.99-1.38 11.99-4c0-1.35-1.53-2.24-3.22-2.82 1.65-1.02 3.07-2.29 4.19-3.69h3.61c1.87 0 3.4-1.52 3.4-3.4v-5.11c0-1.87-1.52-3.4-3.4-3.4zm-17.76-8.73c0-.66.54-1.2 1.2-1.2s1.2.54 1.2 1.2v4.36c-.4-.02-.8-.02-1.2-.02s-.81 0-1.2.02zm-15.36 19.35c-1.17 0-2.12-.95-2.12-2.12v-5.11c0-1.17.95-2.12 2.12-2.12h1.95c-.67 1.12-1 2.38-1 3.75 0 .25.01.49.03.74.01.13.03.26.05.39.01.11.03.22.05.33.03.18.07.35.11.53.01.05.02.11.04.16.05.21.11.43.18.64v.02c.3.95.73 1.88 1.29 2.78h-2.7zm27.27 7.78c0 1.11-4.17 2.73-10.72 2.73s-10.72-1.62-10.72-2.73c0-.52 1.1-1.34 3.51-1.95.04.02.08.03.11.05.53.25 1.06.47 1.61.67h.02c1.76.62 3.62.95 5.46.95s3.7-.33 5.46-.95h.02c.55-.19 1.09-.42 1.62-.67.03-.02.07-.03.11-.04 2.41.61 3.51 1.43 3.51 1.95zm3.07-10.49c-.35.95-.87 1.88-1.52 2.77 0 .01-.01.02-.02.03-1.32 1.79-3.19 3.39-5.4 4.5-2.14 1.07-4.49 1.6-6.85 1.6-1.18 0-2.35-.13-3.5-.4s-2.27-.67-3.34-1.2c-2.2-1.11-4.08-2.71-5.4-4.5 0 0-.01-.02-.02-.03-.65-.89-1.17-1.83-1.53-2.78-.02-.05-.03-.09-.05-.14-.07-.19-.13-.38-.19-.57-.04-.13-.06-.26-.1-.4-.03-.11-.06-.22-.08-.33-.04-.2-.06-.4-.09-.59 0-.04-.02-.09-.02-.13-.02-.24-.04-.48-.04-.72 0-.34.03-.67.08-.99.02-.1.04-.2.06-.3.05-.22.1-.44.17-.66.03-.1.07-.2.1-.3.11-.27.23-.54.38-.8.01-.02.02-.04.03-.05.18-.31.39-.6.63-.88 1.95-2.34 5.8-3.81 11.08-4.1.81-.05 1.63-.05 2.45-.03.39 0 .78.01 1.16.04 5.29.29 9.13 1.76 11.08 4.1.24.28.45.57.63.88 0 .02.02.04.03.05.15.26.27.53.38.8.04.1.07.2.1.29.07.21.13.43.17.66.02.1.04.2.06.3.05.32.08.65.08.99 0 .24-.01.48-.04.72 0 .05-.02.09-.02.14-.02.19-.05.39-.09.58-.02.11-.05.23-.08.34-.03.13-.06.26-.09.38-.05.19-.12.38-.19.57-.02.05-.03.09-.05.14zm4.9.6c0 1.17-.95 2.12-2.12 2.12h-2.7c.56-.9 1-1.83 1.29-2.78v-.02c.07-.21.13-.42.18-.64.01-.05.02-.11.04-.16.04-.18.08-.35.11-.53.02-.11.03-.22.05-.33.02-.13.04-.26.05-.39.02-.25.03-.5.03-.74 0-1.37-.34-2.63-1-3.75h1.95c1.17 0 2.12.95 2.12 2.12v5.11z"/><path d="m32.68 3.42c.35-.02.62-.31.61-.67-.02-.35-.32-.61-.67-.61-7.25.33-14.06 3.34-19.18 8.45-.87.87-.87 2.3 0 3.19.89.88 2.29.88 3.18 0 4.63-4.64 10.79-7.19 17.35-7.19 4.65 0 9.1 1.27 12.98 3.7-1.22.1-2.15 1.15-2.08 2.38.08 1.18 1.07 2.11 2.24 2.11l5.9-.35s.08 0 .11 0c.04 0 .14-.02.17-.02l.11-.02s.09-.02.16-.04c.03 0 .22-.08.25-.09.06-.02.11-.05.22-.11.07-.04.14-.09.15-.09.08-.05.15-.11.2-.16l.05-.03c.06-.04.12-.1.16-.16 0-.01.02-.02.03-.03s.03-.03.04-.05c.04-.04.15-.2.18-.25.04-.07.07-.12.1-.19.03-.06.06-.12.08-.19.03-.07.05-.14.05-.17.03-.09.05-.17.06-.24 0 0 .02-.15.02-.15 0-.03.01-.11.01-.13 0-.03 0-.07 0-.12 0-.04 0-.08 0-.11l-.35-5.8c-.03-.6-.3-1.15-.74-1.55-.45-.4-1.02-.61-1.63-.57-1.23.08-2.18 1.15-2.11 2.38l.04.66c-4.06-2.77-8.76-4.47-13.68-4.93-.35-.04-.66.22-.69.57s.22.66.57.69c5.13.48 10.02 2.37 14.13 5.47.2.15.46.17.68.05s.35-.35.33-.6l-.12-1.99c-.03-.53.38-1 .92-1.03.27-.03.51.07.7.24s.31.41.32.68l.35 5.69c-.01.05-.01.1 0 .16v.04.09s-.02.09-.02.1c0 .02-.02.08-.03.1l-.05.14s-.06.08-.09.13l-.02.02s-.04.04-.05.06c-.04.02-.07.06-.1.09-.02.01-.08.05-.1.07 0 0-.08.04-.09.05l.24.59-.23-.33-.05-.24-.13.04.12.62-.16-.34v-.27c-.05 0-.1 0-.15.01l-5.76.35h-.1c-.51 0-.94-.41-.97-.92-.03-.53.39-1 .92-1.03l1.83-.11c.27-.02.5-.2.57-.45s-.02-.53-.23-.69c-4.43-3.26-9.71-4.98-15.26-4.98-6.9 0-13.38 2.69-18.25 7.56-.39.38-1 .38-1.38 0-.38-.39-.38-1.01 0-1.39 4.89-4.89 11.41-7.76 18.34-8.08z"/><path d="m9.88 22.84c-.04-.07-.1-.13-.17-.2 0 0-.08-.08-.09-.09-.05-.05-.1-.09-.2-.17-.04-.03-.08-.05-.12-.07-.02-.02-.12-.07-.14-.08-.05-.04-.19-.1-.25-.12l-.07-.02s-.1-.05-.18-.07c-.01 0-.03 0-.05 0 0 0-.01 0-.02 0-.12-.03-.22-.03-.2-.03-.13-.02-.2-.03-.39-.01-.09 0-.19 0-.29.02-.04 0-.08.02-.15.04-.07.01-.15.04-.22.07-.08.02-.14.06-.17.07-.08.03-.15.07-.21.11-.03.02-.07.03-.09.05l-4.85 3.2c-.5.34-.84.85-.96 1.44s0 1.18.33 1.67c.33.5.83.85 1.42.97.58.12 1.18 0 1.69-.32l.55-.36c-.47 6.17 1.06 12.38 4.37 17.65.19.3.58.39.88.2s.39-.58.2-.88c-3.39-5.4-4.83-11.85-4.05-18.16.03-.25-.09-.49-.3-.62s-.48-.13-.69 0l-1.67 1.1c-.22.14-.48.2-.73.14-.25-.05-.47-.2-.62-.42-.14-.21-.19-.47-.14-.72.05-.26.2-.48.42-.62l4.79-3.16s.02-.01.03-.02c.04-.02.06-.04.1-.06l.03-.03s.11-.03.14-.05c.02 0 .16-.03.18-.04h.21.08c.02 0 .04.01.06.01.03.01.07.03.13.05l.06.02s.11.07.13.08l.16.15s.05.07.09.11l3.19 4.85.04.04c.26.45.12 1.02-.31 1.3-.45.29-1.06.17-1.35-.27l-1.01-1.54c-.15-.22-.42-.34-.68-.27-.26.06-.45.28-.48.55-.61 5.48.53 10.91 3.3 15.71 3.45 5.97 9.02 10.24 15.68 12.02.52.14.83.68.69 1.19-.14.52-.68.83-1.19.69-5.33-1.43-10.06-4.38-13.68-8.53-.23-.27-.63-.29-.9-.06s-.29.63-.06.9c3.79 4.35 8.74 7.43 14.32 8.93.19.05.38.07.57.07.99 0 1.9-.66 2.18-1.67.31-1.19-.4-2.43-1.59-2.75-6.33-1.69-11.63-5.75-14.91-11.43-2.32-4.02-3.44-8.51-3.28-13.09.69 1 2.07 1.28 3.1.6.99-.65 1.3-1.97.71-2.99 0-.01-.07-.1-.08-.11l-3.19-4.85s-.07-.09-.1-.12z"/><path d="m45.53 52.79c.53-1.1.08-2.44-1.02-2.99-1.06-.53-2.36-.14-2.95.88 0 .01-.06.11-.07.12l-2.6 5.19s-.04.1-.06.14c-.03.07-.06.15-.08.22s-.04.14-.05.2c-.02.08-.03.15-.04.23v.21.22c0 .08.02.16.04.23 0 .03.03.14.04.16 0 .03.02.09.03.12 0 .02.05.13.07.15v.02c.03.06.05.12.08.17.03.06.07.11.11.18s.09.13.14.19c.04.04.08.09.16.17.05.05.1.1.15.13.05.04.1.08.17.12.06.04.13.09.15.1.02.02.07.04.1.06l5.19 2.6c.32.16.66.24 1.01.24.24 0 .48-.04.72-.12.57-.19 1.03-.59 1.29-1.13.55-1.11.1-2.46-1-3.01l-.58-.29c12.47-5.98 19.11-20.21 15.49-33.69-.16-.58-.53-1.06-1.05-1.36s-1.12-.38-1.7-.22c-.58.15-1.06.53-1.36 1.05s-.38 1.13-.22 1.7c1.7 6.33.83 12.95-2.45 18.62-2.32 4.03-5.65 7.24-9.7 9.39zm13.38-28.34c-.07-.25-.03-.51.1-.74.13-.22.34-.39.59-.45.25-.07.51-.03.74.1.22.13.39.34.45.59 3.57 13.31-3.31 27.39-15.99 32.75-.23.1-.38.32-.39.57 0 .25.13.48.35.59l1.78.89c.48.24.67.83.43 1.31-.11.23-.31.4-.55.49-.25.08-.51.06-.75-.05l-5.21-2.61s-.1-.07-.11-.07l-.11-.09-.47.43.39-.51-.49.41.42-.51-.06-.11s-.01-.03-.01-.03l-.59.25.55-.33s0-.02-.01-.04c0-.02 0-.06-.01-.06 0-.03-.01-.07-.02-.1l-.63.06.64-.25-.63-.06.67-.12s.06-.15.06-.15l2.63-5.25c.26-.44.82-.61 1.28-.38.48.24.67.83.43 1.31l-.82 1.64c-.12.24-.08.53.11.72.19.2.47.25.72.15 5.04-2.21 9.18-5.92 11.95-10.72 3.45-5.97 4.36-12.93 2.58-19.59z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/immersive/educational-innovation.webp b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/educational-innovation.webp
new file mode 100644
index 0000000..8a4c717
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/educational-innovation.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/immersive/healthcare-excellence.webp b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/healthcare-excellence.webp
new file mode 100644
index 0000000..f08fef2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/healthcare-excellence.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/immersive/retail-innovation.webp b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/retail-innovation.webp
new file mode 100644
index 0000000..a42c9f3
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/retail-innovation.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/immersive/seamless-integration.svg b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/seamless-integration.svg
new file mode 100644
index 0000000..c7d3f63
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/immersive/seamless-integration.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><g id="_1" data-name="1"><path d="M70.73,64.19A6.73,6.73,0,1,1,64,57.45,6.74,6.74,0,0,1,70.73,64.19ZM95.29,59.7v9a2.44,2.44,0,0,1-2.44,2.43h-4a26.11,26.11,0,0,1-2.38,5.76l2.83,2.84a2.41,2.41,0,0,1,0,3.44L83,89.48a2.49,2.49,0,0,1-3.44,0l-2.84-2.84A25.4,25.4,0,0,1,70.92,89v4a2.43,2.43,0,0,1-2.44,2.43h-9A2.43,2.43,0,0,1,57.08,93V89a25.4,25.4,0,0,1-5.75-2.39l-2.84,2.84a2.49,2.49,0,0,1-3.44,0l-6.34-6.34a2.41,2.41,0,0,1,0-3.44l2.83-2.84a26.11,26.11,0,0,1-2.38-5.76h-4a2.44,2.44,0,0,1-2.44-2.43v-9a2.44,2.44,0,0,1,2.44-2.43h4a26.11,26.11,0,0,1,2.38-5.76l-2.83-2.84A2.4,2.4,0,0,1,38,47a2.43,2.43,0,0,1,.72-1.73l6.34-6.34a2.49,2.49,0,0,1,3.44,0l2.84,2.84a25.4,25.4,0,0,1,5.75-2.39v-4a2.43,2.43,0,0,1,2.44-2.43h9a2.43,2.43,0,0,1,2.44,2.43v4a25.4,25.4,0,0,1,5.75,2.39l2.84-2.84a2.49,2.49,0,0,1,3.44,0l6.34,6.34A2.43,2.43,0,0,1,90,47a2.4,2.4,0,0,1-.72,1.71l-2.83,2.84a26.11,26.11,0,0,1,2.38,5.76h4A2.44,2.44,0,0,1,95.29,59.7ZM64,79.94A15.77,15.77,0,0,1,48.25,64.19h-3A18.78,18.78,0,0,0,64,82.94Zm9.73-15.75A9.73,9.73,0,1,0,64,73.92,9.74,9.74,0,0,0,73.73,64.19Zm9,0A18.77,18.77,0,0,0,64,45.44v3A15.77,15.77,0,0,1,79.75,64.19ZM114.33,64a6.83,6.83,0,0,1-5.72,6.73,44.91,44.91,0,0,1-8.27,20.09,6.83,6.83,0,0,1-9.5,9.53,45.1,45.1,0,0,1-20.12,8.36,6.83,6.83,0,0,1-13.44,0,45,45,0,0,1-20.12-8.35,6.83,6.83,0,0,1-10.75-5.59,6.72,6.72,0,0,1,1.26-3.94,44.92,44.92,0,0,1-8.29-20.09,6.82,6.82,0,0,1,0-13.47,45,45,0,0,1,8.31-20,6.83,6.83,0,0,1,5.51-10.86,6.72,6.72,0,0,1,4,1.34,45.21,45.21,0,0,1,20-8.26,6.82,6.82,0,0,1,13.5,0,45,45,0,0,1,20,8.25,6.82,6.82,0,0,1,9.55,9.53,44.91,44.91,0,0,1,8.33,20A6.84,6.84,0,0,1,114.33,64Zm-8.72,6.56a6.83,6.83,0,0,1-4.72-4.87h-2.6v-3h2.51a6.85,6.85,0,0,1,4.78-5.24A41.9,41.9,0,0,0,98,39.26a6.82,6.82,0,0,1-6.76-.18L89.3,41l-2.12-2.12L89.06,37a6.88,6.88,0,0,1-.33-7,42.07,42.07,0,0,0-18.2-7.52,6.84,6.84,0,0,1-5,4.66V29.9h-3V27.16a6.85,6.85,0,0,1-5-4.66A41.94,41.94,0,0,0,39.27,30a6.86,6.86,0,0,1-.33,7l1.88,1.87L38.7,41l-1.93-1.92a6.85,6.85,0,0,1-3.53,1A6.75,6.75,0,0,1,30,39.25a42.16,42.16,0,0,0-7.58,18.2,6.83,6.83,0,0,1,4.78,5.24h2.51v3h-2.6a6.84,6.84,0,0,1-4.72,4.87A42.08,42.08,0,0,0,29.91,88.8a6.87,6.87,0,0,1,7.1.26l1.69-1.69,2.12,2.12-1.74,1.74a6.85,6.85,0,0,1,.11,6.88,41.85,41.85,0,0,0,18.23,7.57,6.84,6.84,0,0,1,5.08-4.84V98.47h3v2.37a6.82,6.82,0,0,1,5.08,4.85,42.09,42.09,0,0,0,18.23-7.58,6.85,6.85,0,0,1,.11-6.88l-1.74-1.74,2.12-2.12L91,89.06a6.88,6.88,0,0,1,7.11-.26A42.08,42.08,0,0,0,105.61,70.56Z"/></g></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/iot/agriculture-farming.webp b/Tech4biz-Version01/Tech4biz/public/images/services/iot/agriculture-farming.webp
new file mode 100644
index 0000000..2a7af33
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/iot/agriculture-farming.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/iot/custom-solutions-iot.svg b/Tech4biz-Version01/Tech4biz/public/images/services/iot/custom-solutions-iot.svg
new file mode 100644
index 0000000..8ea3b39
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/iot/custom-solutions-iot.svg
@@ -0,0 +1 @@
+<svg id="Layer_5" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m11.87 37.426.705.705c.327.327.827.407 1.244.198.439-.222.914-.333 1.387-.333.405 0 .808.082 1.186.246.105.046.213.09.322.133.837.325 1.482 1.013 1.769 1.886.143.441.554.739 1.019.739h.996c.465 0 .875-.297 1.021-.739.287-.872.932-1.561 1.771-1.887.106-.042.214-.086.321-.133.819-.355 1.756-.323 2.571.088.417.209.916.129 1.245-.198l.704-.705c.33-.329.41-.829.2-1.244-.412-.814-.443-1.752-.087-2.572.045-.104.088-.21.13-.317.327-.841 1.015-1.487 1.887-1.773.443-.146.74-.556.74-1.021v-.996c0-.465-.297-.875-.739-1.021-.873-.287-1.561-.932-1.887-1.771-.042-.109-.086-.215-.132-.321-.356-.819-.324-1.756.087-2.571.21-.415.13-.916-.199-1.245l-.704-.704c-.329-.329-.83-.41-1.245-.199-.815.412-1.753.443-2.572.087-.105-.045-.212-.089-.319-.131-.839-.326-1.484-1.014-1.771-1.886-.146-.444-.557-.741-1.022-.741h-.996c-.465 0-.875.297-1.021.739-.287.873-.933 1.561-1.772 1.887-.107.042-.214.085-.32.131-.818.355-1.756.325-2.571-.087-.417-.21-.915-.131-1.245.199l-.704.704c-.329.329-.409.83-.199 1.245.412.815.443 1.752.087 2.572-.045.104-.089.211-.131.318-.327.84-1.015 1.486-1.887 1.772-.442.146-.739.557-.739 1.022v.996c0 .465.297.875.739 1.021.873.287 1.561.932 1.887 1.771.043.109.086.215.132.32.356.819.324 1.757-.087 2.571-.211.416-.13.916.199 1.245zm8.13-13.426c3.314 0 6 2.686 6 6s-2.686 6-6 6-6-2.686-6-6 2.686-6 6-6z"/><path d="m21 42.958v6.042h1.165l1.557-8.561c-.132.12-.243.265-.303.445-.362 1.103-1.302 1.891-2.419 2.074z"/><path d="m19 49v-6.042c-1.117-.183-2.057-.97-2.419-2.073-.059-.182-.171-.327-.303-.447l1.557 8.562z"/><path d="m20 61c3.519 0 6.432-2.614 6.92-6h-13.84c.488 3.386 3.401 6 6.92 6z"/><path d="m20.245 11c.524 0 1.039.036 1.552.079 1.539-3.652 5.107-6.079 9.203-6.079v2c-3.085 0-5.794 1.721-7.129 4.359 7.723 1.52 13.741 7.797 14.904 15.641h17.225c2.757 0 5-2.243 5-5s-2.243-5-5-5c-.681 0-1.344.136-1.969.404l-1.039.445-.316-1.085c-.986-3.394-4.143-5.764-7.676-5.764h-2.663l-.256-.615c-1.872-4.486-6.221-7.385-11.081-7.385-5.152 0-9.625 3.234-11.297 8.003.018 0 .035-.003.053-.003zm24.755 2c3.309 0 6 2.691 6 6h-2c0-2.206-1.794-4-4-4z"/><path d="m28 51h-16c-.551 0-1 .448-1 1s.449 1 1 1h16c.551 0 1-.448 1-1s-.449-1-1-1z"/><path d="m20.245 13h-.489c-9.239 0-16.756 7.517-16.756 16.755 0 5.462 2.672 10.594 7.147 13.727 1.786 1.25 2.853 3.299 2.853 5.48v.038h2.802l-1.58-8.689c-1.072.326-2.249.047-3.062-.766l-.705-.705c-.941-.941-1.17-2.372-.57-3.561.143-.282.156-.601.038-.873-.057-.13-.111-.261-.162-.394-.108-.277-.344-.494-.646-.594-1.265-.415-2.115-1.589-2.115-2.92v-.996c0-1.331.85-2.505 2.114-2.921.303-.099.54-.316.648-.596.051-.13.104-.261.161-.39.119-.274.105-.592-.038-.874-.601-1.188-.372-2.62.57-3.561l.704-.704c.942-.942 2.372-1.17 3.561-.57.282.143.601.156.873.038.129-.056.26-.11.391-.161.28-.109.497-.345.596-.646.417-1.267 1.591-2.117 2.922-2.117h.996c1.331 0 2.505.85 2.921 2.114.099.303.317.54.596.648.131.051.262.105.39.161.275.119.593.105.874-.038 1.189-.6 2.62-.372 3.561.57l.704.704c.942.941 1.171 2.373.57 3.561-.143.282-.156.6-.038.873.057.13.11.261.161.393.108.278.344.495.646.594 1.267.417 2.117 1.591 2.117 2.922v.996c0 1.331-.85 2.505-2.114 2.921-.303.1-.54.316-.648.596-.05.131-.104.262-.161.391-.119.273-.105.592.038.874.601 1.188.372 2.619-.57 3.561l-.704.705c-.813.812-1.99 1.092-3.062.766l-1.581 8.688h2.802v-.038c0-2.181 1.067-4.229 2.854-5.479 4.474-3.133 7.146-8.265 7.146-13.728 0-9.238-7.517-16.755-16.755-16.755z"/><circle cx="20" cy="30" r="2"/><path d="m49 31h2v2h-2z"/><path d="m51 35h-2v6h-3v8h8v-8h-3z"/><path d="m42 35h-2v16h-3v8h8v-8h-3z"/><path d="m40 31h2v2h-2z"/><path d="m60 51v-16h-2v16h-3v8h8v-8z"/><path d="m58 31h2v2h-2z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/iot/ongoing-support.svg b/Tech4biz-Version01/Tech4biz/public/images/services/iot/ongoing-support.svg
new file mode 100644
index 0000000..de6767f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/iot/ongoing-support.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m351.993 250.388c-1.72-7.23-4.586-14.136-8.483-20.463l5.902-13.289-15.668-15.668-13.293 5.904c-6.327-3.895-13.23-6.761-20.458-8.481l-5.222-13.566h-22.157l-5.222 13.566c-7.228 1.72-14.131 4.586-20.458 8.481l-13.293-5.904-15.667 15.668 5.903 13.292c-3.896 6.326-6.762 13.231-8.482 20.459l-13.564 5.221v22.157l13.562 5.22c1.72 7.229 4.585 14.135 8.483 20.463l-5.902 13.29 15.668 15.667 13.293-5.904c6.326 3.895 13.229 6.761 20.458 8.481l5.222 13.566h22.157l5.221-13.563c7.229-1.72 14.136-4.586 20.463-8.483l13.29 5.902 15.667-15.668-5.904-13.294c3.895-6.326 6.761-13.23 8.481-20.458l13.566-5.221v-22.157zm-68.3 54.941c-21.343 0-38.642-17.299-38.642-38.642s17.299-38.642 38.642-38.642 38.642 17.299 38.642 38.642-17.299 38.642-38.642 38.642zm-144.927 165.253-55.404-97.895c-2.679-4.733-8.744-6.414-13.477-3.736l-18.845 10.666c-4.733 2.679-6.415 8.744-3.736 13.477l55.404 97.895c2.679 4.733 8.744 6.414 13.477 3.735l18.845-10.666c4.734-2.678 6.414-8.742 3.736-13.476zm-66.162-69.905c-3.677.537-7.093-2.008-7.631-5.684s2.007-7.093 5.684-7.631c3.677-.537 7.093 2.007 7.631 5.684.538 3.676-2.007 7.093-5.684 7.631zm175.95-4.815c7.261.885 13.193-1.179 15.22-8.745 1.803-6.731-2.491-13.027-8.787-15.257-21.824-4.01-42.929-11.64-59.532-17.642-23.576-8.524-29.567-10.567-52.837 2.905l-37.42 21.665 34.473 60.911c1.262-.279 2.557-.241 3.775.085l95.255 25.498c13.632 3.653 21.282 1.23 33.308-4.908l130.754-80.513c3.805-2.343 5.669-7.852 5.108-13.263-.452-4.367-2.58-8.376-6.596-10.41-6.586-3.336-18.134-2.276-36.133 8.207l-72.361 42.147c-5.898 3.435-11.97 5.619-18.276 6.677-18.095 3.039-45.138-5.411-61.381-10.05-5.171-1.477-10.422-2.976-15.516-4.341-4.263-1.139-6.795-5.518-5.656-9.781s5.518-6.795 9.781-5.656c15.579 4.173 31.032 9.197 46.821 12.471zm172.439-279.379c-4.762-43.999-42.022-78.254-87.287-78.254-10.4 0-20.378 1.808-29.636 5.128-17.5-16.934-41.338-27.357-67.612-27.357-53.711 0-97.253 43.542-97.253 97.253 0 1.885.059 3.755.165 5.613-22.207 9.094-37.955 30.969-37.955 56.35 0 33.47 27.383 60.852 60.853 60.852h40.83c.885-2.328 1.871-4.617 2.955-6.859l-7.159-16.12 31.203-31.204 16.122 7.16c2.951-1.426 5.982-2.683 9.077-3.764l6.335-16.458h19.715c-5.673-1.096-9.958-6.089-9.958-12.082 0-6.797 5.51-12.307 12.307-12.307 6.796 0 12.307 5.51 12.307 12.307 0 5.993-4.285 10.985-9.958 12.082h19.715l6.335 16.458c3.095 1.08 6.125 2.337 9.077 3.764l16.122-7.16 31.204 31.203-7.159 16.117c1.085 2.244 2.071 4.534 2.957 6.863h40.827c33.47 0 60.853-27.383 60.853-60.852-.004-27.982-19.146-51.706-44.982-58.733zm-103.554 23.777c-3.245 2.968-8.282 2.744-11.25-.5-5.83-6.38-13.8-10.238-22.497-10.238s-16.667 3.858-22.497 10.238c-2.968 3.245-8.005 3.469-11.25.5s-3.469-8.006-.5-11.25c8.868-9.706 21.03-15.488 34.247-15.488s25.378 5.782 34.247 15.488c2.969 3.245 2.745 8.282-.5 11.25zm18.345-20.078c-3.245 2.968-8.282 2.745-11.25-.5-10.581-11.581-25.059-18.554-40.84-18.554s-30.259 6.972-40.841 18.554c-2.968 3.245-8.005 3.469-11.25.5s-3.468-8.006-.5-11.25c13.621-14.907 32.29-23.803 52.591-23.803s38.971 8.896 52.591 23.803c2.967 3.245 2.743 8.282-.501 11.25zm18.342-20.076c-3.245 2.969-8.282 2.745-11.25-.5-15.332-16.781-36.319-26.87-59.184-26.87s-43.852 10.089-59.184 26.87c-2.969 3.245-8.006 3.469-11.25.5-3.245-2.968-3.469-8.006-.5-11.25 18.371-20.107 43.549-32.12 70.934-32.12 27.384 0 52.562 12.013 70.934 32.12 2.969 3.244 2.745 8.282-.5 11.25z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/iot/seamless-integration.svg b/Tech4biz-Version01/Tech4biz/public/images/services/iot/seamless-integration.svg
new file mode 100644
index 0000000..45044da
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/iot/seamless-integration.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 64 64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><g><g><g><g><path d="m15.29 18.01h-12.06c-1.64 0-2.98-1.33-2.98-2.97v-12.07c.01-1.64 1.34-2.97 2.98-2.97h12.06c1.64 0 2.97 1.33 2.97 2.97v12.06c.01 1.65-1.33 2.98-2.97 2.98zm-12.06-16.07c-.57 0-1.03.46-1.03 1.03v12.06c0 .57.47 1.04 1.04 1.04h12.06c.57 0 1.04-.46 1.04-1.04v-12.06c0-.57-.46-1.04-1.04-1.04h-12.07z"/></g><g><path d="m11.29 13h-4.05c-1.09 0-1.97-.88-1.97-1.97v-4.05c0-1.09.88-1.97 1.97-1.97h4.04c1.09 0 1.97.88 1.97 1.97v4.04c.01 1.09-.88 1.98-1.96 1.98zm-4.05-6.05-.03 4.07c0 .02.02.03.03.03h4.04l.03-4.07z"/></g></g><g><g><path d="m60.77 18.01h-12.06c-1.64 0-2.97-1.33-2.97-2.97v-12.07c0-1.64 1.33-2.97 2.97-2.97h12.06c1.64 0 2.97 1.33 2.97 2.97v12.06c0 1.65-1.33 2.98-2.97 2.98zm-12.06-16.07c-.57 0-1.03.46-1.03 1.04v12.06c0 .57.46 1.04 1.03 1.04h12.06c.57 0 1.04-.46 1.04-1.04v-12.07c0-.57-.46-1.04-1.04-1.04h-12.06z"/></g><g><path d="m56.76 13h-4.04c-1.09 0-1.97-.88-1.97-1.97v-4.05c0-1.09.88-1.97 1.97-1.97h4.04c1.09 0 1.97.88 1.97 1.97v4.04c0 1.09-.89 1.98-1.97 1.98zm-4.04-6.05-.03 4.07c0 .02.02.03.03.03h4.04l.03-4.07z"/></g></g></g><g><g><g><path d="m15.29 64h-12.06c-1.64 0-2.98-1.33-2.98-2.97v-12.07c0-1.64 1.33-2.97 2.98-2.97h12.06c1.64 0 2.97 1.33 2.97 2.97v12.06c.01 1.65-1.33 2.98-2.97 2.98zm-12.06-16.07c-.57 0-1.04.46-1.04 1.04v12.06c0 .57.47 1.03 1.04 1.03h12.06c.57 0 1.04-.46 1.04-1.03v-12.07c0-.57-.46-1.04-1.04-1.04h-12.06z"/></g><g><path d="m11.29 58.99h-4.05c-1.09 0-1.97-.88-1.97-1.97v-4.04c0-1.09.88-1.97 1.97-1.97h4.04c1.09 0 1.97.88 1.97 1.97v4.04c.01 1.08-.88 1.97-1.96 1.97zm-4.05-6.05-.03 4.07c0 .02.02.03.03.03h4.04l.03-4.07z"/></g></g><g><g><path d="m60.77 64h-12.06c-1.64 0-2.97-1.33-2.97-2.97v-12.07c0-1.64 1.33-2.97 2.97-2.97h12.06c1.64 0 2.97 1.33 2.97 2.97v12.06c0 1.65-1.33 2.98-2.97 2.98zm-12.06-16.07c-.57 0-1.03.46-1.03 1.04v12.06c0 .57.46 1.03 1.03 1.03h12.06c.57 0 1.04-.46 1.04-1.03v-12.07c0-.57-.46-1.04-1.04-1.04h-12.06z"/></g><g><path d="m56.76 58.99h-4.04c-1.09 0-1.97-.88-1.97-1.97v-4.04c0-1.09.88-1.97 1.97-1.97h4.04c1.09 0 1.97.88 1.97 1.97v4.04c0 1.08-.89 1.97-1.97 1.97zm-4.04-6.05-.03 4.07c0 .02.02.03.03.03h4.04l.03-4.07z"/></g></g></g></g><g><g><path d="m38.03 41.01h-12.06c-1.64 0-2.97-1.33-2.97-2.97v-12.07c0-1.64 1.33-2.97 2.97-2.97h12.06c1.64 0 2.97 1.33 2.97 2.97v12.06c.01 1.64-1.33 2.98-2.97 2.98zm-12.06-16.08c-.57 0-1.03.46-1.03 1.03v12.06c0 .57.46 1.03 1.03 1.03h12.06c.57 0 1.04-.46 1.04-1.03v-12.05c0-.57-.46-1.03-1.04-1.03h-12.06z"/></g><g><path d="m34.02 35.99h-4.04c-1.09 0-1.97-.88-1.97-1.97v-4.04c0-1.09.88-1.97 1.97-1.97h4.04c1.09 0 1.97.88 1.97 1.97v4.04c0 1.09-.88 1.97-1.97 1.97zm-4.04-6.04-.03 4.07c0 .02.02.03.03.03h4.04l.03-4.07z"/></g></g><g><g><path d="m7.01 47.93c-.54 0-.97-.43-.97-.97v-29.92c0-.54.43-.97.97-.97s.97.43.97.97v29.92c0 .54-.43.97-.97.97z"/></g><g><path d="m11.52 47.93c-.54 0-.97-.43-.97-.97v-12.71c0-.54.43-.97.97-.97h12.44c.54 0 .97.43.97.97s-.43.97-.97.97h-11.47v11.74c0 .54-.43.97-.97.97z"/></g><g><path d="m23.96 30.71h-12.44c-.54 0-.97-.43-.97-.97v-12.7c0-.54.43-.97.97-.97s.97.43.97.97v11.73h11.47c.54 0 .97.43.97.97s-.43.97-.97.97z"/></g><g><path d="m52.48 30.71h-12.45c-.54 0-.97-.43-.97-.97s.43-.97.97-.97h11.48v-11.73c0-.54.43-.97.97-.97s.97.43.97.97v12.7c0 .54-.43.97-.97.97z"/></g><g><path d="m52.48 47.93c-.54 0-.97-.43-.97-.97v-11.74h-11.48c-.54 0-.97-.43-.97-.97s.43-.97.97-.97h12.45c.54 0 .97.43.97.97v12.71c0 .54-.43.97-.97.97z"/></g><g><path d="m56.99 47.93c-.54 0-.97-.43-.97-.97v-29.92c0-.54.43-.97.97-.97s.97.43.97.97v29.92c0 .54-.43.97-.97.97z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/iot/smart-energy-solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/services/iot/smart-energy-solutions.webp
new file mode 100644
index 0000000..b7caf32
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/iot/smart-energy-solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/iot/strategic-consultation.svg b/Tech4biz-Version01/Tech4biz/public/images/services/iot/strategic-consultation.svg
new file mode 100644
index 0000000..e33a140
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/iot/strategic-consultation.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 50 50" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m29.4 13.3c0-7.1-5.8-12.8-12.8-12.8-7.1 0-12.8 5.7-12.8 12.8s5.8 12.8 12.8 12.8c2.1 0 4.2-.5 6-1.5l6.2 1.5h.1c.1 0 .3 0 .4-.1s.2-.3.1-.5l-1.5-6.2c1-1.8 1.5-3.9 1.5-6m-1.2 11.6-5.6-1.3c-.1 0-.3 0-.4 0-1.7 1-3.7 1.5-5.7 1.5-6.5 0-11.8-5.3-11.8-11.8s5.3-11.8 11.8-11.8 11.8 5.3 11.8 11.8c0 2-.5 4-1.5 5.7-.1.1-.1.2-.1.4z"/><path d="m24.8 13.8c0 1.1-.9 2-2 2-.5 0-.9-.2-1.3-.4l-5.5 4.2c.1.2.1.5.1.7 0 1.1-.9 1.9-1.9 1.9s-1.9-.9-1.9-1.9.9-1.9 1.9-1.9c.4 0 .8.2 1.2.4l5.5-4.2c-.1-.3-.2-.5-.2-.8v-.1l-9.6-3.1c-.4.5-1 .9-1.7.9-1.1 0-2-.9-2-2s.9-2 2-2c.7 0 1.3.4 1.7.9l4.4-1.5-.5-.2c-.3-.1-.4-.4-.3-.6.1-.3.4-.4.6-.4l2.1.6s.1 0 .1.1h.1c0 .1.1.1.1.2v.2.1c0 .1 0 .1-.1.1l-1.3 1.7c-.2.3-.3.4-.5.4-.1 0-.2 0-.3-.1-.2-.2-.3-.5-.1-.7l.3-.4-4.3 1.5v.1.1l9.6 3.1c.4-.6 1-.9 1.7-.9 1.2 0 2.1.9 2.1 2"/><path d="m10.4 14.7c-.2-.2-.5-.2-.7 0l-.6.6-.6-.6c-.2-.2-.5-.2-.7 0s-.2.5 0 .7l.6.6-.6.6c-.2.2-.2.5 0 .7.1.1.2.1.4.1.1 0 .3 0 .4-.1l.6-.6.6.6c.1.1.2.1.4.1.1 0 .3 0 .4-.1.2-.2.2-.5 0-.7l-.6-.6.6-.6c0-.1 0-.5-.2-.7"/><path d="m21.2 8.7c.1.1.2.1.4.1.1 0 .3 0 .4-.1l.6-.6.6.6c.1.1.2.1.4.1.1 0 .3 0 .4-.1 0-.1 0-.5-.2-.7l-.6-.6.6-.6c.2-.2.2-.5 0-.7s-.5-.2-.7 0l-.6.6-.6-.6c-.2-.2-.5-.2-.7 0s-.2.5 0 .7l.6.6-.6.6c-.2.2-.2.6 0 .7"/><path d="m16.7 39.1-.7-1.2c-.1-.1-.2-.2-.4-.3-.1 0-.3 0-.4.1l-3.1 2.6-3.1-2.6c-.1-.1-.3-.1-.4-.1s-.3.1-.3.3l-.7 1.3c-3.2.9-4.8 2.9-4.8 6 0 .7.1 1.4.2 2.1.3 1.3 1.5 2.3 2.9 2.3h12.5c1.4 0 2.6-1 2.9-2.3.1-.7.2-1.4.2-2.1 0-3.2-1.6-5.2-4.8-6.1m-10.7 4.7c-.1.4-.2.8-.2 1.3 0 .3 0 .6.1.9 0 .3-.2.5-.4.6h-.2c-.3 0-.5-.2-.5-.4 0-.3-.1-.7-.1-1 0-.6.1-1.1.2-1.6.1-.3.4-.4.6-.3.4 0 .6.2.5.5m1-1.2c-.1.1-.2.1-.3.2s-.2.1-.3.1-.3-.1-.4-.2c-.2-.2-.2-.5 0-.7.1-.1.3-.2.4-.3.2-.2.5-.1.7.1.2.3.1.6-.1.8m6-.6-.2.6h-1.3l-.2-.6.9-.5zm-4.5-2.5.3-.6 2.4 2-1 .6zm2.3 9 .7-4.9h1.1l.7 4.9zm3.2-7-1-.6 2.4-2 .3.6z"/><path d="m16.6 31.4v-2.1c0-1.5-1.3-2.8-2.8-2.8h-3.3c-1.5 0-2.8 1.2-2.8 2.8v2.1c-.6.2-1 .7-1 1.4 0 .6.4 1.2 1.1 1.4.4 2 2.2 3.5 4.3 3.5s3.9-1.5 4.4-3.5c.6-.2 1.1-.7 1.1-1.4-.1-.6-.5-1.2-1-1.4m-.6 1.8c-.3 0-.5.2-.5.4-.2 1.7-1.7 3-3.4 3s-3.2-1.3-3.4-3c0-.3-.3-.4-.5-.4-.3 0-.5-.2-.5-.4 0-.3.2-.4.5-.4s.5-.2.5-.5v-.5s.1-.1.1-.1.1 0 .1-.1c.1-.1.2-.2.4-.2.4-.1.9 0 1.5.1.2.1.4.1.6.2.3.1.7.2 1 .3.2.1.4.1.6.1h.5.1c.4 0 .8 0 1.2-.1.2-.1.5-.2.7-.3h.1v.5c0 .3.2.5.5.5s.5.2.5.4c-.1.3-.3.5-.6.5"/><path d="m41.6 37.4-.8-1.5c-.1-.1-.2-.2-.3-.3-.1 0-.3 0-.4.1l-3.7 3.1-3.7-3.1c-.1-.1-.3-.1-.4-.1s-.3.1-.3.3l-1 1.5c-3.7 1-5.6 3.3-5.6 7 0 .8.1 1.6.3 2.4.3 1.5 1.7 2.6 3.3 2.6h14.7c1.6 0 3-1.1 3.3-2.6.2-.8.3-1.7.3-2.4 0-3.7-1.9-6-5.7-7m-12.6 5.4c-.1.4-.2 1-.2 1.6 0 .3 0 .7.1 1 0 .3-.2.5-.4.5 0 0 0 0-.1 0-.3 0-.5-.2-.5-.4 0-.4-.1-.8-.1-1.1 0-.7.1-1.3.3-1.9.1-.3.4-.4.6-.3s.4.3.3.6m1.2-1.5c-.1.1-.3.2-.4.3s-.2.1-.3.1-.3-.1-.4-.2c-.2-.2-.2-.5 0-.7.2-.1.3-.3.5-.4s.5-.1.7.2c.2.2.1.5-.1.7m7.3-.6-.3.8h-1.6l-.3-.8 1.1-.7zm-5.5-3 .5-.9 3 2.5-1.4.8zm2.7 10.7.9-5.9h1.4l.9 5.9zm3.9-8.2-1.4-.8 3-2.5.5.9z"/><path d="m41.5 28.3v-2.5c0-1.7-1.4-3.1-3.2-3.1h-3.9c-1.8 0-3.2 1.4-3.2 3.1v2.5c-.7.2-1.1.8-1.1 1.5s.5 1.4 1.2 1.5c.5 2.3 2.6 4 5 4 2.5 0 4.6-1.7 5-4 .7-.2 1.2-.8 1.2-1.5.1-.6-.4-1.2-1-1.5m-.6 2.2c-.3 0-.5.2-.5.4-.2 2-2 3.5-4.1 3.5s-3.9-1.5-4.1-3.5c0-.3-.3-.4-.5-.4-.4 0-.6-.3-.6-.6s.3-.6.6-.6.5-.2.5-.5v-.7c0-.1.1-.1.2-.1 0 0 .1-.1.1-.1.1-.1.3-.1.4-.2h.3c.4 0 .9 0 1.5.2.3.1.5.2.8.3.4.1.8.3 1.2.4.2 0 .5.1.7.1h.5.2.7c.2 0 .4-.1.7-.1.2-.1.4-.1.5-.2 0 0 .1-.1.1-.1.1-.1.2-.1.4-.2v.7c0 .3.2.5.5.5s.6.3.6.6-.3.6-.7.6"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/iot/transportation-logistics.webp b/Tech4biz-Version01/Tech4biz/public/images/services/iot/transportation-logistics.webp
new file mode 100644
index 0000000..9cc4dad
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/iot/transportation-logistics.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/man-architect-working-project-with-vr-glasses-new-technologies.avif b/Tech4biz-Version01/Tech4biz/public/images/services/man-architect-working-project-with-vr-glasses-new-technologies.avif
new file mode 100644
index 0000000..dcfee86
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/man-architect-working-project-with-vr-glasses-new-technologies.avif differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/brand-building.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/brand-building.webp
new file mode 100644
index 0000000..e4b8ee7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/brand-building.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/customer-centric-marketing.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/customer-centric-marketing.webp
new file mode 100644
index 0000000..075f75c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/customer-centric-marketing.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/cutting-edge-digital-solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/cutting-edge-digital-solutions.webp
new file mode 100644
index 0000000..45bc297
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/cutting-edge-digital-solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/e-commerce-and-retail.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/e-commerce-and-retail.webp
new file mode 100644
index 0000000..a370aea
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/e-commerce-and-retail.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/get-started-now.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/get-started-now.webp
new file mode 100644
index 0000000..0ce5ef2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/get-started-now.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/holistic-brand-strategy.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/holistic-brand-strategy.webp
new file mode 100644
index 0000000..f67de9c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/holistic-brand-strategy.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/professional-services.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/professional-services.webp
new file mode 100644
index 0000000..6690e81
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/professional-services.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/marketing/sustainability.webp b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/sustainability.webp
new file mode 100644
index 0000000..69b3552
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/marketing/sustainability.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/others/ASIC-AI-Deployment.webp b/Tech4biz-Version01/Tech4biz/public/images/services/others/ASIC-AI-Deployment.webp
new file mode 100644
index 0000000..87f3319
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/others/ASIC-AI-Deployment.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/others/Accelerated-Performance.webp b/Tech4biz-Version01/Tech4biz/public/images/services/others/Accelerated-Performance.webp
new file mode 100644
index 0000000..a381a12
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/others/Accelerated-Performance.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/others/Adaptive-Solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/services/others/Adaptive-Solutions.webp
new file mode 100644
index 0000000..29c974d
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/others/Adaptive-Solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/others/Advanced-FPGA-Architecture.webp b/Tech4biz-Version01/Tech4biz/public/images/services/others/Advanced-FPGA-Architecture.webp
new file mode 100644
index 0000000..5dd1d57
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/others/Advanced-FPGA-Architecture.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/others/placeholder.jpg b/Tech4biz-Version01/Tech4biz/public/images/services/others/placeholder.jpg
new file mode 100644
index 0000000..7e35296
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/others/placeholder.jpg differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/pcb/automotive-innovation.webp b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/automotive-innovation.webp
new file mode 100644
index 0000000..950442a
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/automotive-innovation.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/pcb/consumer-electronics-excellence.webp b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/consumer-electronics-excellence.webp
new file mode 100644
index 0000000..3d4d948
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/consumer-electronics-excellence.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/pcb/continuous-support.svg b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/continuous-support.svg
new file mode 100644
index 0000000..94e85af
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/continuous-support.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" id="Layer_1" viewBox="0 0 64 64"><title/><path d="M61,2H3A1,1,0,0,0,2,3V45a1,1,0,0,0,1,1H14V61h2V59H48v2h2V46H61a1,1,0,0,0,1-1V3A1,1,0,0,0,61,2ZM48,40V57H16V40ZM27.06,38A4.82,4.82,0,0,1,32,34a4.82,4.82,0,0,1,4.94,4ZM60,44H50V39a1,1,0,0,0-1-1H39a6.81,6.81,0,0,0-7-6,6.81,6.81,0,0,0-7,6H15a1,1,0,0,0-1,1v5H4V4H60Z"/><path d="M32,25a3,3,0,1,0,3,3A3,3,0,0,0,32,25Zm0,4a1,1,0,1,1,1-1A1,1,0,0,1,32,29Z"/><path d="M41,18h.76l-.61.61a1,1,0,0,0,0,1.41L44,22.85a1,1,0,0,0,1.41,0l.61-.61V23a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1v-.62l.46.47a1,1,0,0,0,1.42,0L56.71,20a1,1,0,0,0,0-1.41L56.1,18H57a1,1,0,0,0,1-1V13a1,1,0,0,0-1-1h-.76l.47-.46a1,1,0,0,0,0-1.42L53.88,7.29a1,1,0,0,0-1.42,0L52,7.76V7a1,1,0,0,0-1-1H47a1,1,0,0,0-1,1v.9l-.61-.61a1,1,0,0,0-.7-.29,1,1,0,0,0-.71.29l-2.83,2.83a1,1,0,0,0,0,1.42l.47.46H41a1,1,0,0,0-1,1v4A1,1,0,0,0,41,18Zm1-4h2a1,1,0,0,0,.92-.62,1,1,0,0,0-.21-1.09l-1.47-1.46,1.42-1.42L46.29,11A1,1,0,0,0,48,10.31V8h2v2.17a1,1,0,0,0,.62.93,1,1,0,0,0,1.09-.22l1.46-1.47,1.42,1.42-1.47,1.46a1,1,0,0,0-.22,1.09,1,1,0,0,0,.93.62H56v2H53.69A1,1,0,0,0,53,17.71l1.61,1.6-1.42,1.42-1.46-1.47a1,1,0,0,0-1.09-.21A1,1,0,0,0,50,20v2H48V19.83a1,1,0,0,0-.62-.93,1,1,0,0,0-1.09.22l-1.6,1.61-1.42-1.42,1.61-1.6a1,1,0,0,0,.22-1.09,1,1,0,0,0-.93-.62H42Z"/><path d="M49,18a3,3,0,1,0-3-3A3,3,0,0,0,49,18Zm0-4a1,1,0,1,1-1,1A1,1,0,0,1,49,14Z"/><path d="M7,27h.76l-.61.61a1,1,0,0,0,0,1.41L10,31.85a1,1,0,0,0,1.41,0l.61-.61V32a1,1,0,0,0,1,1h4a1,1,0,0,0,1-1v-.62l.46.47a1,1,0,0,0,1.42,0L22.71,29a1,1,0,0,0,0-1.41L22.1,27H23a1,1,0,0,0,1-1V22a1,1,0,0,0-1-1h-.76l.47-.46a1,1,0,0,0,0-1.42l-2.83-2.83a1,1,0,0,0-1.42,0l-.46.47V16a1,1,0,0,0-1-1H13a1,1,0,0,0-1,1v.9l-.61-.61a1,1,0,0,0-.7-.29,1,1,0,0,0-.71.29L7.15,19.12a1,1,0,0,0,0,1.42l.47.46H7a1,1,0,0,0-1,1v4A1,1,0,0,0,7,27Zm1-4h2a1,1,0,0,0,.92-.62,1,1,0,0,0-.21-1.09L9.27,19.83l1.42-1.42L12.29,20A1,1,0,0,0,14,19.31V17h2v2.17a1,1,0,0,0,.62.93,1,1,0,0,0,1.09-.22l1.46-1.47,1.42,1.42-1.47,1.46a1,1,0,0,0-.22,1.09,1,1,0,0,0,.93.62H22v2H19.69A1,1,0,0,0,19,26.71l1.61,1.6-1.42,1.42-1.46-1.47a1,1,0,0,0-1.09-.21A1,1,0,0,0,16,29v2H14V28.83a1,1,0,0,0-1.71-.71l-1.6,1.61L9.27,28.31l1.61-1.6a1,1,0,0,0,.22-1.09,1,1,0,0,0-.93-.62H8Z"/><path d="M16,10H35l-1.6,1.2,1.2,1.6,4-3h0A1.05,1.05,0,0,0,39,9.32,1,1,0,0,0,38.6,8.2l-4-3L33.4,6.8,35,8H15a1,1,0,0,0-1,1v4h2Z"/><path d="M37.16,28.47l0,.05a1,1,0,0,0,0,1l1.91,3,1.69-1.08L39.82,30H49a1,1,0,0,0,1-1V25H48v3H39.82l.94-1.46-1.69-1.08-1.91,3Z"/><path d="M27,51h.43A5,5,0,0,0,30,53.57V54a1,1,0,0,0,1,1h2a1,1,0,0,0,1-1v-.43A5,5,0,0,0,36.57,51H37a1,1,0,0,0,1-1V48a1,1,0,0,0-1-1h-.43A5,5,0,0,0,34,44.43V44a1,1,0,0,0-1-1H31a1,1,0,0,0-1,1v.43A5,5,0,0,0,27.43,47H27a1,1,0,0,0-1,1v2A1,1,0,0,0,27,51Zm2.11-2.75a3,3,0,0,1,2.14-2.14,1,1,0,0,0,.75-1,1,1,0,0,0,.75,1,3,3,0,0,1,2.14,2.14,1,1,0,0,0,1,.75,1,1,0,0,0-1,.75,3,3,0,0,1-2.14,2.14,1,1,0,0,0-.75,1,1,1,0,0,0-.75-1,3,3,0,0,1-2.14-2.14,1,1,0,0,0-1-.75A1,1,0,0,0,29.11,48.25Z"/></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/pcb/customization-pcba-pcb-manufacturing.svg b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/customization-pcba-pcb-manufacturing.svg
new file mode 100644
index 0000000..11d1568
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/customization-pcba-pcb-manufacturing.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m496 0h-480c-8.836 0-16 7.164-16 16v480c0 8.836 7.164 16 16 16h480c8.837 0 16-7.164 16-16v-480c0-8.836-7.163-16-16-16zm-16 480h-448v-16h16c8.836 0 16-7.164 16-16s-7.164-16-16-16h-16v-16h16c8.836 0 16-7.164 16-16s-7.164-16-16-16h-16v-16h16c8.836 0 16-7.164 16-16s-7.164-16-16-16h-16v-16h16c8.836 0 16-7.164 16-16s-7.164-16-16-16h-16v-160h16c8.836 0 16-7.164 16-16s-7.164-16-16-16h-16v-16h16c8.836 0 16-7.164 16-16s-7.164-16-16-16h-16v-16h448z"/><path d="m240 192c-8.836 0-16 7.164-16 16s7.164 16 16 16h18.752c4.829 13.615 15.633 24.419 29.248 29.248v18.752c0 8.836 7.163 16 16 16s16-7.164 16-16v-16h32v16c0 8.836 7.163 16 16 16s16-7.164 16-16v-18.752c13.615-4.829 24.419-15.633 29.248-29.248h18.752c8.837 0 16-7.164 16-16s-7.163-16-16-16h-16v-31h16c8.837 0 16-7.164 16-16s-7.163-16-16-16h-18.413c-4.646-14.084-15.641-25.301-29.587-30.248v-18.752c0-8.836-7.163-16-16-16s-16 7.164-16 16v16h-32v-16c0-8.836-7.163-16-16-16s-16 7.164-16 16v18.752c-13.946 4.946-24.94 16.164-29.587 30.248h-18.413c-8.836 0-16 7.164-16 16s7.164 16 16 16h16v31zm48-48c0-8.822 7.178-16 16-16h64c8.822 0 16 7.178 16 16v64c0 8.822-7.178 16-16 16h-64c-8.822 0-16-7.178-16-16z"/><path d="m240 352h192c8.837 0 16-7.164 16-16s-7.163-16-16-16h-192c-8.836 0-16 7.164-16 16s7.164 16 16 16z"/><path d="m240 416h16v16c0 8.836 7.163 16 16 16s16-7.164 16-16v-16h32v16c0 8.836 7.163 16 16 16s16-7.164 16-16v-16h32v16c0 8.836 7.163 16 16 16s16-7.164 16-16v-16h16c8.837 0 16-7.164 16-16s-7.163-16-16-16h-192c-8.836 0-16 7.164-16 16s7.164 16 16 16z"/><path d="m112 208c8.836 0 16-7.164 16-16v-112c0-8.836-7.164-16-16-16s-16 7.164-16 16v112c0 8.836 7.164 16 16 16z"/><path d="m176 272c8.836 0 16-7.164 16-16v-176c0-8.836-7.164-16-16-16s-16 7.164-16 16v176c0 8.836 7.164 16 16 16z"/><path d="m112 448h32c8.836 0 16-7.164 16-16s-7.164-16-16-16h-32c-8.836 0-16 7.164-16 16s7.164 16 16 16z"/><path d="m112 384h32c8.836 0 16-7.164 16-16s-7.164-16-16-16h-32c-8.836 0-16 7.164-16 16s7.164 16 16 16z"/><path d="m112 320h32c8.836 0 16-7.164 16-16s-7.164-16-16-16h-32c-8.836 0-16 7.164-16 16s7.164 16 16 16z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/pcb/end-to-end-services-pcba-pcb-manufacturing.svg b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/end-to-end-services-pcba-pcb-manufacturing.svg
new file mode 100644
index 0000000..70507cc
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/end-to-end-services-pcba-pcb-manufacturing.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><g id="_x31_2_Processing_Time"><g><path d="m441.951 173.09c-.964-.964-2.526-.964-3.491 0s-.964 2.526 0 3.491c56.233 56.233 56.732 147.377 1.58 204.304-.48-.889-.672-1.905-.497-2.942l5.779-34.033c.228-1.344-.677-2.618-2.02-2.846-1.331-.223-2.616.677-2.846 2.02l-5.779 34.033c-.517 3.047.477 6.17 2.663 8.354 2.147 2.147 5.251 3.189 8.352 2.663l34.041-5.771c1.344-.227 2.248-1.501 2.02-2.846-.228-1.344-1.5-2.242-2.846-2.02l-34.041 5.771c-.098.016-.192.004-.29.014 56.167-59.041 55.33-152.236-2.625-210.192z"/><path d="m69.941 387.013c.964.964 2.526.964 3.491 0 .964-.964.964-2.526 0-3.491-56.092-56.092-57.027-146.553-2.09-203.77.175.639.228 1.313.113 1.997l-5.779 34.032c-.228 1.344.677 2.618 2.02 2.846 1.324.228 2.616-.661 2.846-2.02l5.779-34.032c.526-3.091-.445-6.136-2.663-8.354-2.184-2.184-5.304-3.181-8.354-2.665l-34.041 5.773c-1.344.227-2.248 1.501-2.02 2.846.228 1.344 1.509 2.253 2.846 2.02l34.041-5.773c.525-.087 1.04-.055 1.543.029-56.389 58.884-55.661 152.633 2.268 210.562z"/><path d="m364.553 457.696c-.964-.964-2.526-.964-3.491 0-56.323 56.32-147.24 56.888-204.304 1.58.888-.479 1.904-.672 2.944-.497l34.032 5.778c1.342.236 2.62-.675 2.846-2.02.228-1.344-.677-2.618-2.02-2.846l-34.03-5.778c-3.1-.537-6.136.444-8.354 2.66-2.186 2.184-3.184 5.308-2.666 8.356l5.771 34.041c.231 1.362 1.525 2.248 2.846 2.02 1.344-.227 2.248-1.501 2.02-2.846l-5.771-34.041c-.017-.099-.004-.195-.015-.293 59.002 56.134 152.245 55.324 210.191-2.622.966-.965.966-2.527.001-3.492z"/><path d="m144.843 50.723c-.964.964-.964 2.526 0 3.491.964.964 2.526.964 3.491 0 56.095-56.095 146.554-57.029 203.771-2.09-.637.175-1.311.228-1.999.111l-34.032-5.779c-1.326-.228-2.618.675-2.846 2.02-.228 1.344.677 2.618 2.02 2.846 35.623 6.002 34.178 5.919 35.674 5.919 2.507 0 4.889-.98 6.711-2.801 2.218-2.218 3.189-5.262 2.665-8.356l-5.771-34.041c-.227-1.342-1.487-2.255-2.846-2.02-1.344.227-2.248 1.501-2.02 2.846l5.771 34.04c.089.527.057 1.043-.027 1.547-58.88-56.389-152.631-55.664-210.562 2.267z"/><path d="m251.274 430.813c79.275 0 143.77-64.495 143.77-143.772 0-74.215-56.527-135.469-128.785-142.988v-23.743h11.994c5.053 0 9.164-4.11 9.164-9.162v-13.39c0-5.053-4.111-9.162-9.164-9.162h-53.96c-5.053 0-9.162 4.11-9.162 9.162v13.389c0 5.053 4.11 9.162 9.162 9.162h11.994v23.744c-72.258 7.52-128.784 68.773-128.784 142.987.001 79.278 64.496 143.773 143.771 143.773zm-31.206-319.666v-13.389c0-2.33 1.895-4.225 4.225-4.225h53.96c2.33 0 4.227 1.895 4.227 4.225v13.389c0 2.33-1.896 4.225-4.227 4.225h-53.96c-2.33 0-4.225-1.894-4.225-4.225zm21.156 9.163h20.098v23.352c-3.324-.231-6.667-.39-10.048-.39-3.382 0-6.725.16-10.05.391zm10.05 27.898c76.552 0 138.833 62.281 138.833 138.833 0 76.554-62.281 138.835-138.833 138.835s-138.833-62.281-138.833-138.835c0-76.552 62.281-138.833 138.833-138.833z"/><path d="m251.274 407.8c66.586 0 120.757-54.173 120.757-120.759s-54.171-120.757-120.757-120.757-120.757 54.171-120.757 120.757 54.171 120.759 120.757 120.759zm-2.469-236.516v16.549c0 1.363 1.106 2.469 2.469 2.469s2.469-1.106 2.469-2.469v-16.549c61.901 1.306 111.983 51.388 113.289 113.289h-16.547c-1.363 0-2.469 1.106-2.469 2.469s1.106 2.469 2.469 2.469h16.547c-1.306 61.901-51.388 111.985-113.289 113.29v-16.549c0-1.363-1.106-2.469-2.469-2.469s-2.469 1.106-2.469 2.469v16.549c-61.901-1.306-111.983-51.39-113.289-113.29h16.547c1.363 0 2.469-1.106 2.469-2.469s-1.106-2.469-2.469-2.469h-16.547c1.306-61.901 51.389-111.983 113.289-113.289z"/><path d="m210.103 332.899h82.34c6.707 0 12.163-5.456 12.163-12.163v-82.314c0-6.707-5.456-12.163-12.163-12.163h-82.34c-6.707 0-12.163 5.456-12.163 12.163v82.314c0 6.706 5.457 12.163 12.163 12.163zm51.152-101.697v30.496l-8.198-6.176c-.439-.331-.963-.497-1.485-.497s-1.046.166-1.485.497l-8.198 6.176v-30.496zm-58.377 7.22c0-3.984 3.242-7.226 7.226-7.226h26.848v35.454c0 .935.529 1.792 1.368 2.21.836.416 1.839.323 2.586-.238l10.667-8.037 10.667 8.037c.737.555 1.738.66 2.586.238.839-.418 1.368-1.274 1.368-2.21v-35.454h26.251c3.984 0 7.226 3.242 7.226 7.226v82.314c0 3.984-3.242 7.226-7.226 7.226h-82.34c-3.984 0-7.226-3.242-7.226-7.226v-82.314z"/><path d="m213.345 309.093h19.991c1.363 0 2.469-1.106 2.469-2.469s-1.106-2.469-2.469-2.469h-19.991c-1.363 0-2.469 1.106-2.469 2.469 0 1.364 1.106 2.469 2.469 2.469z"/><path d="m213.345 319.972h35.573c1.363 0 2.469-1.106 2.469-2.469s-1.106-2.469-2.469-2.469h-35.573c-1.363 0-2.469 1.106-2.469 2.469s1.106 2.469 2.469 2.469z"/><path d="m219.362 294.222h61.588c2.785 0 5.05-2.264 5.05-5.048v-8.442c0-2.784-2.264-5.048-5.05-5.048h-61.588c-2.785 0-5.05 2.264-5.05 5.048v8.442c.001 2.784 2.265 5.048 5.05 5.048zm0-13.601h61.588c.063 0 .113.048.113.111l-.113 8.553-61.701-.111z"/></g></g><g id="Layer_1"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/pcb/industrial-solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/industrial-solutions.webp
new file mode 100644
index 0000000..593b214
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/industrial-solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/pcb/sustainability.svg b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/sustainability.svg
new file mode 100644
index 0000000..23c1ab4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/pcb/sustainability.svg
@@ -0,0 +1 @@
+<svg id="green_technology" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" data-name="green technology"><path d="m30 16c-1.30194 0-2.40161.83838-2.81573 2h-5.18427c-.31494 0-.61133.14844-.7998.40039l-3 4c-.12988.17285-.2002.38281-.2002.59961v3.18433c-1.1615.41406-2 1.51367-2 2.81567 0 1.6543 1.3457 3 3 3s3-1.3457 3-3c0-1.302-.8385-2.40161-2-2.81567v-2.85132l2.5-3.33301h4.68433c.41412 1.16162 1.51373 2 2.81567 2 1.6543 0 3-1.3457 3-3s-1.3457-3-3-3zm-11 14c-.55127 0-1-.44824-1-1s.44873-1 1-1 1 .44824 1 1-.44873 1-1 1zm11-10c-.55127 0-1-.44824-1-1s.44873-1 1-1 1 .44824 1 1-.44873 1-1 1zm16.19775-2.97461c-.46387-.09473-.93555.15527-1.12207.59277-.01904.04492-2.00732 4.46973-11.17529 5.38672-4.22754.42285-7.24463 1.99121-8.96777 4.66211-2.32172 3.59961-1.54852 8.08447-1.10168 9.86914l-1.23718.5498c-.17285.07715-.3208.20215-.42578.35938l-2.43683 3.65527c-.23529-.05957-.4776-.10059-.73114-.10059-1.6543 0-3 1.3457-3 3s1.3457 3 3 3 3-1.3457 3-3c0-.67261-.23047-1.2876-.60577-1.78857l2.27716-3.41553 1.42358-.63281c2.93152 1.45923 5.62219 2.19922 8.04761 2.19922 1.98877 0 3.80127-.49121 5.42529-1.47363 8.33643-5.04492 8.43213-21.20312 8.43213-21.88867 0-.47559-.33643-.87891-.80225-.97461zm-27.19775 28.97461c-.55127 0-1-.44824-1-1s.44873-1 1-1 1 .44824 1 1-.44873 1-1 1zm18.53027-7.82129c-2.64844 1.6001-6.00641 1.56348-10.00403-.09595l4.88-2.1687c.146-.06543.27441-.16406.37451-.28906l1.40192-1.75244c.26154.07471.5321.12744.81732.12744 1.6543 0 3-1.3457 3-3s-1.3457-3-3-3-3 1.3457-3 3c0 .63916.20441 1.22925.54626 1.71655l-1.17517 1.46899-5.67706 2.52271c-.37054-1.68921-.8374-5.24243.92511-7.96606 1.37744-2.12793 3.89404-3.38867 7.48047-3.74707 5.65479-.56543 8.91553-2.38281 10.73389-3.97168-.42578 4.79102-1.93848 13.91113-7.30322 17.15527zm-3.53027-7.17871c0-.55176.44873-1 1-1s1 .44824 1 1-.44873 1-1 1-1-.44824-1-1zm24 5c2.20557 0 4-1.79395 4-4s-1.79443-4-4-4h-6v-3h6c2.20557 0 4-1.79395 4-4s-1.79443-4-4-4h-6c0-2.75684-2.24316-5-5-5v-6c0-2.20605-1.79443-4-4-4s-4 1.79395-4 4v6h-3v-6c0-2.20605-1.79443-4-4-4s-4 1.79395-4 4v6h-3v-6c0-2.20605-1.79443-4-4-4s-4 1.79395-4 4v6c-2.75684 0-5 2.24316-5 5h-6c-2.20557 0-4 1.79395-4 4s1.79443 4 4 4h6v3h-6c-2.20557 0-4 1.79395-4 4s1.79443 4 4 4h6v3h-6c-2.20557 0-4 1.79395-4 4s1.79443 4 4 4h6c0 2.75684 2.24316 5 5 5v6c0 2.20605 1.79443 4 4 4s4-1.79395 4-4v-6h3v6c0 2.20605 1.79443 4 4 4s4-1.79395 4-4v-6h3v6c0 2.20605 1.79443 4 4 4s4-1.79395 4-4v-6c2.75684 0 5-2.24316 5-5h6c2.20557 0 4-1.79395 4-4s-1.79443-4-4-4h-6v-3zm-6-17h6c1.10303 0 2 .89746 2 2s-.89697 2-2 2h-6zm0 11h6c1.10303 0 2 .89746 2 2s-.89697 2-2 2h-6zm-40 15h-6c-1.10303 0-2-.89746-2-2s.89697-2 2-2h6zm0-11h-6c-1.10303 0-2-.89746-2-2s.89697-2 2-2h6zm0-11h-6c-1.10303 0-2-.89746-2-2s.89697-2 2-2h6zm29-17c0-1.10254.89697-2 2-2s2 .89746 2 2v6h-4zm-11 0c0-1.10254.89697-2 2-2s2 .89746 2 2v6h-4zm-11 0c0-1.10254.89697-2 2-2s2 .89746 2 2v6h-4zm4 52c0 1.10254-.89697 2-2 2s-2-.89746-2-2v-6h4zm11 0c0 1.10254-.89697 2-2 2s-2-.89746-2-2v-6h4zm11 0c0 1.10254-.89697 2-2 2s-2-.89746-2-2v-6h4zm2-8h-30c-1.6543 0-3-1.3457-3-3v-30c0-1.6543 1.3457-3 3-3h30c1.6543 0 3 1.3457 3 3v20h-5c-.32275 0-.62598.15625-.81396.41895l-3.3642 4.70996c-.26288-.07568-.53497-.12891-.82184-.12891-1.6543 0-3 1.3457-3 3s1.3457 3 3 3 3-1.3457 3-3c0-.63867-.2041-1.22852-.54559-1.71558l3.06024-4.28442h4.48535v8c0 1.6543-1.3457 3-3 3zm-6-5c0 .55176-.44873 1-1 1s-1-.44824-1-1 .44873-1 1-1 1 .44824 1 1zm17-4c1.10303 0 2 .89746 2 2s-.89697 2-2 2h-6v-4z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/quantam/3d-tel.webp b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/3d-tel.webp
new file mode 100644
index 0000000..2451145
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/3d-tel.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/quantam/hybrid-computing.svg b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/hybrid-computing.svg
new file mode 100644
index 0000000..63ab60c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/hybrid-computing.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 66 66" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m53.8 39.3h-41.6c-6.1 0-11.2-5-11.2-11.2 0-6 4.7-10.9 10.6-11.2.5-5.4 5-9.6 10.5-9.6 2.8 0 5.5 1.1 7.4 3 1.7-5.4 6.8-9.3 12.7-9.3 7.2 0 13.1 5.9 13.1 13.1 0 1-.1 2-.3 2.9 5.6.7 9.9 5.4 9.9 11.1.1 6.2-5 11.2-11.1 11.2zm-41.6-20.3c-5 0-9.2 4.1-9.2 9.1s4.1 9.2 9.2 9.2h41.6c5.1 0 9.2-4.1 9.2-9.2s-4.2-9.1-9.2-9.1c-.3 0-.6-.2-.8-.4s-.3-.6-.2-.9c.4-1.1.6-2.3.6-3.5 0-6.2-5-11.2-11.2-11.2-5.6 0-10.3 4.2-11 9.7 0 .3-.2.6-.5.7-.3.2-.6.2-.9.1-.2-.1-.4-.2-.5-.4-1.6-2.3-4.3-3.7-7.1-3.7-4.4 0-8.1 3.4-8.5 7.7.6.1 1.1.2 1.7.3.5.2.8.7.7 1.2-.2.5-.7.8-1.2.7-1-.2-1.8-.3-2.7-.3z"/></g><g><g><path d="m37.2 32.5h-8.4c-1.6 0-3-1.3-3-3v-8.4c0-1.6 1.3-3 3-3h8.4c1.6 0 3 1.3 3 3v8.4c0 1.6-1.4 3-3 3zm-8.4-12.4c-.5 0-1 .4-1 1v8.4c0 .5.4 1 1 1h8.4c.5 0 1-.4 1-1v-8.4c0-.5-.4-1-1-1z"/></g><g><path d="m34.3 28.2h-2.6c-.9 0-1.6-.7-1.6-1.6v-2.6c0-.9.7-1.6 1.6-1.6h2.6c.9 0 1.6.7 1.6 1.6v2.6c0 .9-.7 1.6-1.6 1.6zm-2.2-2h1.9v-1.9h-1.9z"/></g><g><path d="m29.4 20.1c-.6 0-1-.4-1-1v-2.1c0-.6.4-1 1-1s1 .4 1 1v2.1c0 .5-.5 1-1 1z"/></g><g><path d="m33 20.1c-.6 0-1-.4-1-1v-2.1c0-.6.4-1 1-1s1 .4 1 1v2.1c0 .5-.4 1-1 1z"/></g><g><path d="m36.6 20.1c-.6 0-1-.4-1-1v-2.1c0-.6.4-1 1-1s1 .4 1 1v2.1c0 .5-.4 1-1 1z"/></g><g><path d="m29.4 34.5c-.6 0-1-.4-1-1v-2.1c0-.6.4-1 1-1s1 .4 1 1v2.1c0 .6-.5 1-1 1z"/></g><g><path d="m36.6 34.5c-.6 0-1-.4-1-1v-2.1c0-.6.4-1 1-1s1 .4 1 1v2.1c0 .6-.4 1-1 1z"/></g><g><path d="m33 34.5c-.6 0-1-.4-1-1v-2.1c0-.6.4-1 1-1s1 .4 1 1v2.1c0 .6-.4 1-1 1z"/></g><g><path d="m41.3 22.6h-2.1c-.6 0-1-.4-1-1s.4-1 1-1h2.1c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m41.3 26.3h-2.1c-.6 0-1-.4-1-1s.4-1 1-1h2.1c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m41.3 29.9h-2.1c-.6 0-1-.4-1-1s.4-1 1-1h2.1c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m26.8 22.6h-2.1c-.6 0-1-.4-1-1s.4-1 1-1h2.1c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m26.8 26.3h-2.1c-.6 0-1-.4-1-1s.4-1 1-1h2.1c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m26.8 29.9h-2.1c-.6 0-1-.4-1-1s.4-1 1-1h2.1c.6 0 1 .4 1 1s-.4 1-1 1z"/></g></g><g><path d="m11.3 51.4c-.6 0-1-.4-1-1v-3.4c0-1.9 1.5-3.4 3.4-3.4h16.2c.6 0 1 .4 1 1s-.4 1-1 1h-16.2c-.8 0-1.4.6-1.4 1.4v3.4c0 .5-.4 1-1 1z"/></g><g><path d="m54.7 51.4c-.6 0-1-.4-1-1v-3.4c0-.8-.6-1.4-1.4-1.4h-16.2c-.6 0-1-.4-1-1s.4-1 1-1h16.2c1.9 0 3.4 1.5 3.4 3.4v3.4c0 .5-.5 1-1 1z"/></g><g><path d="m33 42.5c-.6 0-1-.4-1-1v-3.2c0-.6.4-1 1-1s1 .4 1 1v3.2c0 .6-.4 1-1 1z"/></g><g><path d="m33 51.8c-.6 0-1-.4-1-1v-3.1c0-.6.4-1 1-1s1 .4 1 1v3.1c0 .5-.4 1-1 1z"/></g><g><path d="m33 48.7c-2.3 0-4.1-1.8-4.1-4.1s1.8-4.1 4.1-4.1 4.1 1.8 4.1 4.1-1.8 4.1-4.1 4.1zm0-6.2c-1.2 0-2.1.9-2.1 2.1s.9 2.1 2.1 2.1 2.1-.9 2.1-2.1-.9-2.1-2.1-2.1z"/></g><g><path d="m18.6 61.9c-.6 0-1-.4-1-1v-9.2l-12.7.1.1 9.1c0 .6-.4 1-1 1s-1-.4-1-1v-9.2c0-1.1.9-1.9 1.9-1.9h12.7c1.1 0 1.9.9 1.9 1.9v9.2c.1.6-.3 1-.9 1z"/></g><g><path d="m19.2 65h-15.8c-.7 0-1.4-.4-1.6-1.1l-.6-1.6c-.2-.5-.2-1.1.1-1.6s.9-.8 1.4-.8h17.1c.6 0 1.1.3 1.4.8s.4 1.1.2 1.6l-.6 1.6c-.2.7-.8 1.1-1.6 1.1zm-15.6-2h15.5l.4-1.1h-16.3z"/></g><g><path d="m40.3 61.9c-.6 0-1-.4-1-1v-9.2l-12.7.1.1 9.2c0 .6-.4 1-1 1s-1-.4-1-1v-9.2c0-1.1.9-1.9 1.9-1.9h12.7c1.1 0 1.9.9 1.9 1.9v9.2c.1.5-.3.9-.9.9z"/></g><g><path d="m40.9 65h-15.8c-.7 0-1.4-.4-1.6-1.1l-.6-1.6c-.2-.5-.1-1.1.2-1.6s.9-.8 1.4-.8h17.1c.6 0 1.1.3 1.4.8s.4 1.1.2 1.6l-.6 1.6c-.3.7-1 1.1-1.7 1.1zm-15.7-2h15.5l.4-1.1h-16.3z"/></g><g><path d="m62 61.9c-.6 0-1-.4-1-1v-9.2l-12.7.1.1 9.2c0 .6-.4 1-1 1s-1-.4-1-1v-9.2c0-1.1.9-1.9 1.9-1.9h12.7c1.1 0 1.9.9 1.9 1.9v9.2c.1.5-.4.9-.9.9z"/></g><g><path d="m62.6 65h-15.8c-.7 0-1.4-.4-1.6-1.1l-.6-1.6c-.2-.5-.1-1.1.2-1.6s.9-.8 1.4-.8h17.1c.6 0 1.1.3 1.4.8s.4 1.1.2 1.6l-.6 1.6c-.3.7-1 1.1-1.7 1.1zm-15.7-2h15.5l.4-1.1h-16.3z"/></g><g><path d="m14.9 56.9h-1.6c-.6 0-1-.4-1-1s.4-1 1-1h1.6c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m9.3 56.9h-1.6c-.6 0-1-.4-1-1s.4-1 1-1h1.6c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m12.5 58.9h-2.4c-1 0-1.8-.8-1.8-1.8v-2.4c0-1 .8-1.8 1.8-1.8h2.4c1 0 1.8.8 1.8 1.8v2.4c0 1-.8 1.8-1.8 1.8zm-2.2-2h2v-2h-2z"/></g><g><path d="m36.6 56.9h-1.6c-.6 0-1-.4-1-1s.4-1 1-1h1.6c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m31 56.9h-1.6c-.6 0-1-.4-1-1s.4-1 1-1h1.6c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m34.2 58.9h-2.4c-1 0-1.8-.8-1.8-1.8v-2.4c0-1 .8-1.8 1.8-1.8h2.4c1 0 1.8.8 1.8 1.8v2.4c0 1-.8 1.8-1.8 1.8zm-2.2-2h2v-2h-2z"/></g><g><path d="m58.3 56.9h-1.6c-.6 0-1-.4-1-1s.4-1 1-1h1.6c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m52.7 56.9h-1.6c-.6 0-1-.4-1-1s.4-1 1-1h1.6c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m55.9 58.9h-2.4c-1 0-1.8-.8-1.8-1.8v-2.4c0-1 .8-1.8 1.8-1.8h2.4c1 0 1.8.8 1.8 1.8v2.4c0 1-.8 1.8-1.8 1.8zm-2.2-2h2v-2h-2z"/></g><g><path d="m48.7 13.7h-2.2c-.6 0-1-.4-1-1s.4-1 1-1h1.8l3.7-3.8c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-4 4c-.2.3-.5.4-.7.4z"/></g><g><path d="m43 16.3c-2 0-3.7-1.6-3.7-3.7s1.7-3.6 3.7-3.6 3.7 1.7 3.7 3.7-1.6 3.6-3.7 3.6zm0-5.3c-.9 0-1.7.8-1.7 1.7s.8 1.7 1.7 1.7 1.7-.8 1.7-1.7c0-1-.7-1.7-1.7-1.7z"/></g><g><path d="m58.2 28.2h-5.2c-.6 0-1-.4-1-1s.4-1 1-1h4.8l3.7-3.7c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-4 4c-.2.2-.4.3-.7.3z"/></g><g><path d="m49.6 30.9c-2 0-3.7-1.7-3.7-3.7s1.6-3.7 3.7-3.7 3.7 1.6 3.7 3.7-1.7 3.7-3.7 3.7zm0-5.4c-.9 0-1.7.8-1.7 1.7s.8 1.7 1.7 1.7 1.7-.8 1.7-1.7-.8-1.7-1.7-1.7z"/></g><g><path d="m13.9 25.5h-3.2c-.3 0-.5-.1-.7-.3l-4-4c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l3.7 3.7h2.8c.6 0 1 .4 1 1s-.5 1-1 1z"/></g><g><path d="m17.2 28.2c-2 0-3.7-1.6-3.7-3.7s1.6-3.7 3.7-3.7 3.7 1.6 3.7 3.7-1.6 3.7-3.7 3.7zm0-5.4c-.9 0-1.7.8-1.7 1.7s.8 1.7 1.7 1.7 1.7-.8 1.7-1.7-.7-1.7-1.7-1.7z"/></g><g><path d="m7.9 32.4h-2.2c-.3 0-.5-.1-.7-.3l-3.7-3.7c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l3.4 3.4h1.8c.6 0 1 .4 1 1s-.4 1-1 1z"/></g><g><path d="m11.3 35c-2 0-3.7-1.6-3.7-3.7s1.6-3.7 3.7-3.7 3.7 1.6 3.7 3.7-1.6 3.7-3.7 3.7zm0-5.3c-.9 0-1.7.8-1.7 1.7s.8 1.7 1.7 1.7 1.7-.8 1.7-1.7-.7-1.7-1.7-1.7z"/></g></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/quantam/lb-soil-plant-wind-renewable.webp b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/lb-soil-plant-wind-renewable.webp
new file mode 100644
index 0000000..bda69e5
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/lb-soil-plant-wind-renewable.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-algorithms.svg b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-algorithms.svg
new file mode 100644
index 0000000..6a3d583
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-algorithms.svg
@@ -0,0 +1 @@
+<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m256 472c5.511719 0 10-4.488281 10-10s-4.488281-10-10-10-10 4.488281-10 10 4.488281 10 10 10zm0 0"/><path d="m472 413.007812v-52.015624c22.796875-4.644532 40-24.84375 40-48.992188 0-27.570312-22.429688-50-50-50-24.144531 0-44.347656 17.203125-48.992188 40h-28.015624c-3.984376-19.5625-19.429688-35.007812-38.992188-38.992188v-32.015624c22.796875-4.644532 40-24.84375 40-48.992188 0-27.570312-22.429688-50-50-50-16.339844 0-30.871094 7.878906-40 20.035156-7.214844-9.609375-17.808594-16.542968-30-19.027344v-34.015624c22.796875-4.644532 40-24.84375 40-48.992188 0-27.570312-22.429688-50-50-50s-50 22.429688-50 50c0 24.144531 17.203125 44.347656 40 48.992188v34.015624c-12.191406 2.484376-22.785156 9.417969-30 19.027344-9.128906-12.15625-23.660156-20.035156-40-20.035156-27.570312 0-50 22.429688-50 50 0 24.144531 17.203125 44.347656 40 48.992188v32.015624c-19.5625 3.984376-35.007812 19.429688-38.992188 38.992188h-28.015624c-4.644532-22.796875-24.847657-40-48.992188-40-27.570312 0-50 22.429688-50 50 0 24.144531 17.203125 44.347656 40 48.992188v52.015624c-22.796875 4.644532-40 24.847657-40 48.992188 0 27.570312 22.429688 50 50 50 24.144531 0 44.347656-17.203125 48.992188-40h57.007812v30c0 5.523438 4.476562 10 10 10h180c5.523438 0 10-4.476562 10-10v-30h57.007812c4.644532 22.796875 24.84375 40 48.992188 40 27.570312 0 50-22.429688 50-50 0-24.144531-17.203125-44.347656-40-48.992188zm-10-131.007812c16.542969 0 30 13.457031 30 30s-13.457031 30-30 30-30-13.457031-30-30 13.457031-30 30-30zm-96 30c0 16.542969-13.457031 30-30 30s-30-13.457031-30-30 13.457031-30 30-30 30 13.457031 30 30zm-30-160c16.542969 0 30 13.457031 30 30s-13.457031 30-30 30-30-13.457031-30-30 13.457031-30 30-30zm-110-102c0-16.542969 13.457031-30 30-30s30 13.457031 30 30-13.457031 30-30 30-30-13.457031-30-30zm30 102c16.542969 0 30 13.457031 30 30s-13.457031 30-30 30-30-13.457031-30-30 13.457031-30 30-30zm-40 59.964844c9.128906 12.15625 23.660156 20.035156 40 20.035156s30.871094-7.878906 40-20.035156c7.214844 9.609375 17.808594 16.542968 30 19.027344v32.015624c-19.5625 3.984376-35.007812 19.429688-38.992188 38.992188h-62.015624c-3.984376-19.5625-19.429688-35.007812-38.992188-38.992188v-32.015624c12.191406-2.484376 22.785156-9.417969 30-19.027344zm-70-29.964844c0-16.542969 13.457031-30 30-30s30 13.457031 30 30-13.457031 30-30 30-30-13.457031-30-30zm30 100c16.542969 0 30 13.457031 30 30s-13.457031 30-30 30-30-13.457031-30-30 13.457031-30 30-30zm-156 30c0-16.542969 13.457031-30 30-30s30 13.457031 30 30-13.457031 30-30 30-30-13.457031-30-30zm30 180c-16.542969 0-30-13.457031-30-30s13.457031-30 30-30 30 13.457031 30 30-13.457031 30-30 30zm286-40h-40c-5.511719 0-10 4.488281-10 10s4.488281 10 10 10h40v20h-160v-20h40c5.511719 0 10-4.488281 10-10s-4.488281-10-10-10h-40v-20h160zm77.007812 0h-57.007812v-30c0-5.523438-4.476562-10-10-10h-180c-5.523438 0-10 4.476562-10 10v30h-57.007812c-3.984376-19.5625-19.429688-34.996094-38.992188-38.984375v-52.03125c19.5625-3.988281 35.007812-19.421875 38.992188-38.984375h28.015624c4.644532 22.796875 24.84375 40 48.992188 40s44.347656-17.203125 48.992188-40h62.015624c4.644532 22.796875 24.84375 40 48.992188 40s44.347656-17.203125 48.992188-40h28.015624c3.984376 19.5625 19.429688 35.007812 38.992188 38.996094v52.011718c-19.5625 3.984376-35.007812 19.429688-38.992188 38.992188zm48.992188 40c-16.542969 0-30-13.457031-30-30s13.457031-30 30-30 30 13.457031 30 30-13.457031 30-30 30zm0 0"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-ml.svg b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-ml.svg
new file mode 100644
index 0000000..d445e26
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-ml.svg
@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="512" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_x0020_1"><g id="_447249616"><g><path d="m281 474c-1 0-3-1-4-2-2-2-1-5 1-7 32-29 54-115 54-209s-22-180-54-209c-2-2-3-5-1-7s5-3 7-1c35 32 58 119 58 217s-23 185-58 217c-1 1-2 1-3 1zm-50 0c-1 0-2 0-3-1-35-32-58-119-58-217s23-185 58-217c2-2 5-1 7 1s1 5-1 7c-32 29-54 115-54 209s22 180 54 209c2 2 3 5 1 7-1 1-3 2-4 2z"/></g><g><path d="m256 64c-18 0-32-14-32-32s14-32 32-32 32 14 32 32-14 32-32 32zm0-54c-12 0-22 10-22 22s10 22 22 22 22-10 22-22-10-22-22-22z"/></g><g><path d="m256 512c-18 0-32-14-32-32s14-32 32-32 32 14 32 32-14 32-32 32zm0-54c-12 0-22 10-22 22s10 22 22 22 22-10 22-22-10-22-22-22z"/></g><g><path d="m127 429c-1 0-3 0-4 0-3 0-5-3-5-5 0-3 3-5 5-5h5c43 0 117-44 181-110 68-66 113-143 110-186 0-2 2-5 5-5 2 0 5 2 5 5 1 22-8 52-29 87-20 36-49 72-84 106-34 35-70 64-106 84-32 19-61 29-83 29zm-39-35c-3 0-5-2-5-5-2-22 8-53 28-87 21-36 50-72 85-107 34-34 70-63 106-84 34-20 65-30 87-28 3 0 5 3 5 5 0 3-3 5-5 5-43-3-120 42-186 109-68 67-113 144-110 187 0 2-2 5-5 5z"/></g><g><path d="m414 130c-8 0-16-3-22-9 0 0-1 0-1-1-11-12-11-33 1-44 6-7 14-10 23-10 8 0 16 3 22 10 6 5 9 13 9 21 0 9-3 17-9 24-6 6-15 9-23 9zm-16-16c9 8 23 8 31 0 5-5 7-11 7-17 0-5-2-10-6-14-1 0-1 0-1 0-4-5-9-7-14-7-6 0-12 2-16 7-9 8-9 21-1 31z"/></g><g><path d="m98 446c-1 0-1 0-1 0-8 0-16-3-22-10-6-5-9-13-9-21 0-9 3-17 9-24 12-11 32-11 45 0 0 0 1 0 1 1 11 12 11 33-1 44-6 7-14 10-22 10zm0-54c-6 0-11 2-15 6-5 5-7 11-7 17 0 5 2 10 6 14h1c3 5 9 7 14 7 6 0 12-2 16-7 8-8 8-22 0-31-4-4-10-6-15-6z"/></g><g><path d="m256 342c-98 0-185-23-217-58-2-2-1-5 1-7s5-1 7 1c29 32 115 54 209 54s180-22 209-54c2-2 5-3 7-1s3 5 1 7c-32 35-119 58-217 58zm213-106c-1 0-3-1-4-2-29-32-115-54-209-54s-180 22-209 54c-2 2-5 3-7 1s-3-5-1-7c32-35 119-58 217-58s185 23 217 58c2 2 1 5-1 7-1 1-2 1-3 1z"/></g><g><path d="m480 288c-18 0-32-14-32-32s14-32 32-32 32 14 32 32-14 32-32 32zm0-54c-12 0-22 10-22 22s10 22 22 22 22-10 22-22-10-22-22-22z"/></g><g><path d="m32 288c-18 0-32-14-32-32s14-32 32-32 32 14 32 32-14 32-32 32zm0-54c-12 0-22 10-22 22s10 22 22 22 22-10 22-22-10-22-22-22z"/></g><g><path d="m385 429c-22 0-51-10-83-28-36-21-72-50-107-85-34-34-63-70-84-106-20-34-30-65-28-87 0-3 3-5 5-5 3 0 5 3 5 5-3 43 42 120 109 186 67 68 144 113 187 110 2 0 5 2 5 5 0 2-2 5-5 5-1 0-3 0-4 0zm39-35c-3 0-5-3-5-5 3-43-42-120-110-186-66-68-143-113-186-110-2 0-5-2-5-5 0-2 2-5 5-5 22-1 52 8 87 29 36 20 72 49 106 84 35 34 64 70 84 106 21 35 30 65 29 87 0 3-2 5-5 5z"/></g><g><path d="m414 446c-8 0-16-3-23-10-11-11-11-32 0-44 0-1 0-1 1-1 12-11 33-11 44 0 7 7 10 15 10 24 0 8-3 16-10 21-5 7-13 10-21 10 0 0 0 0-1 0zm-16-48c-8 9-8 23 0 31 5 5 11 7 17 7 5 0 10-2 14-6 0-1 0-1 0-1 5-4 7-9 7-14 0-6-2-12-7-16-8-9-21-9-31-1z"/></g><g><path d="m98 130c-9 0-17-3-23-9-6-7-9-15-9-24 0-8 3-16 9-21 6-6 14-10 22-10 9 0 17 3 23 10 12 11 12 32 1 45h-1c-6 6-14 9-22 9zm0-54c-1 0-1 0-1 0-5 0-11 2-14 6 0 1 0 1-1 1-4 4-6 9-6 14 0 6 2 12 7 16 8 9 22 8 31 0 8-9 8-22 0-30-5-5-10-7-16-7z"/></g><g><path d="m256 308c-29 0-52-23-52-52s23-52 52-52 52 23 52 52-23 52-52 52zm0-94c-23 0-42 19-42 42s19 42 42 42 42-19 42-42-19-42-42-42z"/></g><g><path d="m256 282c-3 0-5-2-5-5v-42c0-3 2-5 5-5s5 2 5 5v42c0 3-2 5-5 5z"/></g><g><path d="m277 261h-42c-3 0-5-2-5-5s2-5 5-5h42c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m266 37h-20c-3 0-5-2-5-5s2-5 5-5h20c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m425 103h-21c-3 0-5-2-5-5s2-5 5-5h21c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m108 103h-21c-3 0-5-2-5-5s2-5 5-5h21c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m42 261h-20c-3 0-5-2-5-5s2-5 5-5h20c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m108 419h-21c-3 0-5-2-5-5s2-5 5-5h21c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m266 485h-20c-3 0-5-2-5-5s2-5 5-5h20c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m425 419h-21c-3 0-5-2-5-5s2-5 5-5h21c3 0 5 2 5 5s-2 5-5 5z"/></g><g><path d="m490 261h-20c-3 0-5-2-5-5s2-5 5-5h20c3 0 5 2 5 5s-2 5-5 5z"/></g></g></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-security.svg b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-security.svg
new file mode 100644
index 0000000..5e8202b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/quantum-security.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m54.56 42.77a25 25 0 0 0 0-21.54l-1.8.86a23 23 0 0 1 0 19.82z"/><path d="m9.32 42.51 1.82-.84a22.92 22.92 0 0 1 0-19.34l-1.82-.84a25 25 0 0 0 0 21z"/><path d="m55.76 44.85 1.76.94a29.06 29.06 0 0 0 0-27.58l-1.76.94a27.1 27.1 0 0 1 0 25.7z"/><path d="m8.12 44.61a27 27 0 0 1 0-25.22l-1.76-.94a29 29 0 0 0 0 27.1z"/><path d="m42.77 9.44a25 25 0 0 0 -21.54 0l.86 1.8a23 23 0 0 1 19.82 0z"/><path d="m21.49 54.68a25 25 0 0 0 21 0l-.84-1.82a22.92 22.92 0 0 1 -19.34 0z"/><path d="m32 5a27.2 27.2 0 0 1 12.85 3.24l.94-1.76a29.06 29.06 0 0 0 -27.58 0l.94 1.76a27.2 27.2 0 0 1 12.85-3.24z"/><path d="m45.55 57.64-.94-1.76a27 27 0 0 1 -25.22 0l-.94 1.76a29 29 0 0 0 27.1 0z"/><path d="m27 41h10a1 1 0 0 0 1-1v-8a1 1 0 0 0 -1-1v-3a5 5 0 0 0 -10 0v3a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1zm6-4h-2v-2h2zm-4-9a3 3 0 1 1 6 0v3h-6z"/><path d="m15.73 43.69a22.47 22.47 0 0 1 4.82-3.69 14.21 14.21 0 0 0 3.88 3.73c1.63 3.42 4 5.73 6.59 6.2v-3.93h1s.67 0 1 0v4c2.63-.47 5-2.78 6.59-6.2a14.21 14.21 0 0 0 3.84-3.8 22.47 22.47 0 0 1 4.82 3.66 20 20 0 0 0 3.73-10.66h-6c0-.33 0-.66 0-1s0-.67 0-1h6a20 20 0 0 0 -3.73-10.69 22.47 22.47 0 0 1 -4.82 3.69 14.21 14.21 0 0 0 -3.88-3.73c-1.63-3.42-4-5.73-6.59-6.2v4c-.33 0-.66-.05-1-.05s-.67 0-1 .05v-4c-2.63.47-5 2.78-6.59 6.2a14.21 14.21 0 0 0 -3.84 3.73 22.47 22.47 0 0 1 -4.82-3.66 20 20 0 0 0 -3.73 10.66h6.05c0 .33-.05.66-.05 1s0 .67.05 1h-6.05a20 20 0 0 0 3.73 10.69zm16.27-23.82a12.13 12.13 0 1 1 -12.13 12.13 12.14 12.14 0 0 1 12.13-12.13z"/><path d="m31 12a20 20 0 0 0 -14 6.73 20.69 20.69 0 0 0 4.46 3.46c1.89-5.7 5.38-9.61 9.54-10.19z"/><path d="m42.54 22.19a20.69 20.69 0 0 0 4.46-3.46 20 20 0 0 0 -14-6.73c4.16.58 7.65 4.49 9.54 10.19z"/><path d="m21.46 41.81a20.38 20.38 0 0 0 -4.46 3.46 20 20 0 0 0 14 6.73c-4.16-.58-7.65-4.49-9.54-10.19z"/><path d="m47 45.27a20.38 20.38 0 0 0 -4.46-3.46c-1.89 5.7-5.38 9.61-9.54 10.19a20 20 0 0 0 14-6.73z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/quantam/retro-fut-space.webp b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/retro-fut-space.webp
new file mode 100644
index 0000000..96f4bf7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/quantam/retro-fut-space.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/agriculture-tech.webp b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/agriculture-tech.webp
new file mode 100644
index 0000000..ef9ad06
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/agriculture-tech.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/innovation-solutions.svg b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/innovation-solutions.svg
new file mode 100644
index 0000000..90f20df
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/innovation-solutions.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 66 66" height="512" viewBox="0 0 66 66" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m64.29 47.95c-.93-1.79-3-2.63-4.91-1.99l-13.45 4.47c.06-.28.1-.57.1-.87 0-1.93-1.57-3.5-3.5-3.5h-9.13c-.97 0-1.91-.3-2.7-.87l-9.44-6.8c-1.05-.75-2.28-1.15-3.57-1.15h-3.45v-.55c0-2.01-1.63-3.64-3.64-3.64h-5.7c-2.01 0-3.64 1.63-3.64 3.64v1.83c0 .41.34.75.75.75s.75-.34.75-.75v-1.83c0-1.18.96-2.14 2.14-2.14h5.69c1.18 0 2.14.96 2.14 2.14v1.3 17.7 2.12c0 1.18-.96 2.14-2.14 2.14h-5.69c-1.18 0-2.14-.96-2.14-2.14v-16.31c0-.41-.34-.75-.75-.75s-.75.34-.75.75v16.3c0 2.01 1.63 3.64 3.64 3.64h5.69c2.01 0 3.64-1.63 3.64-3.64v-1.37h1.93c.7 0 1.39.19 2 .54l11.26 6.54c.85.49 1.8.74 2.75.74.64 0 1.27-.11 1.89-.34l21.06-7.71c.39-.14.59-.57.45-.96s-.57-.59-.96-.45l-21.06 7.71c-1.11.41-2.34.3-3.37-.3l-11.26-6.54c-.83-.49-1.79-.74-2.75-.74h-1.93v-16.2h3.45c.97 0 1.91.3 2.7.87l9.44 6.8c1.05.75 2.28 1.15 3.57 1.15h9.12c1.1 0 2 .9 2 2 0 .57-.17 1.2-.6 1.59-.02.01-.04.02-.05.04-.25.21-.58.35-1.02.35l-12.15.02c-.42 0-.75.34-.75.75s.34.75.75.75l12.15-.02c.74 0 1.39-.23 1.9-.63l15.09-5.01c1.21-.4 2.52.13 3.1 1.26.34.66.38 1.43.12 2.12-.27.69-.82 1.23-1.51 1.49l-4.23 1.55c-.39.14-.59.57-.45.96.11.3.4.49.7.49.09 0 .17-.01.26-.05l4.23-1.55c1.1-.4 1.97-1.26 2.39-2.35s.38-2.31-.16-3.35z"/><path d="m43.28 11.07v3.19c0 .41.34.75.75.75h4.54c.28 0 .54-.16.67-.42.13-.25.1-.56-.07-.79-.09-.11-.19-.3-.19-.55 0-.49.4-.89.89-.89s.89.4.89.89c0 .2-.06.39-.18.54-.17.23-.21.53-.08.79s.39.42.67.42h3.69c.39 0 .72-.3.75-.69.03-.46.05-.91.03-1.33-.04-1.21-.27-2.39-.67-3.49-1.62-4.56-5.95-7.67-10.77-7.74h-.17c-.41 0-.75.34-.75.75v3.82c-1.38-.16-2.66.97-2.66 2.38s1.28 2.52 2.66 2.37zm-.27-3.26c.25 0 .44.11.56.2.23.18.53.21.79.08s.42-.39.42-.67v-4.14c3.95.3 7.43 2.93 8.78 6.72.35.96.55 1.98.58 3.03 0 .16.01.32 0 .48h-1.9c.01-.08.01-.17.01-.25 0-1.32-1.07-2.39-2.39-2.39s-2.39 1.07-2.39 2.39c0 .08 0 .17.01.25h-2.71v-3.52c0-.29-.16-.55-.42-.67-.26-.13-.57-.09-.79.08-.16.13-.35.19-.56.19-.49 0-.89-.4-.89-.89.01-.49.41-.89.9-.89z"/><path d="m30.33 27.07c1.4 1.22 2.32 2.89 2.59 4.68h-.92c-.41 0-.75.34-.75.75v4c0 .41.34.75.75.75h1.33c.36 2.26 2.31 4 4.67 4s4.31-1.74 4.67-4h1.33c.41 0 .75-.34.75-.75v-4c0-.41-.34-.75-.75-.75h-.95c.08-.56.2-1.12.41-1.64.05-.14.11-.28.18-.42.46-1 1.12-1.88 1.96-2.61 2.3-2.01 3.7-4.78 3.95-7.81.02-.21-.05-.42-.2-.57-.14-.15-.34-.24-.55-.24h-2.6c.01-.08.01-.17.01-.25 0-1.32-1.07-2.39-2.39-2.39s-2.39 1.07-2.39 2.39c0 .08 0 .17.01.25h-2.72v-3.53c0-.29-.17-.55-.42-.68-.26-.12-.57-.09-.79.09-.16.13-.35.19-.55.19-.49 0-.89-.4-.89-.89s.4-.89.89-.89c.2 0 .39.07.55.19.22.18.53.21.79.09s.42-.39.42-.68v-4.9c0-.41-.34-.75-.75-.75-1.54 0-3.04.3-4.45.88-.83.34-1.62.79-2.35 1.31-.33.24-.41.71-.17 1.05s.71.41 1.05.17c.64-.46 1.32-.84 2.04-1.14.99-.41 2.04-.66 3.12-.74v3.05c-1.38-.16-2.66.97-2.66 2.38s1.27 2.54 2.66 2.38v3.19c0 .41.34.75.75.75h4.55c.29 0 .55-.16.67-.42s.09-.56-.08-.79c-.12-.15-.18-.34-.18-.54 0-.49.4-.89.89-.89s.89.4.89.89c0 .25-.1.43-.19.55-.17.23-.2.53-.07.79.13.25.39.42.67.42h2.84c-.38 2.32-1.54 4.42-3.34 5.99-1 .87-1.79 1.92-2.33 3.1-.08.17-.16.35-.23.52-.27.69-.46 1.42-.55 2.18h-7.08c-.28-2.22-1.39-4.3-3.11-5.8-2.2-1.93-3.46-4.71-3.46-7.63 0-2.34.77-4.54 2.24-6.35.26-.32.21-.79-.11-1.05s-.79-.21-1.05.11c-1.66 2.06-2.57 4.65-2.57 7.29-.01 3.32 1.44 6.51 3.97 8.72zm7.67 12.68c-1.53 0-2.82-1.07-3.16-2.5h6.33c-.35 1.43-1.63 2.5-3.17 2.5zm4.2-6.5h1.05v2.5h-1.25-8-1.25v-2.5h.99z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/manufacturing-industrial-engineering.webp b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/manufacturing-industrial-engineering.webp
new file mode 100644
index 0000000..1a05129
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/manufacturing-industrial-engineering.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/rapid-prototyping.svg b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/rapid-prototyping.svg
new file mode 100644
index 0000000..6b505cb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/rapid-prototyping.svg
@@ -0,0 +1 @@
+<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><g id="_20-app_developer" fill="none" stroke="#000" stroke-linejoin="round" stroke-width="2" data-name="20-app developer"><path d="m29 26v-23a2 2 0 0 0 -2-2h-24a2 2 0 0 0 -2 2v42a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2v-9"/><path d="m1 9h28"/><path d="m12 5h6"/><path d="m29 39h-28"/><path d="m18 43h-6"/><circle cx="40" cy="8" r="7"/><path d="m37 14v16h6v-16"/><circle cx="40" cy="8" r="2"/><path d="m40 10v5"/><path d="m37 19h6"/><path d="m37 30 3 3 3-3"/><path d="m40 33h-27"/><path d="m11 33h-2"/><path d="m34 29h-17"/><path d="m15 29h-2"/><path d="m5 13h10v12h-10z"/><path d="m18 13h8"/><path d="m18 17h8"/><path d="m18 21h8"/><path d="m18 25h8"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/strategic-rd.svg b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/strategic-rd.svg
new file mode 100644
index 0000000..7fdabba
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/strategic-rd.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 64 64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><g><path d="m19.4 16.4c5.7-4.7 15.8-7.2 25.8.7h-4.7c-.3 0-.5.2-.5.5s.2.5.5.5h6 .2s.1-.1.1-.1 0-.1.1-.1c0 0 0 0 0-.1v-.1l-2-5.8c-.1-.3-.4-.4-.6-.3-.3.1-.4.4-.3.6l1.4 4.1c-10.4-8-20.8-5.3-26.8-.5-6.5 5.3-10.8 15.7-5 26.2.1.2.3.3.4.3s.2 0 .2-.1c.2-.1.3-.4.2-.7-5.3-10.1-1.2-20 5-25.1z"/><path d="m49.5 21.8c-.2.1-.3.4-.2.7 5.6 9.9 1.6 19.9-4.5 25-5.7 4.7-15.8 7.3-25.8-.5h4.7c.3 0 .5-.2.5-.5s-.2-.5-.5-.5l-6 .1c-.1 0-.1 0-.2.1s-.1.1-.1.1 0 .1-.1.1v.1.1l2 5.7c.1.2.3.3.5.3h.2c.3-.1.4-.4.3-.6l-1.6-4c4.7 3.6 9.4 5 13.7 5 5.2 0 9.8-2 13-4.7 6.4-5.3 10.7-15.8 4.8-26.3-.2-.3-.5-.4-.7-.2z"/><path d="m63.2 26.4h-5.2c-.7-3.2-1.9-6.2-3.7-8.9l3.6-3.7c.3-.3.3-.8 0-1.2l-6.6-6.6c-.2-.2-.4-.2-.6-.2s-.4.1-.6.2l-3.6 3.6c-2.7-1.8-5.7-3-8.9-3.7v-5.1c0-.5-.4-.8-.8-.8h-9.5c-.5 0-.8.4-.8.8v5.2c-3.2.7-6.2 1.9-8.9 3.7l-3.7-3.7c-.3-.3-.8-.3-1.2 0l-6.7 6.7c-.3.3-.3.9 0 1.2l3.7 3.7c-1.8 2.7-3 5.7-3.7 8.9h-5.2c-.5 0-.8.4-.8.8v9.5c0 .5.4.8.8.8h5.2c.7 3.2 1.9 6.2 3.7 8.9l-3.7 3.6c-.3.3-.3.8 0 1.2l6.7 6.7c.3.3.8.3 1.2 0l3.6-3.6c2.7 1.8 5.7 3 8.9 3.7v5.2c0 .5.4.8.8.8h9.5c.5 0 .8-.4.8-.8v-5.3c3.2-.7 6.2-1.9 8.9-3.7l3.6 3.6c.2.2.4.2.6.2s.4-.1.6-.2l6.7-6.7c.3-.3.3-.8 0-1.2l-3.6-3.6c1.8-2.7 3-5.7 3.7-8.9h5.2c.5 0 .8-.4.8-.8v-9.5c0-.4-.4-.8-.8-.8zm-.2 10.2h-5.1c-.4 0-.7.3-.8.6-.7 3.2-1.9 6.1-3.6 8.8-.2.3-.2.8.1 1l3.6 3.6-6.5 6.5-3.6-3.6c-.3-.3-.7-.3-1-.1-2.7 1.8-5.6 3-8.8 3.6-.4.1-.7.4-.7.8v5.2h-9.2v-5.1c0-.4-.3-.7-.7-.8-3.1-.6-6.1-1.9-8.8-3.6-.3-.2-.8-.2-1 .1l-3.6 3.6-6.5-6.5 3.6-3.6c.3-.3.3-.7.1-1-1.8-2.7-3-5.6-3.6-8.8-.1-.4-.4-.7-.8-.7h-5.1v-9.2h5.1c.4 0 .7-.3.8-.6.6-3.1 1.9-6.1 3.6-8.8.2-.3.2-.7-.1-1l-3.6-3.6 6.5-6.5 3.6 3.6c.3.3.7.3 1 .1 2.7-1.8 5.6-3 8.8-3.6.4-.1.7-.4.7-.8v-5.2h9.2v5.1c0 .4.3.7.7.8 3.1.6 6.1 1.9 8.8 3.6.3.2.8.2 1-.1l3.6-3.6 6.5 6.5-3.6 3.6c-.3.3-.3.7-.1 1 1.8 2.7 3 5.6 3.6 8.8.1.4.4.6.8.6h5.1z"/><path d="m25.5 37.8h13.8v1.5h-13.8z"/><path d="m40.5 40.5c0-.1-.1-.2-.2-.2h-15.9c-.1 0-.2.1-.2.2v2.4h16.3z"/><path d="m23.7 25.8 1.4 1.7 4.4-1.3h.1.1.1.1c1.3.6 2.5.6 3.2 0 .5-.4.7-1.2.5-2-.1-.3.1-.5.4-.6s.5.1.6.4c.3 1.2 0 2.3-.9 3s-2.2.8-3.5.4v.9c0 .6-.1 1.1-.4 1.5-.4.7-1.1 1.4-2.1 2.2-.4.3-.7.8-.7 1.3v3.4h10.4v-13.2c-.1-2-.7-3.2-2.4-4.6-2.6-1.8-5.1-1.8-7.7.2l1.5 1.4c.1.1.2.2.1.4 0 .1-.1.3-.2.4z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/technology-assessment.svg b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/technology-assessment.svg
new file mode 100644
index 0000000..a712aa0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/technology-assessment.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="512" height="512"><g id="Ikon"><path d="M33.5,47.5A1.5,1.5,0,1,1,32,46,1.5,1.5,0,0,1,33.5,47.5ZM18,15a3.0033,3.0033,0,0,1-3-3V9a3.0033,3.0033,0,0,1,3-3H34a3.0033,3.0033,0,0,1,3,3v3a3.0033,3.0033,0,0,1-3,3ZM34,8H23v5H34a1.0009,1.0009,0,0,0,1-1V9A1.0009,1.0009,0,0,0,34,8ZM18,13h3V8H18a1.0009,1.0009,0,0,0-1,1v3A1.0009,1.0009,0,0,0,18,13Zm28,5H24a1,1,0,0,0,0,2H46a1,1,0,0,0,0-2Zm0,3H24a1,1,0,0,0,0,2H46a1,1,0,0,0,0-2Zm0,4H24a1,1,0,0,0,0,2H46a1,1,0,0,0,0-2Zm0,3H24a1,1,0,0,0,0,2H46a1,1,0,0,0,0-2Zm0,4H24a1,1,0,0,0,0,2H46a1,1,0,0,0,0-2Zm0,3H24a1,1,0,0,0,0,2H46a1,1,0,0,0,0-2ZM39.2389,14.622a.4733.4733,0,0,1-.168-.5225L41.3024,6.78c.1427-.47.7649-.62,1.2246-.624.47.0046,1.0772.1495,1.2236.624L45.9948,14.1a.4772.4772,0,0,1-.168.5225A1.5833,1.5833,0,0,1,44.819,15c-.277-.0047-.5258-.0685-.6123-.3476l-.4082-1.5H41.2662l-.4072,1.5c-.07.2821-.3426.3424-.6123.3476A1.6161,1.6161,0,0,1,39.2389,14.622Zm2.4121-2.91h1.752L42.527,8.496Zm6.8311-4.4483h-.8643V6.4c-.0209-.5785-1.1074-.566-1.1436,0v.8633h-.873c-.5636.0136-.5715,1.139,0,1.1436h.873V9.28c.0122.5623,1.1459.5739,1.1436,0v-.873h.8643C49.0565,8.3792,49.0477,7.3011,48.4821,7.2636ZM20.2,18.4l-1.5586,2.0771-.6846-.6845a1,1,0,1,0-1.4141,1.414l1.5,1.5A1.0056,1.0056,0,0,0,19.55,22.6l2.25-3A1,1,0,1,0,20.2,18.4ZM18.75,30a1.0013,1.0013,0,0,0,.8-.4l2.25-3A1,1,0,1,0,20.2,25.4l-1.5586,2.0771-.6846-.6845a1,1,0,1,0-1.4141,1.414l1.5,1.5A.9986.9986,0,0,0,18.75,30Zm2.957,2.293a1,1,0,0,0-1.4141,0l-.7929.7929-.793-.7929a1,1,0,1,0-1.4141,1.414l.793.793-.793.793a1,1,0,1,0,1.4141,1.414l.793-.7929.7929.7929a1,1,0,0,0,1.4141-1.414l-.793-.793.793-.793A1,1,0,0,0,21.7068,32.293ZM62,13V49a3.0033,3.0033,0,0,1-3,3H38.9189l.9149,5H40.5a2.5,2.5,0,0,1,0,5h-17a2.5,2.5,0,0,1,0-5h.6662l.9149-5H5a3.0033,3.0033,0,0,1-3-3V13a3.0033,3.0033,0,0,1,3-3h6V5a3,3,0,0,1,3-3H50a3,3,0,0,1,3,3v5h6A3.0033,3.0033,0,0,1,62,13ZM53,39h3V16H53ZM13,39H51V5a1,1,0,0,0-1-1H14a1,1,0,0,0-1,1ZM11,16H7.9985L8,39h3ZM4,13V43H60V13a1.0009,1.0009,0,0,0-1-1H53v2h3a2.0023,2.0023,0,0,1,2,2V39a2.0023,2.0023,0,0,1-2,2H8a2.0023,2.0023,0,0,1-2-2V16a2.0023,2.0023,0,0,1,2-2h3V12H5A1.0009,1.0009,0,0,0,4,13ZM40.5,59h-17a.5.5,0,0,0,0,1h17a.5.5,0,0,0,0-1Zm-3.6143-7H27.1143L26.2,57H37.8ZM60,49V45H4v4a1.0009,1.0009,0,0,0,1,1H59A1.0009,1.0009,0,0,0,60,49Z"/></g></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/technology-software-development.webp b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/technology-software-development.webp
new file mode 100644
index 0000000..83b1ea2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/r-and-d/technology-software-development.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/advanced-fgpa.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/advanced-fgpa.webp
new file mode 100644
index 0000000..f93e2ef
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/advanced-fgpa.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/aiSolutionsforHealthcare.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/aiSolutionsforHealthcare.webp
new file mode 100644
index 0000000..46e3e95
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/aiSolutionsforHealthcare.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/brand.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/brand.webp
new file mode 100644
index 0000000..7d27a7c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/brand.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/cloud-service.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/cloud-service.webp
new file mode 100644
index 0000000..fead5a9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/cloud-service.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/cloud.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/cloud.webp
new file mode 100644
index 0000000..a83ede7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/cloud.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/cyber.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/cyber.webp
new file mode 100644
index 0000000..3aecf11
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/cyber.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/deployment-of-asic.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/deployment-of-asic.webp
new file mode 100644
index 0000000..143cd4c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/deployment-of-asic.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/dlt.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/dlt.webp
new file mode 100644
index 0000000..f8f9aa6
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/dlt.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/flex-solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/flex-solutions.webp
new file mode 100644
index 0000000..c60d56b
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/flex-solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/hardware.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/hardware.webp
new file mode 100644
index 0000000..ff7be82
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/hardware.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/impressive.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/impressive.webp
new file mode 100644
index 0000000..8c658e7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/impressive.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/improved-efficiency.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/improved-efficiency.webp
new file mode 100644
index 0000000..23c9de0
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/improved-efficiency.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/iot.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/iot.webp
new file mode 100644
index 0000000..65395b3
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/iot.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/pcb.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/pcb.webp
new file mode 100644
index 0000000..3757dd9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/pcb.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/placeholder.jpg b/Tech4biz-Version01/Tech4biz/public/images/services/services/placeholder.jpg
new file mode 100644
index 0000000..7e35296
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/placeholder.jpg differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/quantam.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/quantam.webp
new file mode 100644
index 0000000..c9a0c64
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/quantam.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/r-and-d.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/r-and-d.webp
new file mode 100644
index 0000000..a1c7993
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/r-and-d.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/service-main.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/service-main.webp
new file mode 100644
index 0000000..aa2318e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/service-main.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/social.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/social.webp
new file mode 100644
index 0000000..73086b9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/social.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/software-design.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/software-design.webp
new file mode 100644
index 0000000..43cdbc1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/software-design.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/software-engineer.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/software-engineer.webp
new file mode 100644
index 0000000..e5b4ddc
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/software-engineer.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/software.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/software.webp
new file mode 100644
index 0000000..1daf5e5
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/software.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/threed-design.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/threed-design.webp
new file mode 100644
index 0000000..e39b47d
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/threed-design.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/threed.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/threed.webp
new file mode 100644
index 0000000..b752119
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/threed.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/vlsi-design.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/vlsi-design.webp
new file mode 100644
index 0000000..f3ab6fd
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/vlsi-design.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/services/vlsi.webp b/Tech4biz-Version01/Tech4biz/public/images/services/services/vlsi.webp
new file mode 100644
index 0000000..09c62f1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/services/vlsi.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/campaign-design.svg b/Tech4biz-Version01/Tech4biz/public/images/services/social/campaign-design.svg
new file mode 100644
index 0000000..2200ea5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/social/campaign-design.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m151.491 229.197c-4.371-4.371-11.886-1.265-11.886 4.924s7.515 9.295 11.886 4.924c2.718-2.718 2.718-7.13 0-9.848zm-4.923-16.459c18.982 0 28.561 23.06 15.119 36.501-13.442 13.442-36.502 3.862-36.502-15.119 0-11.807 9.576-21.382 21.383-21.382zm297.655-26.829c-14.099-14.1-36.965-14.1-51.064 0-14.1 14.1-14.1 36.965 0 51.064 14.1 14.1 36.964 14.1 51.064 0 14.1-14.098 14.1-36.964 0-51.064zm-25.532-24.995c27.904 0 50.527 22.624 50.527 50.528s-22.624 50.527-50.527 50.527-50.527-22.624-50.527-50.527c0-27.904 22.624-50.528 50.527-50.528zm8.524 50.528-10.025 5.883v-11.765zm-13.054-24.316 30.88 18.119c4.725 2.772 4.76 9.652-.092 12.446l-31.336 18.387c-4.822 2.828-10.822-.712-10.816-6.196h-.027v-36.882c-.001-5.893 6.674-9.237 11.391-5.874zm74.195-41.21c4.19 0 7.644 3.455 7.644 7.645v118.948c0 4.19-3.454 7.644-7.644 7.644h-115.598v.001c-1.845 0-3.69.704-5.098 2.112l-33.582 33.582v-162.288c0-4.189 3.454-7.645 7.645-7.645 48.878.001 97.755.001 146.633.001zm-472.356 151.64v26.889c0 4.19 3.454 7.645 7.644 7.645h115.597v.001c1.845 0 3.69.704 5.098 2.111l33.582 33.582v-30.438l-59.558-59.558-21.264 21.265c-2.815 2.815-7.38 2.815-10.195 0l-36.2-36.2zm154.277-99.704c4.19 0 7.645 3.455 7.645 7.645v111.459l-54.46-54.46c-2.815-2.815-7.38-2.815-10.195 0l-21.266 21.264-36.2-36.2c-2.815-2.815-7.38-2.815-10.195 0l-29.606 29.605v-71.669c0-4.19 3.455-7.645 7.644-7.645h146.633zm109.15-128.426h-59.402v4.035h59.402zm-66.612-14.421h73.822c3.982 0 7.21 3.228 7.21 7.21v18.456c0 3.982-3.228 7.21-7.21 7.21h-73.822c-3.982 0-7.21-3.228-7.21-7.21v-18.455c-.001-3.982 3.228-7.211 7.21-7.211zm145.048 76.491h-16.14c-12.149 0-22.065 9.915-22.065 22.065v179.693c0 6.413 7.799 9.65 12.357 5.048l25.848-25.848v111.664h-216.275v-72.277l38.396 38.396c4.557 4.601 12.357 1.365 12.357-5.049v-179.691c0-12.15-9.915-22.065-22.065-22.065h-28.688v-95.55h36.333v15.86c0 3.982 3.228 7.21 7.21 7.21h129.189c3.982 0 7.21-3.228 7.21-7.21v-15.86h36.333zm-262.414 215.014v86.871c0 20.268 16.609 36.877 36.877 36.877h234.8c20.268 0 36.876-16.609 36.876-36.877v-138.807h-28.258l-3.46 3.46v133.295c0 3.982-3.228 7.21-7.21 7.21h-230.696c-3.982 0-7.21-3.228-7.21-7.21v-84.819zm308.553-215.014h-31.718v-50.825c0-3.982-3.228-7.21-7.21-7.21h-50.753c-3.982 0-7.21 3.228-7.21 7.21v15.86h-114.77v-15.86c0-3.982-3.228-7.21-7.21-7.21h-50.753c-3.982 0-7.21 3.228-7.21 7.21v102.761h-31.719v-104.813c0-20.268 16.609-36.876 36.877-36.876h234.8c20.268 0 36.876 16.608 36.876 36.876z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/content-strategy.svg b/Tech4biz-Version01/Tech4biz/public/images/services/social/content-strategy.svg
new file mode 100644
index 0000000..cf5811b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/social/content-strategy.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 50 50" width="512" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"><path d="m30.6 3.8v6.5c0 1.3 1 2.3 2.3 2.3h1v2.7l3.5-2.7h6.4c1.3 0 2.3-1 2.3-2.3v-6.5c0-1.3-1-2.3-2.3-2.3h-10.9c-1.3 0-2.3 1-2.3 2.3z"/><path d="m35.4 4.9.6 1.3 1.3.2-.9.9.2 1.4-1.2-.7-1.2.7.2-1.4-1-.9 1.4-.2z"/><path d="m41.3 4.9.6 1.3 1.4.2-1 .9.2 1.4-1.2-.7-1.2.7.2-1.4-1-.9 1.4-.2z"/><path d="m20.4 14.9h8.8c1.1 0 1.4.9 1.4 1.9 0 .5-.1 1-.3 1.4-.2.3-.6.6-1.1.6h-.7c1.1 0 1.4.9 1.4 1.9 0 .5-.1 1-.3 1.4-.2.3-.6.6-1.1.6h-.7c1.1 0 1.4.9 1.4 1.9 0 .5-.1 1-.3 1.4-.2.3-.6.6-1.1.6h-.7c1.1 0 1.4.9 1.4 1.9 0 .5-.1 1-.3 1.4-.2.3-.6.6-1.1.6h-14.6c-1.1 0-2-.9-2-2v-11.6c0-1.1.9-2 2-2h1.2c.8 0 1.6-.4 2.1-1.2l.8-1.2c.6-1 .9-2.1.9-3.3v-1c0-.6.5-1.1 1.1-1.1 2 0 3.6 1.6 3.6 3.6 0 .9-.3 1.8-.7 2.6z"/><path d="m28.5 18.8h-2.9"/><path d="m28.5 22.6h-3.6"/><path d="m8.5 14.9h-2.5c-1.1 0-2 .9-2 2v11.3c0 1.1.9 2 2 2h2.5c1.1 0 2-.9 2-2v-11.2c0-1.1-.9-2.1-2-2.1z"/><circle cx="7.2" cy="18.2" r="1.1"/><path d="m27.2 26.4h-2.9"/><path d="m42.5 39.4h-11.7c.8-6.4 3.6-9.6 3.8-13.7.6.4 1.3.6 2 .6s1.4-.2 2-.6c.2 4.1 3.1 7.3 3.9 13.7z"/><path d="m42.7 44.9h-12c-.1-.9-.1-1.7 0-2.5h12.1c-.1.8-.1 1.6-.1 2.5z"/><ellipse cx="36.7" cy="22.3" rx="4" ry="4"/><path d="m43 44.9h-12.6c-1 0-1.8.8-1.8 1.8 0 1 .8 1.8 1.8 1.8h12.6c1 0 1.8-.8 1.8-1.8-.1-1-.9-1.8-1.8-1.8z"/><path d="m43.1 42.4h-12.9c-.8 0-1.5-.7-1.5-1.5 0-.8.7-1.5 1.5-1.5h12.9c.8 0 1.5.7 1.5 1.5 0 .8-.7 1.5-1.5 1.5z"/><path d="m13.1 5.4c0 2.7-3.9 5-3.9 5s-3.9-2.3-3.9-5c0-1.2 1-2.2 2.2-2.2.7 0 1.4.4 1.8.9.4-.6 1-.9 1.8-.9 1 0 2 1 2 2.2z"/><path d="m25.8 35.7v6.2c0 1.2-1 2.2-2.2 2.2h-.9v2.6l-3.4-2.6h-6.3c-1.2 0-2.2-1-2.2-2.2v-6.2c0-1.2 1-2.2 2.2-2.2h10.6c1.2 0 2.2 1 2.2 2.2z"/><path d="m13.8 36.6h8.9"/><path d="m13.8 38.8h8.9"/><path d="m13.8 41h5.1"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/e-commerce-shop-homepage-sale.webp b/Tech4biz-Version01/Tech4biz/public/images/services/social/e-commerce-shop-homepage-sale.webp
new file mode 100644
index 0000000..79f5601
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/social/e-commerce-shop-homepage-sale.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/education-online-learning.webp b/Tech4biz-Version01/Tech4biz/public/images/services/social/education-online-learning.webp
new file mode 100644
index 0000000..e61948c
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/social/education-online-learning.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/graphics-design.svg b/Tech4biz-Version01/Tech4biz/public/images/services/social/graphics-design.svg
new file mode 100644
index 0000000..29134dd
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/social/graphics-design.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 1024 1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><g id="XMLID_670_"><path id="XMLID_25_" d="m290.5 574.7h-180.9c-21.4 0-38.8-17.4-38.8-38.8v-430.7c0-21.4 17.4-38.8 38.8-38.8h596.9c21.4 0 38.8 17.4 38.8 38.8v311.1l-155.7-194.5c-38.6 45.2-140.5 164.8-218.3 256.9-31.7 37.4-57.5 68.1-74.8 88.8zm-179.7-40h161c17.1-20.4 40.7-48.5 69-81.8 97.5-115.4 232.8-273.9 234.1-275.5l15.7-18.4 114.6 143.3v-195.9h-594.4z"/><path id="XMLID_22_" d="m646.8 574.7h-408.4l27.4-32.8c17.3-20.7 43.2-51.5 75-89 97.5-115.4 232.8-273.9 234.1-275.5l15.7-18.4 154.6 193.3v116l-32.9-27.7c-2-1.7-4.1-3.1-6.2-4.1-3.9-2-7.8-2.9-11.6-2.6-10.3.6-15.5 5.8-17.6 8.8v55.5c0 10.2-2.4 20.4-6.9 29.5zm-322.8-40h298l12.3-24.9c1.8-3.6 2.7-7.7 2.7-11.7v-63.9l1.2-3.4c4.7-12.8 21.4-34.9 53.9-36.9 4.4-.3 8.8-.1 13.2.6v-28.2l-115.7-144.6c-38.6 45.3-140.5 164.9-218.3 257-17.8 21-33.7 39.8-47.3 56z"/><path id="XMLID_19_" d="m353.9 272.2c-36.8 0-66.8-30-66.8-66.8s30-66.8 66.8-66.8 66.8 30 66.8 66.8c-.1 36.8-30 66.8-66.8 66.8zm0-93.6c-14.8 0-26.8 12-26.8 26.8s12 26.8 26.8 26.8 26.8-12 26.8-26.8c-.1-14.8-12.1-26.8-26.8-26.8z"/><path id="XMLID_16_" d="m290.5 574.7h-180.9c-21.4 0-38.8-17.4-38.8-38.8v-20.5l4.7-5.6c59.9-70.9 159.2-187.3 160.1-188.5l15.7-18.4 130.5 163.2-10.6 12.6c-31.6 37.4-57.5 68.1-74.8 88.8zm-179.7-40h161c14.9-17.8 34.8-41.4 58.3-69.3l-79.7-99.7c-29.5 34.6-94.2 110.6-139.6 164.3z"/><path id="XMLID_13_" d="m842.2 941.9h-226c-16.6 0-32.8-3.1-48.3-9.1l-33-12.9v-281.4h30.9c2.8 0 5.5-1.6 6.7-4.2l61.7-124.5c1.8-3.6 2.7-7.7 2.7-11.7v-63.9l1.2-3.4c4.7-12.8 21.4-34.9 53.9-36.9 10.9-.7 22 1.7 32.2 6.9 4.8 2.5 9.5 5.6 13.8 9.2 23.7 20 35.5 53.4 32.4 91.7-2.1 25.2-7.7 63.4-12 90.8h132.1c17.2 0 33.3 6.7 45.3 18.9 12.1 12.2 18.6 28.4 18.3 45.6-.3 20.7-10.7 39.1-26.4 50.5 5.2 8.6 8.1 18.6 8.1 29.3 0 19.6-9.9 36.9-25.1 47.2 4.3 8 6.7 17.1 6.7 26.8 0 19.6-9.9 36.9-25 47.2 4.3 8 6.7 17.1 6.7 26.8 0 15.2-5.9 29.6-16.7 40.3-10.6 10.9-24.9 16.8-40.2 16.8zm-267.3-49.4 7.6 3c10.8 4.2 22.1 6.4 33.7 6.4h226.1c4.5 0 8.8-1.8 12-5s5-7.5 5-12c0-9.4-7.6-17-17-17v-40h18.3c9.4 0 17-7.6 17-17s-7.6-17-17-17v-40h18.3c9.4 0 17-7.6 17-17s-7.6-17-17-17v-40h11c13.2 0 24.1-10.5 24.3-23.3.1-6.4-2.3-12.4-6.8-17-4.5-4.5-10.5-7-16.8-7h-179.2l3.9-23.3c3.7-22.5 12.7-78.5 15.4-110.8 2-24.9-4.8-46.5-18.3-57.8-2-1.7-4.1-3.1-6.2-4.1-3.9-2-7.8-2.9-11.6-2.6-10.3.6-15.5 5.8-17.6 8.8v55.5c0 10.2-2.4 20.4-6.9 29.5l-61.7 124.5c-6.7 13.5-19.1 22.8-33.5 25.6z"/><path id="XMLID_10_" d="m530.6 957.6h-91.6c-24.4 0-44.2-19.8-44.2-44.2v-261c0-24.4 19.8-44.2 44.2-44.2h91.7c24.4 0 44.2 19.8 44.2 44.2v261c0 24.4-19.9 44.2-44.3 44.2zm-91.6-309.5c-2.3 0-4.2 1.9-4.2 4.2v261c0 2.3 1.9 4.2 4.2 4.2h91.7c2.3 0 4.2-1.9 4.2-4.2v-261c0-2.3-1.9-4.2-4.2-4.2z"/><path id="XMLID_9_" d="m618.6 817.9h118v40h-118z"/><path id="XMLID_8_" d="m463.6 675.2h41.6v40h-41.6z"/><path id="XMLID_7_" d="m70.8 721.6h246.1v40h-246.1z"/><path id="XMLID_6_" d="m70.8 816.7h132.6v40h-132.6z"/><path id="XMLID_3_" d="m888.3 546.2-66-66v-387.8c0-14.3 11.6-26 26-26h80c14.3 0 26 11.6 26 26v387.8zm-26-82.6 26 26 26-26v-357.2h-52z"/><path id="XMLID_2_" d="m842.3 145.5h92v40h-92z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/medical-banner-doctor-face-mask.webp b/Tech4biz-Version01/Tech4biz/public/images/services/social/medical-banner-doctor-face-mask.webp
new file mode 100644
index 0000000..c5f7714
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/social/medical-banner-doctor-face-mask.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/visual-branding.svg b/Tech4biz-Version01/Tech4biz/public/images/services/social/visual-branding.svg
new file mode 100644
index 0000000..9a082cf
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/social/visual-branding.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m122.916 153.773c0-4.531 3.695-8.226 8.226-8.226s8.226 3.695 8.226 8.226-3.696 8.227-8.226 8.227c-4.531 0-8.226-3.696-8.226-8.227zm39.802 8.227c4.531 0 8.226-3.695 8.226-8.226s-3.695-8.226-8.226-8.226-8.225 3.695-8.225 8.226 3.694 8.226 8.225 8.226zm31.575 0c4.531 0 8.226-3.695 8.226-8.226s-3.695-8.226-8.226-8.226-8.226 3.695-8.226 8.226 3.696 8.226 8.226 8.226zm149.004 114.977c2.401 3.356 2.401 7.861.003 11.213-20.142 28.11-52.776 44.89-87.301 44.89s-67.159-16.779-87.297-44.885c-2.401-3.356-2.401-7.861-.003-11.213 20.142-28.109 52.776-44.889 87.301-44.889s67.159 16.779 87.297 44.884zm-15.81 5.608c-17.272-21.678-43.66-34.492-71.487-34.492-27.826 0-54.212 12.813-71.487 34.493 17.272 21.678 43.66 34.493 71.487 34.493s54.212-12.811 71.487-34.494zm-42.689 0c0 15.879-12.919 28.798-28.798 28.798s-28.798-12.919-28.798-28.798c0-15.88 12.919-28.799 28.798-28.799s28.798 12.919 28.798 28.799zm-16 0c0-7.058-5.741-12.799-12.798-12.799s-12.798 5.741-12.798 12.799c0 7.057 5.741 12.798 12.798 12.798s12.798-5.741 12.798-12.798zm-12.798-56.261c4.418 0 8-3.582 8-8v-17.202c0-4.418-3.582-8-8-8s-8 3.582-8 8v17.202c0 4.418 3.582 8 8 8zm-41.184.93c1.482 2.566 4.171 4.001 6.936 4.001 1.357 0 2.733-.346 3.993-1.072 3.826-2.21 5.137-7.103 2.928-10.929l-8.601-14.897c-2.209-3.826-7.102-5.134-10.928-2.929-3.826 2.21-5.137 7.103-2.928 10.929zm41.184 111.594c-4.418 0-8 3.582-8 8v17.201c0 4.418 3.582 8 8 8s8-3.582 8-8v-17.201c0-4.418-3.582-8-8-8zm41.183-.931c-2.209-3.826-7.102-5.137-10.928-2.928s-5.137 7.102-2.928 10.928l8.601 14.897c1.482 2.566 4.171 4.001 6.936 4.001 1.357 0 2.733-.346 3.993-1.073 3.826-2.209 5.137-7.102 2.928-10.928zm-71.439-2.929c-3.827-2.208-8.72-.898-10.928 2.929l-8.601 14.897c-2.209 3.826-.898 8.719 2.928 10.929 1.26.727 2.635 1.072 3.993 1.072 2.765 0 5.454-1.435 6.936-4.001l8.601-14.897c2.208-3.826.897-8.719-2.929-10.929zm60.511-104.805c1.26.727 2.635 1.072 3.993 1.072 2.765 0 5.454-1.435 6.936-4.001l8.601-14.897c2.209-3.826.898-8.719-2.928-10.929-3.828-2.207-8.719-.898-10.928 2.929l-8.601 14.897c-2.21 3.826-.899 8.719 2.927 10.929zm147.745 6.743v133.631c0 12.172-9.903 22.075-22.075 22.075h-203.054c-2.639 53.079-46.649 95.451-100.372 95.451-55.415.001-100.499-45.083-100.499-100.498 0-44.786 29.45-82.818 70-95.763v-150.738c0-12.172 9.903-22.075 22.075-22.075h184.342c7.44-53.65 53.6-95.093 109.264-95.093 60.83 0 110.319 49.489 110.319 110.32 0 46.608-29.053 86.557-70 102.69zm-340-95.842v31.454h196.222c-4.348-11.708-6.76-24.348-6.851-37.529h-183.296c-3.35 0-6.075 2.725-6.075 6.075zm98.998 246.501c0-46.593-37.906-84.499-84.499-84.499s-84.5 37.906-84.5 84.499 37.906 84.499 84.5 84.499c46.593 0 84.499-37.906 84.499-84.499zm225.002-145.736c-7.827 1.768-15.965 2.707-24.319 2.707-41.102 0-77.021-22.597-96-56.018h-203.681v99.598c4.736-.687 9.576-1.05 14.5-1.05 51.714 0 94.424 39.265 99.899 89.547h203.526c3.35 0 6.075-2.726 6.075-6.075zm70-107.613c0-52.009-42.312-94.32-94.319-94.32-52.008 0-94.32 42.312-94.32 94.32s42.312 94.319 94.32 94.319c52.007.001 94.319-42.311 94.319-94.319zm-14.827 23.835c-3.104 5.131-8.524 8.056-14.526 7.801-20.447-.841-40.444-1.096-59.677 4.123l19.687 34.099c2.209 3.826.898 8.719-2.928 10.928l-4.499 2.598c-3.51 2.026-7.409 3.062-11.364 3.062-1.989 0-3.992-.262-5.967-.791-5.901-1.581-10.828-5.356-13.873-10.631l-13.223-22.903-.297.171c-5.367 3.099-11.334 4.682-17.392 4.682-3.054 0-6.131-.402-9.166-1.216-9.053-2.426-16.605-8.207-21.266-16.279-9.652-16.717-3.903-38.17 12.814-47.822l23.857-13.773c14.317-12.969 25.097-31.645 34.624-48.148 1.824-3.158 3.604-6.243 5.36-9.206 2.967-5.007 8.208-7.996 14.031-7.941 5.817.032 11.028 3.061 13.938 8.1l14.082 24.392c3.823-.853 7.753-.803 11.527.201 6.033 1.606 11.128 5.561 14.346 11.134 5.348 9.263 3.786 20.648-3.074 28.154l13.153 22.782c3 5.189 2.937 11.352-.167 16.483zm-26.134-62.046 3.392 5.876c-.1-1.113-.429-2.222-1.024-3.252-.631-1.094-1.435-1.972-2.368-2.624zm-76.888 24.052 20.593 35.669c14.284-4.391 28.853-5.944 43.226-6.255l-37.496-64.945c-7.433 12.378-15.856 24.998-26.323 35.531zm-11.644 52.595 17.65-10.19-19.008-32.924-17.652 10.19c-9.077 5.24-12.198 16.889-6.957 25.966 2.523 4.371 6.626 7.506 11.551 8.825 4.925 1.318 10.045.655 14.416-1.867zm41.992 31.971-16.342-28.305-3.496 2.018 13.223 22.903c.908 1.573 2.385 2.701 4.158 3.177.814.216 1.645.282 2.457.207zm59.04-54.962c-.008-.009-.023-.046-.053-.097l-50.034-86.662c-.028-.049-.05-.079-.065-.097-.011.001-.051-.003-.107-.003-.055-.012-.095.003-.118.007-.005.012-.028.043-.057.092-1.1 1.856-2.216 3.775-3.341 5.717l46.767 81.002c2.268.072 4.528.153 6.773.246.059.004.098-.001.12-.004.005-.012.029-.042.06-.094.031-.05.047-.086.055-.107zm-298.151 208.239c9.672 0 17.541 7.869 17.541 17.541 0 2.312-.45 4.521-1.266 6.545 3.259 3.187 5.286 7.63 5.286 12.537 0 5.882-2.91 11.097-7.365 14.281.436 1.526.668 3.138.668 4.803 0 5.514-2.558 10.442-6.549 13.66.557 1.708.858 3.531.858 5.423 0 9.672-7.869 17.541-17.542 17.541h-15.403c-1.072 0-2.117-.112-3.137-.297l-1.529.264c-10.046 1.742-18.926 3.282-27.114 3.282-10.448 0-19.768-2.524-28.944-10.319h-22.362c-4.418 0-8-3.582-8-8v-65.953c0-4.418 3.582-8 8-8h22.806c1.182-.854 2.367-1.697 3.531-2.518 11.039-7.781 17.741-13.176 17.741-22.457v-20.021c0-4.418 3.582-8 8-8 17.653 0 32.015 14.36 32.015 32.011v15.531c0 .365-.025.73-.075 1.092-.048.349-.117.701-.184 1.054zm-23.77 54.166c-.835 0-1.542.706-1.542 1.541s.706 1.541 1.541 1.541h21.094c.835 0 1.541-.706 1.541-1.541s-.706-1.541-1.541-1.541zm-75.088 15.096h9.448c.005-7.818.002-22.736-.019-49.953h-9.429zm57.879 8.9c-.214-1.092-.333-2.218-.333-3.372 0-3.517 1.04-6.794 2.828-9.542-1.789-2.748-2.828-6.025-2.828-9.541 0-2.312.45-4.521 1.266-6.544-.598-.585-1.139-1.225-1.649-1.89-1.257.85-2.447 1.585-3.497 2.188-1.256.722-2.626 1.064-3.978 1.064-2.771 0-5.465-1.44-6.944-4.016-2.201-3.832-.879-8.722 2.952-10.922 6.286-3.611 10.589-8.18 11.512-12.222.61-2.673-.167-5.541-2.377-8.767-2.175-3.177-1.78-7.452.942-10.176 2.781-2.783 3.986-5.75 4.318-7.253v-14.848c0-5.917-3.228-11.095-8.015-13.866v9.877c0 18.248-13.597 27.833-24.522 35.534-.729.514-1.43 1.011-2.129 1.509.016 19.956.017 58.129.017 58.305 8.267 6.702 16.365 6.952 32.437 4.482zm34.153-3.372c0-.836-.706-1.542-1.542-1.542-.002 0-.004 0-.006 0h-15.372c-.008 0-.016 0-.024 0-.835 0-1.542.706-1.542 1.542 0 .835.706 1.541 1.541 1.541h15.403c.835 0 1.542-.706 1.542-1.541zm12.387-38.167c0-.834-.706-1.54-1.542-1.54h-31.809c-.835 0-1.542.706-1.542 1.541 0 .836.706 1.542 1.542 1.542h31.809c.836 0 1.542-.706 1.542-1.543zm-5.561-20.623h-23.771c-.835 0-1.541.706-1.541 1.541 0 .836.706 1.542 1.542 1.542h23.77c.835 0 1.542-.706 1.542-1.542-.001-.835-.707-1.541-1.542-1.541z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/social/woman-holding-instagram-like-icon.webp b/Tech4biz-Version01/Tech4biz/public/images/services/social/woman-holding-instagram-like-icon.webp
new file mode 100644
index 0000000..73086b9
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/social/woman-holding-instagram-like-icon.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software-design/Implementation.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/Implementation.svg
new file mode 100644
index 0000000..ffba5f6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/Implementation.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="m416.83 218.92-30.08-6.46c-.94-.2-1.52-.72-1.84-1.62-1.67-4.76-3.63-9.48-5.83-14.05-.42-.86-.37-1.64.15-2.45l16.71-25.85c3.75-5.8 2.95-13.25-1.93-18.13l-32.38-32.38c-4.88-4.88-12.34-5.67-18.13-1.93l-25.85 16.71c-.81.52-1.58.57-2.45.15-4.56-2.2-9.29-4.16-14.05-5.83-.9-.32-1.42-.9-1.62-1.84l-6.46-30.08c-1.45-6.75-7.28-11.46-14.18-11.46h-45.8c-6.9 0-12.73 4.71-14.18 11.46l-6.46 30.08c-.2.94-.72 1.52-1.62 1.84-4.76 1.67-9.48 3.63-14.05 5.83-.86.42-1.64.37-2.45-.15l-25.85-16.71c-5.8-3.75-13.25-2.96-18.13 1.93l-32.38 32.38c-4.88 4.88-5.67 12.33-1.93 18.13l16.71 25.85c.52.81.57 1.58.15 2.45-2.2 4.56-4.16 9.29-5.83 14.05-.32.9-.9 1.42-1.84 1.62l-30.08 6.46c-6.75 1.45-11.46 7.28-11.46 14.18v45.8c0 6.9 4.71 12.73 11.46 14.18l30.08 6.46c.94.2 1.52.72 1.84 1.62 1.67 4.76 3.63 9.49 5.83 14.05.42.86.37 1.64-.15 2.45l-16.71 25.85c-3.75 5.8-2.95 13.25 1.93 18.13l32.38 32.38c4.88 4.88 12.33 5.67 18.13 1.93l25.85-16.71c.81-.52 1.58-.57 2.45-.15 4.57 2.2 9.3 4.17 14.05 5.83.9.32 1.42.9 1.62 1.84l6.46 30.08c1.45 6.75 7.28 11.46 14.18 11.46h45.8c6.9 0 12.73-4.71 14.18-11.46l6.46-30.08c.2-.94.72-1.52 1.62-1.84 4.76-1.67 9.48-3.63 14.05-5.83.87-.42 1.64-.37 2.45.15l25.85 16.71c5.8 3.75 13.25 2.95 18.13-1.93l32.38-32.38c4.88-4.88 5.67-12.33 1.93-18.13l-16.71-25.85c-.52-.81-.57-1.58-.15-2.45 2.2-4.56 4.16-9.29 5.83-14.05.32-.9.9-1.42 1.84-1.62l30.08-6.46c6.75-1.45 11.46-7.28 11.46-14.18v-45.8c0-6.9-4.71-12.73-11.46-14.18zm-.54 59.98c0 1.23-.78 2.19-1.98 2.45l-30.08 6.46c-5.05 1.09-8.93 4.51-10.64 9.38-1.52 4.34-3.31 8.64-5.32 12.81-2.25 4.66-1.93 9.83.88 14.17l16.71 25.85c.67 1.03.54 2.26-.33 3.13l-32.38 32.38c-.87.87-2.1 1-3.13.33l-25.85-16.71c-4.35-2.81-9.51-3.13-14.17-.88-4.16 2.01-8.47 3.79-12.81 5.31-4.88 1.71-8.3 5.59-9.38 10.64l-6.46 30.08c-.26 1.2-1.22 1.98-2.45 1.98h-45.8c-1.23 0-2.19-.78-2.45-1.98l-6.46-30.08c-1.08-5.05-4.5-8.93-9.38-10.64-4.33-1.52-8.64-3.31-12.8-5.32-2.05-.99-4.21-1.48-6.34-1.48-2.71 0-5.4.79-7.83 2.37l-25.85 16.71c-1.03.67-2.26.54-3.13-.33l-32.38-32.38c-.87-.87-1-2.1-.33-3.13l16.71-25.85c2.81-4.35 3.13-9.51.88-14.17-2.01-4.16-3.79-8.47-5.31-12.81-1.71-4.88-5.59-8.29-10.64-9.38l-30.08-6.46c-1.2-.26-1.98-1.22-1.98-2.45v-45.8c0-1.23.78-2.19 1.98-2.45l30.08-6.46c5.05-1.09 8.93-4.51 10.64-9.38 1.52-4.34 3.31-8.64 5.32-12.8 2.25-4.66 1.93-9.83-.88-14.18l-16.71-25.85c-.67-1.03-.54-2.26.33-3.13l32.38-32.38c.87-.87 2.1-1 3.13-.33l25.85 16.71c4.35 2.81 9.51 3.13 14.18.88 4.16-2.01 8.47-3.79 12.8-5.31 4.88-1.71 8.3-5.59 9.38-10.64l6.46-30.08c.26-1.2 1.22-1.98 2.45-1.98h45.8c1.23 0 2.19.78 2.45 1.98l6.46 30.08c1.08 5.05 4.5 8.93 9.38 10.64 4.33 1.52 8.64 3.31 12.8 5.31 4.66 2.25 9.83 1.93 14.18-.88l25.85-16.71c1.03-.67 2.26-.54 3.13.33l32.38 32.38c.87.87 1 2.1.33 3.13l-16.71 25.85c-2.81 4.35-3.13 9.51-.88 14.17 2.01 4.16 3.79 8.47 5.31 12.81 1.71 4.88 5.59 8.3 10.64 9.38l30.08 6.46c1.2.26 1.98 1.22 1.98 2.45v45.8zm-160.29-115.66c-51.15 0-92.76 41.61-92.76 92.76s41.61 92.76 92.76 92.76 92.76-41.61 92.76-92.76-41.61-92.76-92.76-92.76zm0 173.52c-44.53 0-80.76-36.23-80.76-80.76s36.23-80.76 80.76-80.76 80.76 36.23 80.76 80.76-36.23 80.76-80.76 80.76zm144.66 104.54c1.97 2.66 1.42 6.42-1.25 8.39-41.72 30.95-91.31 47.31-143.41 47.31-47.27 0-92.49-13.48-131.64-39.09l4.02 24.59c.53 3.27-1.68 6.35-4.95 6.89-.33.05-.65.08-.98.08-2.89 0-5.43-2.09-5.91-5.03l-6.31-38.58c-.53-3.27 1.68-6.35 4.95-6.89l38.59-6.31c3.27-.54 6.35 1.68 6.89 4.95s-1.68 6.35-4.95 6.89l-23.94 3.91c36.99 23.98 79.65 36.59 124.23 36.59 49.51 0 96.63-15.54 136.27-44.94 2.66-1.98 6.42-1.42 8.39 1.24zm-289.32-370.6c-1.97-2.66-1.42-6.42 1.25-8.39 41.72-30.95 91.31-47.31 143.41-47.31 47.26 0 92.49 13.48 131.64 39.09l-4.02-24.59c-.53-3.27 1.68-6.35 4.95-6.89s6.35 1.68 6.89 4.95l6.31 38.59c.53 3.27-1.68 6.35-4.95 6.89l-38.59 6.31c-.33.05-.65.08-.98.08-2.89 0-5.43-2.09-5.91-5.03-.53-3.27 1.68-6.35 4.95-6.89l23.95-3.91c-37-23.99-79.67-36.6-124.24-36.6-49.51 0-96.63 15.54-136.27 44.94-1.07.8-2.33 1.18-3.57 1.18-1.83 0-3.65-.84-4.82-2.42zm197.41 145.88c2.34 2.34 2.34 6.14 0 8.49l-70.36 70.36c-1.12 1.13-2.65 1.76-4.24 1.76s-3.12-.63-4.24-1.76l-36.22-36.22c-2.34-2.34-2.34-6.14 0-8.49s6.14-2.34 8.49 0l31.98 31.98 66.12-66.12c2.32-2.35 6.12-2.35 8.47 0zm180.63 171.99c.53 3.27-1.68 6.35-4.95 6.89l-38.59 6.31c-.33.05-.65.08-.98.08-2.89 0-5.43-2.09-5.91-5.03l-6.31-38.58c-.53-3.27 1.68-6.35 4.95-6.89s6.35 1.68 6.89 4.95l3.91 23.95c24-37.01 36.61-79.68 36.61-124.25 0-49.51-15.54-96.63-44.94-136.27-1.97-2.66-1.42-6.42 1.25-8.39 2.66-1.97 6.42-1.42 8.39 1.25 30.94 41.72 47.3 91.31 47.3 143.41 0 47.26-13.48 92.49-39.1 131.64l24.59-4.02c3.28-.54 6.36 1.68 6.89 4.95zm-410.03-234.8c.53 3.27-1.68 6.35-4.95 6.89-.33.05-.65.08-.98.08-2.89 0-5.43-2.09-5.91-5.03l-3.91-23.94c-23.99 36.99-36.6 79.66-36.6 124.23 0 49.51 15.54 96.63 44.94 136.27 1.97 2.66 1.42 6.42-1.25 8.39-1.07.8-2.33 1.18-3.57 1.18-1.84 0-3.65-.84-4.82-2.43-30.94-41.72-47.3-91.31-47.3-143.41 0-47.26 13.48-92.49 39.1-131.64l-24.59 4.02c-3.27.54-6.35-1.68-6.89-4.95-.53-3.27 1.68-6.35 4.95-6.89l38.59-6.31c3.27-.53 6.35 1.68 6.89 4.95z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software-design/architectural-design.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/architectural-design.svg
new file mode 100644
index 0000000..6a223f8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/architectural-design.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m422.4209 339.0847v27.1199h24.29c4 0 7.4497 2.7202 8.3999 6.6001l1.1001 4.53c.2798 1.1299 1.23 1.8799 2.3799 1.8799h4.6201v-11.99c-3.4199-1.54-5.8101-4.97-5.8101-8.95v-13.1799c0-3.99 2.3901-7.4199 5.8101-8.9502v-20h-17.8604c-12.6396 0-22.9296 10.2901-22.9296 22.9402z"/><path d="m469.021 358.2747v-13.1799c0-1-.8101-1.8101-1.8101-1.8101s-1.8101.8101-1.8101 1.8101v13.1799c0 1 .8101 1.8101 1.8101 1.8101s1.8101-.8101 1.8101-1.8101z"/><path d="m489.0908 316.1445h-17.8799v20c3.4199 1.5303 5.8101 4.9602 5.8101 8.9502v13.1799c0 3.98-2.3901 7.4099-5.8101 8.95v11.99h4.6396c1.1504 0 2.0801-.73 2.3501-1.8699l1.1104-4.54c.9399-3.8799 4.3896-6.6001 8.3896-6.6001h24.3003v-27.1199c.0001-12.6501-10.2802-22.9402-22.9101-22.9402z"/><path d="m487.0806 374.6946-1.0996 4.54c-1.1401 4.7-5.3101 7.98-10.1304 7.98h-17.2598c-4.8398 0-9.0103-3.28-10.1499-7.98l-1.1104-4.54c-.0396-.1799-.1797-.49-.6196-.49h-24.29v34.8101c0 24.7 20.0898 44.79 44.79 44.79 24.6997 0 44.79-20.0901 44.79-44.79v-34.8101h-24.3003c-.31 0-.54.1899-.62.49z"/><path d="m441.1309 208.7146h-43.1694v-124.7493c0-14.2095-11.5479-25.77-25.7422-25.77h-346.4503c-14.2095 0-25.77 11.5605-25.77 25.77v232.1826h13.1245v-229.8583c0-8.2544 6.7153-14.9702 14.9697-14.9702h341.7734c8.2544 0 14.9702 6.7158 14.9702 14.9702v229.8584h13.1245v-99.4333h43.1694c12.1699 0 22.0801 9.9001 22.0801 22.0801v77.3499h8v-77.3499c.0001-16.5902-13.4999-30.0802-30.0799-30.0802z"/><path d="m198.9941 347.6406c2.0771 0 3.7671-1.7026 3.7671-3.7949 0-2.0771-1.6899-3.7671-3.7671-3.7671-2.0928 0-3.7949 1.6899-3.7949 3.7671 0 2.0923 1.7022 3.7949 3.7949 3.7949z"/><path d="m302.0903 423.3828h-206.2207c-8.3794 0-15.1968 6.8301-15.1968 15.2251v11.1401c.0313 2.2495 1.8643 4.0566 4.1138 4.0566h228.3872c2.2837 0 4.1416-1.8452 4.1416-4.1133v-11.0835c0-8.4086-6.8164-15.225-15.2251-15.225z"/><path d="m-.001 345.8013c0 14.21 11.5605 25.7705 25.77 25.7705h346.4502c14.1943 0 25.7422-11.5605 25.7422-25.7705v-21.6533h-397.9624zm198.9951-13.7227c6.4883 0 11.7671 5.2788 11.7671 11.7671 0 6.5039-5.2788 11.7949-11.7671 11.7949-6.5039 0-11.7949-5.291-11.7949-11.7949 0-6.4883 5.291-11.7671 11.7949-11.7671z"/><path d="m159.6953 379.5718-9.352 35.811h97.2788l-9.3345-35.811z"/><path d="m200.9648 222.8857c-.6108.3457-1.2905.5186-1.9697.5186s-1.3584-.1729-1.9692-.5186l-61.9603-35.0496-17.4967 9.9099 81.4258 46.0615 81.3994-46.0615-17.4928-9.9075z"/><path d="m369.8672 79.3193h-341.7734c-3.7783 0-6.9697 3.1919-6.9697 6.9702v229.8584h355.7129v-229.8583c-.0001-3.8433-3.127-6.9703-6.9698-6.9703zm-289.4951 80.8506c-1.7114 1.3975-4.231 1.1416-5.6284-.5693l-5.5151-6.7546v101.028c0 2.209-1.791 4-4 4s-4-1.791-4-4v-101.0088l-5.4849 6.7324c-.7905.9707-1.9424 1.4736-3.1035 1.4736-.8882 0-1.7817-.2939-2.5239-.8984-1.7129-1.3955-1.9702-3.915-.5747-5.6279l12.5859-15.4492c.7593-.9316 1.897-1.4727 3.0991-1.4736h.002c1.2012 0 2.3389.54 3.0986 1.4707l12.6138 15.4492c1.3969 1.7109 1.1425 4.2305-.5689 5.6279zm210.1123 34.0977c1.2539.71 2.0293 2.04 2.0288 3.4814s-.7759 2.7705-2.0303 3.4805l-19.4621 11.0129 19.4636 11.0232c1.2539.71 2.0293 2.04 2.0288 3.4814s-.7759 2.7705-2.0303 3.4805l-89.5181 50.6553c-.6108.3457-1.2905.5186-1.9697.5186s-1.3584-.1729-1.9692-.5186l-89.5464-50.6553c-1.2549-.71-2.0303-2.0391-2.0308-3.4805s.7749-2.7715 2.0288-3.4814l19.4671-11.0249-19.4651-11.0112c-1.2549-.71-2.0303-2.0391-2.0308-3.4805s.7744-2.7715 2.0288-3.4814l19.4666-11.0254-19.4647-11.0107c-1.2549-.71-2.0308-2.04-2.0308-3.4814s.7759-2.7715 2.0308-3.4814l89.5464-50.6553c1.2227-.6914 2.7183-.6904 3.939 0l89.5181 50.6553c1.2549.71 2.0303 2.04 2.0303 3.4814s-.7754 2.7715-2.0303 3.4814l-19.4617 11.0125zm57.9619 46.6875-12.6143 15.4492c-.7593.9297-1.897 1.4697-3.0981 1.4697s-2.3389-.54-3.0981-1.4697l-12.6143-15.4492c-1.3975-1.7119-1.1431-4.2314.5684-5.6289 1.7119-1.3975 4.2314-1.1416 5.6279.5684l5.5161 6.7561v-101.0286c0-2.209 1.791-4 4-4s4 1.791 4 4v101.0286l5.5161-6.7561c1.397-1.71 3.917-1.9648 5.6279-.5684 1.7115 1.3974 1.9659 3.917.5684 5.6289z"/><path d="m117.5728 168.75 81.4218 46.0586 81.3965-46.0586-81.3965-46.0596z"/><path d="m200.9648 251.8848c-.6108.3457-1.2905.5186-1.9697.5186s-1.3584-.1729-1.9692-.5186l-61.9599-35.0498-17.4967 9.9092 81.4253 46.0615 81.3989-46.0615-17.4929-9.9067z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software-design/detailed-design.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/detailed-design.svg
new file mode 100644
index 0000000..a8f0658
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/detailed-design.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m933.44 622.63v48.45h-866.88v-48.45z"/><path d="m933.44 93.93v512.14h-48.44v-455.42a8.28 8.28 0 0 0 -8.28-8.29h-753.44a8.29 8.29 0 0 0 -8.28 8.29v455.42h-48.44v-512.14z"/><path d="m131.56 158.93v447.14h736.87v-447.14zm350.12 253.37a8.28 8.28 0 0 1 -8.28 8.28h-37q-1.73 4.76-3.88 9.34l26.21 26.2a8.29 8.29 0 0 1 0 11.71l-42.19 42.17a8.3 8.3 0 0 1 -11.72 0l-26.19-26.19c-3.05 1.42-6.18 2.71-9.35 3.86v37.05a8.28 8.28 0 0 1 -8.28 8.28h-59.59a8.28 8.28 0 0 1 -8.28-8.28v-37.08q-4.75-1.72-9.34-3.86l-26.19 26.22a8.28 8.28 0 0 1 -11.72 0l-42.14-42.14a8.27 8.27 0 0 1 0-11.71l26.19-26.2q-2.13-4.57-3.86-9.34h-37.07a8.28 8.28 0 0 1 -8.28-8.28v-59.62a8.28 8.28 0 0 1 8.28-8.28h37c1.15-3.17 2.44-6.3 3.86-9.35l-26.19-26.19a8.28 8.28 0 0 1 0-11.72l42.21-42.17a8.33 8.33 0 0 1 11.72 0l26.19 26.21q4.57-2.16 9.34-3.88v-37.02a8.28 8.28 0 0 1 8.28-8.28h59.59a8.28 8.28 0 0 1 8.28 8.28v37.05c3.17 1.15 6.3 2.44 9.35 3.88l26.19-26.24a8.33 8.33 0 0 1 11.72 0l42.14 42.14a8.3 8.3 0 0 1 0 11.72l-26.21 26.19c1.44 3.05 2.73 6.18 3.88 9.35h37a8.28 8.28 0 0 1 8.28 8.28zm318.37-82.52-17.23 17.22-151.21 151.22q-.3.3-.63.57c-.2.16-.41.32-.62.46a1.18 1.18 0 0 1 -.19.11 4.8 4.8 0 0 1 -.54.32c-.24.12-.49.23-.73.33a6.34 6.34 0 0 1 -.73.26h-.1-.1l-110.8 29.75a7.9 7.9 0 0 1 -2.15.29 8.28 8.28 0 0 1 -8.02-10.31l29.76-110.8a.37.37 0 0 1 0-.09 2.41 2.41 0 0 1 .08-.25c0-.14.1-.29.15-.43a6 6 0 0 1 .48-1 3.26 3.26 0 0 1 .27-.48 9.32 9.32 0 0 1 .65-.9c.16-.19.32-.36.49-.53l151.12-151.17.09-.1.1-.09 17.11-17.16a65.58 65.58 0 0 1 92.75 92.75z"/><path d="m679.61 906.07h-359.22a69.17 69.17 0 0 1 68.61-60.79h222a69.17 69.17 0 0 1 68.61 60.79z"/><path d="m426 828.72c23.48-55.85 12.36-108.5.1-141.08h147.79c-12.25 32.57-23.38 85.23.11 141.08z"/><path d="m422.43 409.92a8.28 8.28 0 0 1 7.93-5.91h34.76v-43.01h-34.76a8.27 8.27 0 0 1 -7.93-5.91 94.91 94.91 0 0 0 -7.33-17.7 8.26 8.26 0 0 1 1.44-9.78l24.57-24.61-30.43-30.4-24.57 24.57a8.27 8.27 0 0 1 -9.78 1.44 94.17 94.17 0 0 0 -17.71-7.33 8.29 8.29 0 0 1 -5.9-7.94v-34.74h-43v34.74a8.29 8.29 0 0 1 -5.91 7.94 94.35 94.35 0 0 0 -17.7 7.33 8.28 8.28 0 0 1 -9.79-1.44l-24.59-24.57-30.42 30.4 24.57 24.57a8.3 8.3 0 0 1 1.44 9.78 95.15 95.15 0 0 0 -7.32 17.74 8.29 8.29 0 0 1 -8 5.91h-34.7v43h34.7a8.3 8.3 0 0 1 7.94 5.9 94.59 94.59 0 0 0 7.34 17.71 8.31 8.31 0 0 1 -1.44 9.79l-24.53 24.6 30.42 30.42 24.57-24.57a8.29 8.29 0 0 1 9.79-1.43 94.74 94.74 0 0 0 17.7 7.33 8.28 8.28 0 0 1 5.91 7.94v34.74h43v-34.76a8.28 8.28 0 0 1 5.9-7.94 94.84 94.84 0 0 0 17.71-7.33 8.28 8.28 0 0 1 9.78 1.43l24.57 24.57 30.45-30.4-24.57-24.57a8.28 8.28 0 0 1 -1.44-9.79 94.35 94.35 0 0 0 7.33-17.72zm-91.22 57.87a85.29 85.29 0 1 1 85.28-85.29 85.39 85.39 0 0 1 -85.28 85.29z"/><circle cx="331.21" cy="382.5" r="68.72"/><path d="m802.69 283.4a48.66 48.66 0 0 1 -14.36 34.67l-11.33 11.36-69.36-69.33 11.36-11.36a49 49 0 0 1 83.69 34.66z"/><path d="m555.29 502.7-28.6 7.69 7.69-28.61z"/><path d="m609.77 488.08-36 9.67-34.43-34.44 9.66-36z"/><path d="m695.92 271.82-139.49 139.51 69.33 69.32 139.49-139.5zm-105.59 149.94a8.28 8.28 0 0 1 -5.85-14.13l107.76-107.76a8.28 8.28 0 0 1 11.76 11.72l-107.81 107.75a8.29 8.29 0 0 1 -5.86 2.42zm39.13 30.84a8.28 8.28 0 0 1 -11.72-11.71l107.76-107.76a8.28 8.28 0 0 1 11.71 11.72z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software-design/hospitality-travel.webp b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/hospitality-travel.webp
new file mode 100644
index 0000000..0f48e74
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/hospitality-travel.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software-design/insurance-risk-management.webp b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/insurance-risk-management.webp
new file mode 100644
index 0000000..7ece2e2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/insurance-risk-management.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software-design/requirements-analysis-software-design-services.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/requirements-analysis-software-design-services.svg
new file mode 100644
index 0000000..700c39f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/requirements-analysis-software-design-services.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 500 500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><path d="m419.3 30h-338.6c-14.7 0-26.8 12-26.8 26.8v386.4c0 14.7 12.1 26.8 26.8 26.8h338.5c14.7 0 26.8-12.1 26.8-26.8v-386.4c.1-14.7-12-26.8-26.7-26.8zm-9.9 321.7h-55.1c-11.8 0-21.5 9.7-21.5 21.5v55.1zm-239.4-134.6c53-32.8 122.9-9.2 145.4 48.9 22.4-31.7 18.7-75.1-8.9-102.6-31.2-31.2-81.9-31.2-113.1 0-13.8 13.9-22.6 32.8-23.4 53.7zm-27.4 25.1c4.9-6.6 10.8-12.6 17.5-18-1.1-26.5 8.7-50.3 26.2-67.8 35.1-35.1 92.1-35.1 127.3 0 33 33 35.2 85.6 5.5 121.3 3.1 12.1 3.7 24.7 2.2 36.9 2 1.4 5.9 5.6 7.6 7.3 2.3 2.3 6.1 2.3 8.4 0l14.5-14.5c2.3-2.3 2.3-6.1 0-8.4l-5.6-5.7c-5.1-5.1-6.2-12.9-2.5-19.2 4.7-8.2 8.3-16.8 10.8-26 1.9-7 8.1-11.8 15.4-11.8h8c3.3 0 5.9-2.7 5.9-5.9v-20.6c0-3.2-2.7-5.9-5.9-5.9h-8c-7.3 0-13.5-4.8-15.4-11.8-2.4-9.2-6.1-17.9-10.8-26-3.6-6.3-2.6-14.1 2.5-19.2l5.6-5.6c2.3-2.3 2.3-6.1 0-8.4l-14.5-14.5c-2.3-2.3-6.1-2.3-8.4 0l-5.6 5.6c-5.1 5.1-13 6.2-19.2 2.5-4-2.3-8.3-4.4-12.6-6.2-4.3-1.8-8.7-3.3-13.4-4.5-7-1.9-11.8-8.1-11.8-15.4v-8c0-3.3-2.7-5.9-5.9-5.9h-20.6c-3.3 0-5.9 2.7-5.9 5.9v8c0 7.3-4.8 13.5-11.8 15.4-9.2 2.4-17.9 6.1-26 10.8-6.3 3.6-14.1 2.6-19.2-2.5l-5.7-5.6c-2.3-2.3-6.1-2.3-8.4 0l-14.5 14.5c-2.3 2.3-2.3 6.1 0 8.4l5.7 5.6c5.1 5.1 6.2 13 2.5 19.2-2.3 4-4.4 8.3-6.2 12.6-1.8 4.3-3.3 8.8-4.5 13.4-1.9 7-8.1 11.8-15.4 11.8h-8c-3.3 0-5.9 2.7-5.9 5.9v20.6c0 3.3 2.7 5.9 5.9 5.9h8c4.7-.2 9.2 2 12.2 5.8zm-26.6 203.2-11.7 11.8c-5.6 5.6-14.8 5.6-20.4 0l-16.7-16.7c-5.6-5.6-5.6-14.7 0-20.4l6.3-6.3v-336.3c0-17.4 14.2-31.5 31.5-31.5h290c17.3 0 31.5 14.2 31.5 31.5v269.3c0 1.4-.5 2.6-1.5 3.5-31.3 31.1-62.4 62.6-93.7 93.7-1 .9-2.2 1.4-3.5 1.4zm40-56.6c3.9 5.6 3.3 13.4-1.7 18.3l-28.3 28.3h196.8v-62.2c0-17.3 14.1-31.5 31.5-31.5h62.2v-264.2c0-11.8-9.7-21.5-21.5-21.5h-290c-11.8 0-21.5 9.7-21.5 21.5v326.4l33.8-33.8c4.9-5 12.7-5.6 18.4-1.7l6.8-6.8c-24.3-32.5-26-75.7-6.2-109.8-.5-1.8-.8-3.2-2.4-4.4-4.6-3.5-14.6 2.4-22.9-5.9-2.9-2.9-4.7-6.9-4.7-11.3v-20.6c0-8.8 7.1-15.9 15.9-15.9h8c2.8 0 5-1.7 5.7-4.4 1.2-4.5 3.1-10.4 5-14.6 2-4.8 4.3-9.4 6.8-13.8 1.4-2.4 1-5.2-1-7.1-5.4-5.4-10.3-9-10.3-16.9 0-4 1.6-8.2 4.7-11.3l14.5-14.6c6.2-6.2 16.3-6.2 22.5 0l5.7 5.7c2 2 4.8 2.3 7.2 1 8.9-5.2 18.5-9.1 28.4-11.8 2.7-.7 4.4-2.9 4.4-5.7v-8c0-8.8 7.1-15.9 15.9-15.9h20.6c8.8 0 15.9 7.2 15.9 15.9v8c0 2.8 1.7 5 4.4 5.8 5 1.3 9.8 3 14.6 5 4.8 2 9.4 4.3 13.8 6.9 2.4 1.4 5.2 1 7.1-1 5.4-5.4 9-10.3 16.9-10.3 4.1 0 8.2 1.6 11.3 4.6l14.5 14.6c6.2 6.2 6.2 16.3 0 22.5l-5.7 5.7c-2 2-2.3 4.8-.9 7.1 5.2 8.9 9.1 18.5 11.8 28.5.7 2.7 2.9 4.4 5.7 4.4 7.6 0 13.6-1 19.2 4.6 2.9 2.9 4.7 6.9 4.7 11.3v20.6c0 8.8-7.1 15.9-15.9 15.9h-8c-2.8 0-5 1.7-5.7 4.4-2.7 9.9-6.7 19.6-11.8 28.5-1.4 2.4-1 5.2.9 7.1 5.4 5.4 10.3 9 10.3 16.9 0 4-1.6 8.2-4.6 11.3l-14.5 14.6c-6.2 6.2-16.3 6.2-22.5 0l-2.8-2.7c-11.2 45-52.1 76.3-98.4 75.5-20.6-.4-40.9-7.1-57.9-19.7zm-13.1-13.5 6.2 6.2 9.8-9.7c1.8-1.8 4.7-2 6.7-.3 31.8 26.1 77.9 27.2 111.1 2 39.4-30 47.1-86.3 17.1-125.7-15-19.7-36.6-31.5-59.3-34.6-22.6-3.1-46.4 2.4-66 17.1-.2.2-.4.3-.6.5-9 6.9-16.3 15.1-21.9 24.2-.1.2-.2.4-.3.5-6.5 10.6-10.5 22.4-12.2 34.5-3.2 23.2 2.7 47.9 18.4 67.7l.8 1c1.9 2 1.8 5-.1 7zm4.4 18.5-16.7-16.7c-1.7-1.7-4.5-1.7-6.2 0l-50.1 50.1c-1.7 1.7-1.7 4.5 0 6.2l16.7 16.7c1.7 1.7 4.5 1.7 6.2 0l50.1-50.1c1.7-1.7 1.7-4.5 0-6.2zm133.6-83.8c4.4-32.3-18.2-62.1-50.5-66.5s-62.1 18.2-66.5 50.5 18.2 62.1 50.5 66.5c32.4 4.4 62.1-18.2 66.5-50.5zm-3.5-49.8c23.1 30.4 17.2 73.6-13.2 96.7s-73.6 17.2-96.7-13.2-17.1-73.6 13.2-96.7 73.6-17.1 96.7 13.2zm-89.7 42.6c0-6.6 10-6.6 10 0v20.9c0 6.6-10 6.6-10 0zm25.1-17.2c0-6.6 10-6.6 10 0v38.1c0 6.6-10 6.6-10 0zm25-13.7c0-6.6 10-6.6 10 0v51.8c0 6.6-10 6.6-10 0z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software-design/telecommunications-networking.webp b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/telecommunications-networking.webp
new file mode 100644
index 0000000..023690d
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/software-design/telecommunications-networking.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software/custom-development.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software/custom-development.svg
new file mode 100644
index 0000000..94adb5e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software/custom-development.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 72 72" height="512" viewBox="0 0 72 72" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Layer_25"><g><path d="m64 3h-56c-2.757 0-5 2.243-5 5v31c0 2.757 2.243 5 5 5h12c.552 0 1-.447 1-1s-.448-1-1-1h-12c-1.654 0-3-1.346-3-3v-22h34c.552 0 1-.447 1-1s-.448-1-1-1h-34v-7c0-1.654 1.346-3 3-3h56c1.654 0 3 1.346 3 3v35c0 .553.448 1 1 1s1-.447 1-1v-35c0-2.757-2.243-5-5-5z"/><path d="m58 17c.552 0 1-.447 1-1s-.448-1-1-1h-15c-.552 0-1 .447-1 1s.448 1 1 1z"/><path d="m64 15h-3c-.552 0-1 .447-1 1s.448 1 1 1h3c.552 0 1-.447 1-1s-.448-1-1-1z"/><path d="m7 10c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3-3 1.346-3 3zm4 0c0 .552-.449 1-1 1s-1-.448-1-1 .449-1 1-1 1 .448 1 1z"/><path d="m15 10c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3-3 1.346-3 3zm4 0c0 .552-.449 1-1 1s-1-.448-1-1 .449-1 1-1 1 .448 1 1z"/><path d="m23 10c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3-3 1.346-3 3zm4 0c0 .552-.449 1-1 1s-1-.448-1-1 .449-1 1-1 1 .448 1 1z"/><path d="m64 36h-3.768c-.313-1.02-.721-2.005-1.218-2.943l2.664-2.663c.188-.188.293-.441.293-.707s-.105-.52-.293-.707l-5.657-5.657c-.391-.391-1.023-.391-1.414 0l-2.664 2.663c-.938-.496-1.923-.904-2.943-1.217v-3.769c0-.553-.448-1-1-1h-8c-.552 0-1 .447-1 1v3.769c-1.02.313-2.005.721-2.943 1.217l-2.664-2.663c-.391-.391-1.023-.391-1.414 0l-5.657 5.657c-.188.188-.293.441-.293.707s.105.52.293.707l2.664 2.663c-.497.938-.905 1.924-1.218 2.943h-3.768c-.552 0-1 .447-1 1v8c0 .553.448 1 1 1h3.768c.313 1.02.721 2.005 1.218 2.943l-2.664 2.663c-.188.188-.293.441-.293.707s.105.52.293.707l5.657 5.657c.391.391 1.023.391 1.414 0l2.664-2.663c.938.496 1.923.904 2.943 1.217v3.769c0 .553.448 1 1 1h8c.552 0 1-.447 1-1v-3.769c1.02-.313 2.005-.721 2.943-1.217l2.664 2.663c.391.391 1.023.391 1.414 0l5.657-5.657c.188-.188.293-.441.293-.707s-.105-.52-.293-.707l-2.664-2.663c.497-.938.905-1.924 1.218-2.943h3.768c.552 0 1-.447 1-1v-8c0-.553-.448-1-1-1zm-1 8h-3.524c-.456 0-.854.309-.968.75-.351 1.359-.888 2.656-1.596 3.856-.233.394-.17.894.153 1.216l2.492 2.491-4.243 4.243-2.491-2.491c-.323-.321-.823-.383-1.216-.154-1.2.708-2.497 1.245-3.857 1.596-.441.114-.75.513-.75.969v3.524h-6v-3.524c0-.456-.309-.854-.75-.969-1.36-.351-2.657-.888-3.857-1.596-.394-.23-.893-.168-1.215.154l-2.491 2.491-4.243-4.243 2.492-2.491c.323-.322.386-.822.154-1.216-.708-1.2-1.246-2.497-1.596-3.856-.115-.441-.514-.75-.97-.75h-3.524v-6h3.524c.456 0 .854-.309.968-.75.351-1.359.888-2.656 1.596-3.856.232-.394.169-.894-.154-1.216l-2.492-2.491 4.243-4.243 2.491 2.491c.324.322.824.385 1.217.154 1.2-.708 2.497-1.245 3.857-1.596.441-.114.75-.513.75-.969v-3.524h6v3.524c0 .456.309.854.75.969 1.36.351 2.657.888 3.857 1.596.392.23.894.167 1.215-.154l2.491-2.491 4.243 4.243-2.492 2.491c-.322.322-.385.822-.153 1.216.708 1.2 1.246 2.497 1.596 3.856.114.441.513.75.969.75h3.524z"/><path d="m39 41v4c0 .553.448 1 1 1h4c.334 0 .646-.167.832-.445l8-12c.265-.396.212-.925-.125-1.262-.336-.336-.865-.39-1.262-.125l-12 8c-.278.186-.445.498-.445.832zm2 .535 7.395-4.93-4.93 7.395h-2.465z"/><path d="m54.506 35.09c-.503.228-.725.82-.497 1.323.658 1.448.991 2.991.991 4.587 0 1.266-.212 2.498-.631 3.661-.187.52.083 1.093.603 1.28.111.04.226.059.338.059.41 0 .794-.254.941-.661.497-1.382.749-2.842.749-4.339 0-1.883-.394-3.704-1.169-5.413-.228-.503-.82-.728-1.325-.497z"/><path d="m33 41c0-6.065 4.935-11 11-11 1.596 0 3.139.333 4.586.99.502.23 1.095.007 1.324-.497.228-.502.006-1.095-.497-1.323-1.708-.776-3.529-1.17-5.413-1.17-7.168 0-13 5.832-13 13 0 1.497.252 2.957.749 4.339.147.407.531.661.941.661.112 0 .227-.019.338-.059.52-.188.79-.761.603-1.28-.419-1.163-.631-2.395-.631-3.661z"/><path d="m52 47h-16c-.552 0-1 .447-1 1s.448 1 1 1h16c.552 0 1-.447 1-1s-.448-1-1-1z"/><path d="m48 50h-8c-.552 0-1 .447-1 1s.448 1 1 1h8c.552 0 1-.447 1-1s-.448-1-1-1z"/><path d="m23 55h-.584c-.017-.041-.033-.082-.05-.122l.414-.413c1.169-1.17 1.169-3.073 0-4.243-1.171-1.171-3.074-1.17-4.243 0l-.413.413c-.041-.017-.082-.034-.123-.051v-.584c0-1.654-1.346-3-3-3s-3 1.346-3 3v.584c-.041.017-.082.034-.123.051l-.413-.413c-1.171-1.171-3.074-1.17-4.243 0s-1.169 3.073.001 4.243l.413.413c-.017.04-.034.081-.05.122h-.586c-1.654 0-3 1.346-3 3s1.346 3 3 3h.584c.017.041.033.082.05.122l-.414.413c-1.169 1.17-1.169 3.073 0 4.243 1.17 1.17 3.073 1.169 4.243 0l.413-.413.123.051v.584c0 1.654 1.346 3 3 3s3-1.346 3-3v-.584c.041-.017.082-.034.123-.051l.413.413c1.17 1.17 3.073 1.169 4.243 0 1.169-1.17 1.169-3.073-.001-4.243l-.413-.413c.017-.04.034-.081.05-.122h.586c1.654 0 3-1.346 3-3s-1.346-3-3-3zm0 4h-1.294c-.442 0-.833.291-.958.715-.12.403-.277.786-.469 1.139-.211.39-.141.871.173 1.184l.912.912c.39.39.39 1.025 0 1.415-.39.391-1.024.391-1.414 0l-.913-.913c-.313-.313-.794-.382-1.185-.172-.349.189-.732.347-1.139.469-.422.125-.713.515-.713.957v1.294c0 .552-.449 1-1 1s-1-.448-1-1v-1.294c0-.442-.291-.832-.714-.958-.407-.122-.79-.279-1.139-.469-.15-.081-.314-.121-.477-.121-.259 0-.516.101-.708.293l-.912.913c-.39.391-1.024.391-1.414 0-.39-.39-.39-1.025-.001-1.415l.913-.912c.313-.313.384-.794.173-1.184-.191-.353-.349-.735-.469-1.139-.126-.423-.516-.714-.958-.714h-1.294c-.551 0-1-.448-1-1s.449-1 1-1h1.294c.442 0 .833-.291.958-.715.12-.403.277-.786.469-1.139.211-.39.141-.871-.173-1.184l-.912-.912c-.39-.39-.39-1.025 0-1.415.39-.391 1.024-.391 1.414 0l.913.913c.313.313.797.383 1.185.172.349-.189.732-.347 1.139-.469.422-.125.713-.515.713-.957v-1.294c0-.552.449-1 1-1s1 .448 1 1v1.294c0 .442.291.832.714.958.407.122.79.279 1.139.469.389.21.871.142 1.185-.172l.912-.913c.39-.391 1.024-.391 1.414 0 .39.39.39 1.025.001 1.415l-.913.912c-.313.313-.384.794-.173 1.184.191.353.349.735.469 1.139.126.423.516.714.958.714h1.294c.551 0 1 .448 1 1s-.449 1-1 1z"/><path d="m15 54c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2 2 .897 2 2-.897 2-2 2z"/></g></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software/e-learning.webp b/Tech4biz-Version01/Tech4biz/public/images/services/software/e-learning.webp
new file mode 100644
index 0000000..5973ba1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/software/e-learning.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software/energy.webp b/Tech4biz-Version01/Tech4biz/public/images/services/software/energy.webp
new file mode 100644
index 0000000..1d26d18
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/software/energy.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software/enterprise-solutions.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software/enterprise-solutions.svg
new file mode 100644
index 0000000..205624a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software/enterprise-solutions.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 66 66" width="512" xmlns="http://www.w3.org/2000/svg"><g><g><path d="m12 52.7c.6.6.9 1.6.8 2.5h-.3c-1.1 0-2 .9-2 2v4.7c0 1.1.9 2 2 2h16.5c1.1 0 2-.9 2-2v-4.7c0-1.1-.9-2-2-2h-.6c-1-5.6-.2-9-3.3-12.5l-8.2-9.1c-1.1-1.2-2.8-1.6-4.1-.9-2 1-2.6 3.5-1.2 5.3l2.2 2.6c.4.4.4 1.2-.1 1.5-.4.3-1 .3-1.4-.1l-3.3-3.9c-.5-.6-.7-1.3-.7-2.1l.6-8.8c.1-1.5-.8-2.9-2.1-3.4-2.1-.8-4.4.7-4.6 2.8l-1.2 12.6c-.1 1.4.4 2.8 1.4 3.8zm17 4.4v4.7h-16.6v-4.7h16.2zm-24.8-30.2c.1-.8 1.1-1.4 1.9-1.1.5.2.9.7.8 1.3l-.6 8.8c-.1 1.3.3 2.6 1.2 3.5l3.3 3.8c1 1.1 2.8 1.3 4.1.4 1.4-1 1.5-3 .4-4.4l-2.2-2.6c-.6-.7-.4-1.8.5-2.2.6-.3 1.3-.1 1.8.5l8.2 9.1c2.5 2.8 1.8 5.5 2.8 11.2h-11.7c.1-1.4-.4-2.8-1.4-3.9l-9.6-9.7c-.5-.6-.8-1.4-.7-2.2z"/></g><g><path d="m57.7 36.1c.1.7-.2 1.5-.7 2.1l-3.3 3.8c-.3.4-.9.4-1.4.1s-.5-1.1-.1-1.5l2.2-2.7c1.4-1.7.8-4.3-1.2-5.3-1.3-.6-3.1-.2-4.1.9-6.8 8.1-10 9.6-10.6 14.4l-.9 7.2h-.6c-1.1 0-2 .9-2 2v4.7c0 1.1.9 2 2 2h16.6c1.1 0 2-.9 2-2v-4.7c0-1.1-.9-2-2-2h-.3c-.4-2.5 1.7-2.8 10.4-12.1 1-1 1.5-2.4 1.3-3.8l-1.2-12.5c-.2-2-2.5-3.5-4.6-2.8-1.3.5-2.2 1.9-2.1 3.4zm-20.7 25.8v-4.7h.3 16.2v4.7zm21.5-22.5c.8-1 1.3-2.2 1.2-3.5l-.6-8.8c0-.6.3-1.2.8-1.3.8-.3 1.9.3 1.9 1.1l1.2 12.5c.1.8-.2 1.6-.8 2.2-7.9 8.7-11.3 9.7-11 13.6h-11.6l.9-6.9c.5-4 2.9-4.8 10.1-13.4.5-.5 1.2-.7 1.8-.5.9.4 1.1 1.5.5 2.2l-2.2 2.7c-1.1 1.3-.9 3.3.4 4.4 1.2.9 3.1.7 4.1-.4z"/></g><g><path d="m20.1 25.8c.4.4 1 .4 1.4 0l3.1-3.1c1.3.7 3 .5 4.1-.6s1.3-2.8.6-4.1l3.1-3.1c.4-.4.4-1 0-1.4l-3.7-3.7c-.4-.4-1-.4-1.4 0-.6.6-1.5.6-2.1 0s-.6-1.5 0-2.1c.4-.4.4-1 0-1.4l-3.7-3.7c-.4-.4-1-.4-1.4 0l-11 11c-.4.4-.4 1 0 1.4zm-4-16.5 1.7 1.9c.4.4 1 .4 1.4 0s.4-1 0-1.4l-1.8-1.9 3.3-3.3 2.5 2.4c-.7 1.3-.5 3 .6 4.1s2.8 1.3 4.1.6l2.4 2.4-3 3c-.4.4-.4 1 0 1.4.6.6.6 1.5 0 2.1-.6.5-1.5.6-2.1 0-.4-.4-1-.4-1.4 0l-3 3-9.6-9.6z"/></g><g><path d="m37.3 24.6c.4.4 1 .4 1.4 0 .6-.6 1.5-.6 2.1 0s.6 1.5 0 2.1c-.4.4-.4 1 0 1.4l3.7 3.7c.4.4 1 .4 1.4 0l11-11c.4-.4.4-1 0-1.4l-11-11c-.4-.4-1-.4-1.4 0l-3.1 3.1c-1.3-.7-3-.5-4.1.6s-1.3 2.8-.6 4.1l-3.1 3.1c-.4.4-.4 1 0 1.4zm1.4-7.5c.4-.4.4-1 0-1.4-.6-.6-.6-1.5 0-2.1s1.5-.6 2.1 0c.4.4 1 .4 1.4 0l3-3 2.8 2.8-1.7 1.9c-.4.4-.4 1 0 1.4s1 .4 1.4 0l1.7-1.8 5.3 5.3-9.6 9.6-2.4-2.4c.7-1.3.5-3-.6-4.1s-2.8-1.3-4.1-.6l-2.4-2.4z"/></g><g><path d="m32.3 29.9-2.7 2.7c-.4.4-.4 1 0 1.4s1 .4 1.4 0l1-1v11.9c0 .6.4 1 1 1s1-.4 1-1v-11.9l1 1c.4.4 1 .4 1.4 0s.4-1 0-1.4l-2.7-2.7c-.4-.4-1-.4-1.4 0z"/></g></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software/mobile-apps.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software/mobile-apps.svg
new file mode 100644
index 0000000..a9787cf
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software/mobile-apps.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.789 21.025"><g data-name="Layer 2" id="Layer_2"><g data-name="Layer 1" id="Layer_1-2"><g data-name="mobile medical apps" id="mobile_medical_apps"><ellipse cx="8.598" cy="19.115" rx="0.317" ry="0.321"/><path d="M11.784,19.437a.323.323,0,0,0,.317-.322.317.317,0,0,0-.317-.321.321.321,0,0,0-.321.321A.328.328,0,0,0,11.784,19.437Z"/><path d="M14.965,19.437a.325.325,0,0,0,.322-.322.319.319,0,1,0-.638,0A.323.323,0,0,0,14.965,19.437Z"/><path d="M16.9,0H6.665a1.9,1.9,0,0,0-1.89,1.891V5.417H2.543A2.55,2.55,0,0,0,0,7.97v5.1a2.54,2.54,0,0,0,2.543,2.543H4.775v3.527a1.9,1.9,0,0,0,1.89,1.89H16.9a1.892,1.892,0,0,0,1.89-1.89V1.891A1.893,1.893,0,0,0,16.9,0ZM.633,13.065V7.97a1.92,1.92,0,0,1,1.91-1.92h5.1a1.916,1.916,0,0,1,1.91,1.92v5.1a1.908,1.908,0,0,1-1.91,1.91h-5.1A1.911,1.911,0,0,1,.633,13.065Zm17.518,6.07A1.258,1.258,0,0,1,16.9,20.392H6.665a1.259,1.259,0,0,1-1.253-1.257v-1.3H18.151Zm0-1.929H5.412v-1.6H7.643a2.543,2.543,0,0,0,2.548-2.543V7.97A2.553,2.553,0,0,0,7.643,5.417H5.412V3.829H18.151Zm0-14.01H5.412V1.891A1.251,1.251,0,0,1,6.665.643H16.9a1.25,1.25,0,0,1,1.252,1.248Z"/><path d="M13.372,1.6H10.191a.317.317,0,1,0,0,.633h3.181a.317.317,0,1,0,0-.633Z"/><path d="M14.785,1.6a.317.317,0,1,0,0,.633.317.317,0,1,0,0-.633Z"/><path d="M12.739,8.2H13.6a.955.955,0,0,0,.955-.955v-.87a.961.961,0,0,0-.955-.955h-.865a.961.961,0,0,0-.955.955v.87A.955.955,0,0,0,12.739,8.2Zm-.322-1.825a.33.33,0,0,1,.322-.322H13.6a.325.325,0,0,1,.317.322v.87a.324.324,0,0,1-.317.322h-.865a.329.329,0,0,1-.322-.322Z"/><path d="M12.739,11.9H13.6a.955.955,0,0,0,.955-.954v-.861a.955.955,0,0,0-.955-.954h-.865a.955.955,0,0,0-.955.954v.861A.955.955,0,0,0,12.739,11.9Zm-.322-1.815a.323.323,0,0,1,.322-.321H13.6a.318.318,0,0,1,.317.321v.861a.324.324,0,0,1-.317.321h-.865a.329.329,0,0,1-.322-.321Z"/><path d="M12.739,15.608H13.6a.955.955,0,0,0,.955-.954v-.861a.955.955,0,0,0-.955-.954h-.865a.955.955,0,0,0-.955.954v.861A.955.955,0,0,0,12.739,15.608Zm-.322-1.815a.323.323,0,0,1,.322-.321H13.6a.318.318,0,0,1,.317.321v.861a.317.317,0,0,1-.317.321h-.865a.322.322,0,0,1-.322-.321Z"/><path d="M16.969,15.608H17.2a.317.317,0,0,0,0-.633h-.228a.317.317,0,0,1-.316-.321v-.861a.318.318,0,0,1,.316-.321H17.2a.317.317,0,0,0,0-.633h-.228a.951.951,0,0,0-.954.954v.861A.951.951,0,0,0,16.969,15.608Z"/><path d="M16.969,11.9H17.2a.317.317,0,0,0,0-.633h-.228a.324.324,0,0,1-.316-.321v-.861a.318.318,0,0,1,.316-.321H17.2a.317.317,0,0,0,0-.633h-.228a.951.951,0,0,0-.954.954v.861A.951.951,0,0,0,16.969,11.9Z"/><path d="M16.969,8.2H17.2a.317.317,0,0,0,0-.633h-.228a.324.324,0,0,1-.316-.322v-.87a.325.325,0,0,1,.316-.322H17.2a.309.309,0,0,0,.316-.311.319.319,0,0,0-.316-.322h-.228a.958.958,0,0,0-.954.955v.87A.952.952,0,0,0,16.969,8.2Z"/><path d="M6.414,7.649A1.866,1.866,0,0,0,5.1,8.206a1.882,1.882,0,0,0-1.324-.557A1.856,1.856,0,0,0,1.915,9.5c0,1.975,2.888,3.762,3.011,3.838a.348.348,0,0,0,.17.038.344.344,0,0,0,.165-.038c.123-.076,3.011-1.863,3.011-3.838A1.856,1.856,0,0,0,6.414,7.649ZM5.091,12.688C4.255,12.13,2.553,10.759,2.553,9.5a1.222,1.222,0,0,1,1.219-1.22,1.239,1.239,0,0,1,1.049.605.337.337,0,0,0,.549,0A1.214,1.214,0,0,1,7.634,9.5C7.634,10.882,5.682,12.291,5.091,12.688Z"/></g></g></g></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software/retail.webp b/Tech4biz-Version01/Tech4biz/public/images/services/software/retail.webp
new file mode 100644
index 0000000..9df9ee1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/software/retail.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/software/web-applications.svg b/Tech4biz-Version01/Tech4biz/public/images/services/software/web-applications.svg
new file mode 100644
index 0000000..4a14da7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/software/web-applications.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" enable-background="new 0 0 66 66" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"><g><path d="m64 54.6h-2.4v-34.4c0-2.6-2.1-4.8-4.7-5-.1 0-.1 0-.1 0h-.2v-9.2c0-2.8-2.2-5-5-5h-37.2c-2.8 0-5 2.2-5 5v9.2c-1.4 0-2.6.6-3.5 1.5s-1.5 2.2-1.5 3.5v34.4h-2.4c-.6 0-1 .5-1 1v4.7c0 2.6 2.1 4.7 4.6 4.7h54.8c2.5 0 4.6-2.1 4.6-4.6v-4.7c0-.6-.4-1.1-1-1.1zm-52.6-48c0-2 1.6-3.6 3.6-3.6h36c2 0 3.6 1.6 3.6 3.6v3.7h-43.2zm0 5.7h43.1v8c-.2 0-.3-.1-.5-.1-.5-.1-1 .2-1.1.7-.2.6-.6 1.1-.9 1.1-.4 0-.8-.4-1-1.1-.1-.5-.6-.8-1.1-.7-1.6.3-3.1.9-4.4 1.8-.4.3-.6.8-.3 1.3.3.6.3 1.2.1 1.4-.3.3-.9.2-1.4-.1-.5-.2-1-.1-1.3.3-.9 1.4-1.6 2.9-1.9 4.5-.1.5.2 1 .7 1.1.6.2 1.1.6 1.1.9 0 .4-.4.8-1.1.9-.5.2-.8.6-.7 1.1.3 1.6.9 3.1 1.9 4.4.3.4.8.6 1.3.3.6-.3 1.2-.3 1.4-.1.2.3.2.8-.1 1.4-.2.5-.1 1 .3 1.3 1.3.9 2.8 1.6 4.4 1.8h.2c.4 0 .8-.3 1-.7.2-.6.6-1.1 1-1.1s.8.4.9 1.1c.1.5.6.8 1.1.7.2 0 .3-.1.5-.1v5c0 1.7-1.3 3-3 3h-37.2c-1.6 0-3-1.3-3-3zm40.6 24.4c.9 0 1.8-.2 2.6-.7v4.6s0 0-.1 0c-.6-1-1.5-1.6-2.5-1.6s-1.9.6-2.5 1.6c-.8-.2-1.5-.5-2.2-.9.3-1.1.1-2.2-.6-2.9s-1.8-.9-2.9-.6c-.4-.7-.7-1.4-.9-2.2 1-.6 1.6-1.5 1.6-2.5s-.6-1.9-1.6-2.5c.2-.8.5-1.5.9-2.2 1.1.3 2.2.1 2.9-.6s.9-1.8.6-2.9c.7-.4 1.5-.7 2.2-.9.6 1 1.5 1.6 2.5 1.6s1.9-.6 2.5-1.6h.1v4.6c-.8-.4-1.7-.7-2.6-.7-2.9 0-5.3 2.4-5.3 5.3 0 2.7 2.4 5.1 5.3 5.1zm7.6 17.9h-19.8c-.6 0-1 .5-1 1v2.6c0 .3-.3.6-.6.6h-10.4c-.3 0-.6-.3-.6-.6v-2.6c0-.5-.4-1-1-1h-19.8v-34.4c0-1.7 1.3-3 3-3v30.4c0 2.8 2.2 5 5 5h37.1c2.8 0 5-2.2 5-5v-30.4c1.7 0 3 1.3 3 3v34.4z"/><path d="m19.2 6.7c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7 2.7 1.2 2.7 2.7z"/><path d="m25.5 6.7c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7 2.7 1.2 2.7 2.7z"/><path d="m31.9 6.7c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7 2.7 1.2 2.7 2.7z"/><path d="m25 39.6v7.4c0 .5-.5 1-1 1h-7.4c-.6 0-1-.5-1-1v-7.4c0-.6.4-1 1-1h7.4c.5 0 1 .4 1 1z"/><path d="m25 27.7v7.4c0 .6-.5 1-1 1h-7.4c-.6 0-1-.4-1-1v-7.4c0-.5.4-1 1-1h7.4c.5 0 1 .5 1 1z"/><path d="m25 15.9v7.4c0 .5-.5 1-1 1h-7.4c-.6 0-1-.5-1-1v-7.4c0-.6.4-1 1-1h7.4c.5 0 1 .5 1 1z"/><path d="m29 18h20.4c.6 0 1-.4 1-1s-.4-1-1-1h-20.4c-.6 0-1 .4-1 1 0 .5.5 1 1 1z"/><path d="m29 23.3h11.3c.6 0 1-.4 1-1s-.4-1-1-1h-11.3c-.6 0-1 .4-1 1 0 .5.5 1 1 1z"/><path d="m29 29.8h8.6c.6 0 1-.4 1-1s-.4-1-1-1h-8.6c-.6 0-1 .4-1 1 0 .5.5 1 1 1z"/><path d="m29 35.1h8.3c.6 0 1-.4 1-1s-.4-1-1-1h-8.3c-.6 0-1 .4-1 1s.5 1 1 1z"/><path d="m29 41.6h10.6c.6 0 1-.4 1-1s-.4-1-1-1h-10.6c-.6 0-1 .4-1 1 0 .5.5 1 1 1z"/><path d="m29 46.9h10.3c.6 0 1-.4 1-1s-.4-1-1-1h-10.3c-.6 0-1 .4-1 1s.5 1 1 1z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/advertising-marketing.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/advertising-marketing.webp
new file mode 100644
index 0000000..ee3e8ba
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/advertising-marketing.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/audio.svg b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/audio.svg
new file mode 100644
index 0000000..349e99b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/audio.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m256 313.652c-51.283 0-93.005 41.722-93.005 93.004 0 51.283 41.722 93.005 93.005 93.005 8.629 0 17.177-1.182 25.405-3.515 3.981-1.128 6.294-5.269 5.165-9.25-1.128-3.981-5.268-6.293-9.25-5.165-6.899 1.955-14.073 2.947-21.32 2.947-43.021 0-78.022-35-78.022-78.022 0-43.021 35.001-78.022 78.022-78.022s78.022 35 78.022 78.022c0 23.5-10.444 45.524-28.655 60.422-3.202 2.62-3.674 7.339-1.054 10.542s7.34 3.674 10.542 1.054c21.703-17.755 34.15-44.005 34.15-72.018 0-51.282-41.722-93.004-93.005-93.004z"/><path d="m474.227 240.479v-9.914c0-120.331-97.896-218.226-218.227-218.226-30.81 0-60.615 6.324-88.586 18.795-27.008 12.042-50.962 29.181-71.198 50.941-2.817 3.03-2.645 7.77.384 10.587 3.029 2.818 7.769 2.646 10.587-.384 38.391-41.28 92.63-64.956 148.813-64.956 112.015 0 203.154 91.087 203.242 203.082-1.687-11.244-11.41-19.894-23.116-19.894h-19.079c-4.724-38.137-22.863-73.324-51.446-99.538-30.019-27.534-68.943-42.697-109.601-42.697-40.986 0-80.143 15.378-110.257 43.302-28.241 26.186-46.109 61.1-50.793 98.933h-19.076c-11.708 0-21.431 8.653-23.116 19.899.031-40.354 11.91-79.36 34.363-112.81 2.306-3.435 1.39-8.089-2.046-10.395-3.434-2.304-8.088-1.391-10.395 2.046-24.144 35.972-36.906 77.923-36.906 121.317v9.914c-21.061 1.383-37.774 18.948-37.774 40.353v120.017c0 22.306 18.147 40.454 40.454 40.454h12.045v6.494c0 12.89 10.486 23.376 23.376 23.376h32.599c12.89 0 23.376-10.487 23.376-23.376v-213.913c0-12.357-9.64-22.499-21.794-23.317 9.855-72.013 72.448-127.311 145.944-127.311 73.192 0 136.089 55.424 145.947 127.312-12.155.815-21.797 10.958-21.797 23.317v213.913c0 12.89 10.486 23.376 23.376 23.376h32.599c12.89 0 23.377-10.487 23.377-23.376v-6.494h12.044c22.307 0 40.454-18.148 40.454-40.454v-120.018c0-21.405-16.713-38.969-37.773-40.355zm-433.773 185.843c-14.044 0-25.471-11.426-25.471-25.471v-120.017c0-14.044 11.426-25.471 25.471-25.471h12.045v170.959zm76.412-192.436v213.913c0 4.628-3.765 8.393-8.393 8.393h-32.599c-4.628 0-8.393-3.765-8.393-8.393v-213.913c0-4.628 3.765-8.393 8.393-8.393h32.599c4.628 0 8.393 3.765 8.393 8.393zm380.151 166.965c0 14.044-11.426 25.471-25.471 25.471h-12.044v-116.921c0-4.137-3.354-7.491-7.491-7.491-4.138 0-7.491 3.354-7.491 7.491v138.398c0 4.628-3.765 8.393-8.394 8.393h-32.599c-4.628 0-8.393-3.765-8.393-8.393v-213.913c0-4.628 3.765-8.393 8.393-8.393h32.599c4.629 0 8.394 3.765 8.394 8.393v39.996c0 4.137 3.354 7.491 7.491 7.491 4.138 0 7.491-3.354 7.491-7.491v-18.519h12.044c14.044 0 25.471 11.426 25.471 25.471z"/><path d="m196.049 273.929c4.138 0 7.491-3.354 7.491-7.491v-60.701c0-4.137-3.354-7.491-7.491-7.491-4.138 0-7.491 3.354-7.491 7.491v60.701c0 4.137 3.353 7.491 7.491 7.491z"/><path d="m345.927 208.717c-4.138 0-7.491 3.354-7.491 7.491v39.758c0 4.137 3.354 7.491 7.491 7.491s7.491-3.354 7.491-7.491v-39.758c.001-4.137-3.353-7.491-7.491-7.491z"/><path d="m233.516 283.299v-94.423c0-4.137-3.354-7.491-7.491-7.491s-7.491 3.354-7.491 7.491v94.423c0 4.137 3.354 7.491 7.491 7.491s7.491-3.353 7.491-7.491z"/><path d="m263.491 274.869v-77.562c0-4.137-3.354-7.491-7.491-7.491s-7.491 3.354-7.491 7.491v77.562c0 4.137 3.354 7.491 7.491 7.491s7.491-3.354 7.491-7.491z"/><path d="m323.443 283.299v-94.423c0-4.137-3.354-7.491-7.491-7.491s-7.491 3.354-7.491 7.491v94.423c0 4.137 3.354 7.491 7.491 7.491s7.491-3.353 7.491-7.491z"/><path d="m293.467 245.495v-18.815c0-4.137-3.354-7.491-7.491-7.491s-7.491 3.354-7.491 7.491v18.815c0 4.137 3.354 7.491 7.491 7.491s7.491-3.353 7.491-7.491z"/><path d="m173.565 245.495v-18.815c0-4.137-3.354-7.491-7.491-7.491-4.138 0-7.491 3.354-7.491 7.491v18.815c0 4.137 3.354 7.491 7.491 7.491 4.137.001 7.491-3.353 7.491-7.491z"/><path d="m298.343 394.979-58.624-33.847c-4.222-2.438-9.263-2.438-13.485 0-4.222 2.437-6.742 6.803-6.742 11.678v67.694c0 4.875 2.521 9.24 6.742 11.678 4.222 2.438 9.263 2.438 13.485 0l58.624-33.847c4.222-2.438 6.742-6.804 6.742-11.679s-2.52-9.24-6.742-11.677zm-63.868 42.929v-62.503l54.129 31.252z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/custom-character.svg b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/custom-character.svg
new file mode 100644
index 0000000..cf186b0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/custom-character.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2700"
+   xml:space="preserve"
+   width="682.66669"
+   height="682.66669"
+   viewBox="0 0 682.66669 682.66669"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2704"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2714"><path
+         d="M 0,512 H 512 V 0 H 0 Z"
+         id="path2712" /></clipPath></defs><g
+     id="g2706"
+     transform="matrix(1.3333333,0,0,-1.3333333,0,682.66667)"><g
+       id="g2708"><g
+         id="g2710"
+         clip-path="url(#clipPath2714)"><g
+           id="g2716"
+           transform="translate(222.1855,226)"><path
+             d="m 0,0 v -18.512 c 0,-19.39 -15.865,-35.256 -35.257,-35.256 -19.39,0 -35.256,15.866 -35.256,35.256 V -2"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.926;stroke-dasharray:none;stroke-opacity:1"
+             id="path2718" /></g><g
+           id="g2720"
+           transform="translate(234.9058,228)"><path
+             d="M 0,0 C 71.409,-20.896 123.952,-87.147 123.952,-165.075 V -199.5 h -343.858 v 34.425 c 0,79.032 54.044,146.054 127,165.936"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.926;stroke-dasharray:none;stroke-opacity:1"
+             id="path2722" /></g><g
+           id="g2724"
+           transform="translate(293.4141,379)"><path
+             d="m 0,0 c 5.368,-13.259 8.326,-27.734 8.326,-42.879 0,-63.235 -51.575,-114.81 -114.811,-114.81 -63.236,0 -114.811,51.575 -114.811,114.81 0,63.236 51.575,114.812 114.811,114.812 h 17.071"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.926;stroke-dasharray:none;stroke-opacity:1"
+             id="path2726" /></g><g
+           id="g2728"
+           transform="translate(200.1377,450.9326)"><path
+             d="M 0,0 C 26.079,0 73.264,4.176 102.856,32.567 138.334,-54.158 78.76,-101.31 8.579,-101.31 c -27.344,0 -52.549,7.793 -72.739,20.909 -17.57,-10.151 -38.459,-16.441 -60.991,-17.437"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.926;stroke-dasharray:none;stroke-opacity:1"
+             id="path2730" /></g><path
+           d="m 430,28.5 h 67 v 67 h -67 z"
+           style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.926;stroke-dasharray:none;stroke-opacity:1"
+           id="path2732" /><path
+           d="m 430,95.5 h 67 v 188.487 h -67 z"
+           style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.926;stroke-dasharray:none;stroke-opacity:1"
+           id="path2734" /><g
+           id="g2736"
+           transform="translate(463.5,353)"><path
+             d="m 0,0 33.5,-67 h -67 z"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:22.926;stroke-dasharray:none;stroke-opacity:1"
+             id="path2738" /></g></g></g></g></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/education-training.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/education-training.webp
new file mode 100644
index 0000000..6aa5db7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/education-training.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/entertainment-media.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/entertainment-media.webp
new file mode 100644
index 0000000..1ac2d02
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/entertainment-media.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/get-started.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/get-started.webp
new file mode 100644
index 0000000..0ce5ef2
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/get-started.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/high-quality.svg b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/high-quality.svg
new file mode 100644
index 0000000..45d464f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/high-quality.svg
@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 511 511" height="512" viewBox="0 0 511 511" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m138 481h112.5v-15h-69.494l23.382-53h79.213v-15h-246.101c-12.407 0-22.5-10.093-22.5-22.5v-300c0-12.407 10.093-22.5 22.5-22.5h129.612v-15h-129.612c-20.678 0-37.5 16.822-37.5 37.5v300c0 20.678 16.822 37.5 37.5 37.5h150.494l-23.382 53h-41.612v45h75.824v-15h-60.824z"/><path d="m278 359.5c0-12.407-10.093-22.5-22.5-22.5s-22.5 10.093-22.5 22.5 10.093 22.5 22.5 22.5 22.5-10.093 22.5-22.5zm-30 0c0-4.136 3.364-7.5 7.5-7.5s7.5 3.364 7.5 7.5-3.364 7.5-7.5 7.5-7.5-3.364-7.5-7.5z"/><path d="m33.5 306h15v15h-15z"/><path d="m427.5 168c26.191 0 47.5-21.309 47.5-47.5s-21.309-47.5-47.5-47.5-47.5 21.309-47.5 47.5 21.309 47.5 47.5 47.5zm0-80c17.92 0 32.5 14.58 32.5 32.5s-14.58 32.5-32.5 32.5-32.5-14.58-32.5-32.5 14.58-32.5 32.5-32.5z"/><path d="m473.5 38h-129.612v15h129.612c12.407 0 22.5 10.093 22.5 22.5v230.5h-432.5v15h432.5v54.5c0 12.407-10.093 22.5-22.5 22.5h-174.898v15h8.01l30 68h36.388v15h-159.176v15h174.176v-45h-41.611l-23.382-53h150.493c20.678 0 37.5-16.822 37.5-37.5v-300c0-20.678-16.822-37.5-37.5-37.5z"/><path d="m255.5 155c42.734 0 77.5-34.766 77.5-77.5s-34.766-77.5-77.5-77.5-77.5 34.766-77.5 77.5 34.766 77.5 77.5 77.5zm0-140c34.462 0 62.5 28.038 62.5 62.5s-28.038 62.5-62.5 62.5-62.5-28.038-62.5-62.5 28.038-62.5 62.5-62.5z"/><path d="m235 30.564v93.872l71.116-46.936zm15 27.872 28.884 19.064-28.884 19.064z"/><path d="m430.5 336h50v15h-50z"/><path d="m400.5 336h15v15h-15z"/><path d="m265.5 466h15v15h-15z"/><path d="m89.334 230.121-10.247-10.955c-3.713 3.473-7.404 7.161-10.971 10.962l10.938 10.265c3.346-3.565 6.805-7.021 10.28-10.272z"/><path d="m100.247 220.611c23.955-19.377 47.958-29.34 71.34-29.611.395-.004.789-.007 1.181-.007 32.882 0 62.926 15.822 89.299 47.027 20.15 23.841 30.409 48.123 30.508 48.36l1.921 4.62 11.798-.005 1.464-5.605c.195-.746 20.13-75.093 76.291-117.927l-9.097-11.927c-44.055 33.601-66.877 83.577-76.322 109.394-5.406-9.777-13.65-22.98-24.828-36.264-29-34.46-63.937-52.674-101.034-52.674-.45 0-.901.002-1.354.008-26.84.312-53.958 11.397-80.6 32.948z"/><path d="m69.434 251.313-11.564-9.553c-6.083 7.364-9.449 12.341-9.59 12.549l12.438 8.385c.03-.045 3.142-4.632 8.716-11.381z"/></g></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/visual-effects.svg b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/visual-effects.svg
new file mode 100644
index 0000000..7871694
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/threed-animation/visual-effects.svg
@@ -0,0 +1 @@
+<svg id="Layer_3" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 3"><path d="m30 15h4a1 1 0 0 0 1-1v-12a1 1 0 0 0 -1-1h-4a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1zm1-12h2v10h-2z"/><path d="m34 49h-4a1 1 0 0 0 -1 1v12a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-12a1 1 0 0 0 -1-1zm-1 12h-2v-10h2z"/><path d="m15 34v-4a1 1 0 0 0 -1-1h-12a1 1 0 0 0 -1 1v4a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zm-2-1h-10v-2h10z"/><path d="m18.416 42.414-2.046-3.437a1 1 0 0 0 -1.37-.348l-10.313 6.139a1 1 0 0 0 -.348 1.371l2.046 3.437a1 1 0 0 0 .615.457.976.976 0 0 0 .246.031 1 1 0 0 0 .511-.141l10.312-6.138a1 1 0 0 0 .347-1.371zm-10.824 5.279-1.023-1.718 8.594-5.116 1.023 1.719z"/><path d="m4.687 19.232 10.313 6.139a1.007 1.007 0 0 0 .511.14.982.982 0 0 0 .246-.031 1 1 0 0 0 .614-.457l2.046-3.437a1 1 0 0 0 -.348-1.371l-10.313-6.138a.99.99 0 0 0 -.756-.11 1 1 0 0 0 -.614.457l-2.047 3.437a1 1 0 0 0 .348 1.371zm2.9-2.925 8.594 5.115-1.023 1.719-8.589-5.116z"/><path d="m25.141 47.683-3.453-2.02a1 1 0 0 0 -1.368.358l-6.06 10.358a1 1 0 0 0 .359 1.368l3.452 2.02a1 1 0 0 0 1.368-.358l6.061-10.358a1 1 0 0 0 -.359-1.368zm-6.923 9.853-1.726-1.01 5.05-8.631 1.726 1.005z"/><path d="m43.68 46.021a1 1 0 0 0 -1.368-.358l-3.453 2.02a1 1 0 0 0 -.359 1.368l6.061 10.358a1 1 0 0 0 1.368.358l3.452-2.02a1 1 0 0 0 .359-1.368zm2.1 11.515-5.048-8.636 1.726-1 5.05 8.631z"/><path d="m20.32 17.979a1 1 0 0 0 .865.5.99.99 0 0 0 .5-.137l3.453-2.02a1 1 0 0 0 .359-1.368l-6.058-10.363a1 1 0 0 0 -1.368-.358l-3.452 2.02a1 1 0 0 0 -.359 1.368zm-2.1-11.515 5.05 8.632-1.726 1.009-5.05-8.631z"/><path d="m38.125 10.288h12v2h-12z" transform="matrix(.509 -.861 .861 .509 11.943 43.517)"/><path d="m46.623 18.725h12.002v2h-12.002z" transform="matrix(.852 -.523 .523 .852 -2.541 30.459)"/><path d="m50 31h12v2h-12z"/><path d="m51.609 38.299h2v12h-2z" transform="matrix(.517 -.856 .856 .517 -12.513 66.417)"/><path d="m32 20a12 12 0 1 0 12 12 12.013 12.013 0 0 0 -12-12zm0 22a10 10 0 1 1 10-10 10.011 10.011 0 0 1 -10 10z"/><path d="m26.474 25.149a1 1 0 0 0 -.474.851v12a1 1 0 0 0 1.447.9l12-6a1 1 0 0 0 0-1.79l-12-6a1.006 1.006 0 0 0 -.973.039zm1.526 2.469 8.764 4.382-8.764 4.382z"/></svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/3d-rendering-industry-40.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/3d-rendering-industry-40.webp
new file mode 100644
index 0000000..5e44469
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/3d-rendering-industry-40.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/automotive-excellence.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/automotive-excellence.webp
new file mode 100644
index 0000000..7d39c77
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/automotive-excellence.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/custom-design-capabilities.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/custom-design-capabilities.webp
new file mode 100644
index 0000000..3b72bbe
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/custom-design-capabilities.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/flexible-on-demand-production.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/flexible-on-demand-production.webp
new file mode 100644
index 0000000..5623dc7
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/flexible-on-demand-production.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/healthcare.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/healthcare.webp
new file mode 100644
index 0000000..966fa82
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/healthcare.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/prototype-first-methodology.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/prototype-first-methodology.webp
new file mode 100644
index 0000000..215726e
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/prototype-first-methodology.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/simulation-analysis.webp b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/simulation-analysis.webp
new file mode 100644
index 0000000..d4346a0
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/threed-design/simulation-analysis.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/automotibe.webp b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/automotibe.webp
new file mode 100644
index 0000000..f3b4020
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/automotibe.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/circuit.svg b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/circuit.svg
new file mode 100644
index 0000000..379e341
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/circuit.svg
@@ -0,0 +1,8 @@
+<svg id="Line" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#ffffff" stroke="#ffffff">
+    <path d="m55 8h-46c-2.75684 0-5 2.24316-5 5v30c0 2.75684 2.24316 5 5 5h17v6h-2c-.55273 0-1 .44727-1 1s.44727 1 1 1h16c1.31604-.03016 1.31579-1.973-.00004-2h-1.99996v-6h17c2.75684 0 5-2.24316 5-5v-23c-.03056-1.3095-1.97072-1.32178-2.00001.00005 0-.00005 0 18.99995 0 18.99995h-47.99999c-1.29377.01306-1.33055 1.97858.00006 1.99999-.00006 0 47.99994 0 47.99994 0v2c0 1.6543-1.3457 3-3 3h-46c-1.6543 0-3-1.3457-3-3v-30c0-1.6543 1.3457-3 3-3h46c1.6543 0 3 1.3457 3 3v2c.01638 1.32063 1.98439 1.30696 1.99999-.00004v-1.99996c0-2.75684-2.24316-5-5-5zm-19 46h-8v-6h8z" 
+      stroke-width="1"/>
+    <path d="m24 21.5c-3.95588.10369-3.95508 5.89689.00009 6 3.95579-.10369 3.95499-5.89689-.00009-6zm0 4c-1.31425-.02298-1.31406-1.9772.00004-2 1.31421.02298 1.31402 1.9772-.00004 2z"
+      stroke-width="0.5"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/cmos-design.svg b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/cmos-design.svg
new file mode 100644
index 0000000..920a1c8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/cmos-design.svg
@@ -0,0 +1,17 @@
+<svg id="Layer_1" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
+  <path d="m53.387 16.227a.385.385 0 0 0 -.387-.385h-8.2v1.644h5.844a1 1 0 0 1 1 1v25.658a1 1 0 0 1 -1 1h-37.29a1 1 0 0 1 -1-1v-25.658a1 1 0 0 1 1-1h5.846v-1.644h-8.2a.385.385 0 0 0 -.385.385v30.728h42.772z" fill="#ffffff"/>
+  <path d="m25.116 33.341a1.817 1.817 0 0 0 3.634 0v-1.641h-3.634z" fill="#ffffff"/>
+  <path d="m53.387 51v-2.045h-42.774v2.045a.377.377 0 0 0 .385.377h42.002a.377.377 0 0 0 .387-.377z" fill="#ffffff"/>
+  <path d="m27.827 53.385-1.445 2.622h11.236l-1.445-2.622z" fill="#ffffff"/>
+  <path d="m37.942 17.426h1.735v9.033h-1.735z" fill="#ffffff"/>
+  <path d="m22.193 58.007a.575.575 0 0 0 -.575.575v1.418h20.764v-1.418a.575.575 0 0 0 -.575-.575z" fill="#ffffff"/>
+  <path d="m26.933 8.728a1.819 1.819 0 0 0 -1.817 1.817v1.641h3.634v-1.641a1.819 1.819 0 0 0 -1.817-1.817z" fill="#ffffff"/>
+  <path d="m42.8 4h-7.839v9.72l7.839-3.985zm-3.923 6.779a3.2 3.2 0 1 1 3.205-3.2 3.207 3.207 0 0 1 -3.203 3.2z" fill="#ffffff"/>
+  <path d="m25.116 14.186h3.634v15.515h-3.634z" fill="#ffffff"/>
+  <path d="m21.2 4v35.884h11.761v-35.884zm9.55 29.341a3.817 3.817 0 0 1 -7.634 0v-22.8a3.817 3.817 0 0 1 7.634 0z" fill="#ffffff"/>
+  <circle cx="38.879" cy="7.575" r="1.205" fill="#ffffff"/>
+  <path d="m34.961 39.884h7.839v-5.73l-7.839-3.984zm3.918-6.778a3.205 3.205 0 1 1 -3.2 3.2 3.209 3.209 0 0 1 3.2-3.2z" fill="#ffffff"/>
+  <circle cx="38.879" cy="36.311" r="1.205" fill="#ffffff"/>
+  <path d="m19.2 40.884v-21.4h-4.846v23.66h35.292v-23.658h-4.846v21.4a1 1 0 0 1 -1 1h-9.832-.007-.007-13.754a1 1 0 0 1 -1-1.002z" fill="#ffffff"/>
+  <path d="m34.961 27.926 7.839 3.984v-19.931l-7.841 3.984zm.981-11.5a1 1 0 0 1 1-1h3.735a1 1 0 0 1 1 1v11.033a1 1 0 0 1 -1 1h-3.735a1 1 0 0 1 -1-1z" fill="#ffffff"/>
+</svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/layout-design.svg b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/layout-design.svg
new file mode 100644
index 0000000..15bf982
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/layout-design.svg
@@ -0,0 +1,95 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2925"
+   xml:space="preserve"
+   width="682.66669"
+   height="682.66669"
+   viewBox="0 0 682.66669 682.66669"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2929"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2945"><path
+         d="M 0,512 H 512 V 0 H 0 Z"
+         id="path2943" /></clipPath></defs><g
+     id="g2931"
+     transform="matrix(1.3333333,0,0,-1.3333333,0,682.66667)"><path
+       d="M 376,276 H 136 v 100 h 240 z"
+       style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path2933" /><path
+       d="m 226,216 h -90 v -80 h 90 z"
+       style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path2935" /><path
+       d="m 376,216 h -90 v -80 h 90 z"
+       style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+       id="path2937" /><g
+       id="g2939"><g
+         id="g2941"
+         clip-path="url(#clipPath2945)"><path
+           d="m 497,437 h -60 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2947" /><path
+           d="m 286,437 h -60 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2949" /><path
+           d="m 497,226 h -60 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2951" /><path
+           d="M 75,437 H 15 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2953" /><path
+           d="M 75,226 H 15 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2955" /><path
+           d="m 497,15 h -60 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2957" /><path
+           d="m 286,15 h -60 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2959" /><path
+           d="M 75,15 H 15 v 60 h 60 z"
+           style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+           id="path2961" /><g
+           id="g2963"
+           transform="translate(467,286)"><path
+             d="M 0,0 V 151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2965" /></g><g
+           id="g2967"
+           transform="translate(467,226)"><path
+             d="M 0,0 V -151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2969" /></g><g
+           id="g2971"
+           transform="translate(45,286)"><path
+             d="M 0,0 V 151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2973" /></g><g
+           id="g2975"
+           transform="translate(45,226)"><path
+             d="M 0,0 V -151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2977" /></g><g
+           id="g2979"
+           transform="translate(75,467)"><path
+             d="M 0,0 H 151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2981" /></g><g
+           id="g2983"
+           transform="translate(437,467)"><path
+             d="M 0,0 H -151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2985" /></g><g
+           id="g2987"
+           transform="translate(286,45)"><path
+             d="M 0,0 H 151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2989" /></g><g
+           id="g2991"
+           transform="translate(226,45)"><path
+             d="M 0,0 H -151"
+             style="fill:none;stroke:#ffffff;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2993" /></g></g></g></g></svg>
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/semi-conductor.webp b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/semi-conductor.webp
new file mode 100644
index 0000000..3710077
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/semi-conductor.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/tele-communication.webp b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/tele-communication.webp
new file mode 100644
index 0000000..3accddf
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/tele-communication.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/vhdl.svg b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/vhdl.svg
new file mode 100644
index 0000000..066a1a5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/images/services/vlsi/vhdl.svg
@@ -0,0 +1,20 @@
+<svg id="Icon_Template" viewBox="0 0 216.03 216.03" xmlns="http://www.w3.org/2000/svg" data-name="Icon Template">
+  <g fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="m172.29 54.76v79.31h-6.51v-72.56l-24.85-23.26h-79.19a8.26 8.26 0 0 0 -1.73.18 8.34 8.34 0 0 1 8.24-6.92h79.19z"/>
+    <path d="m172.29 54.76h-13.72l-11.13-10.42v-12.83z"/>
+    <path d="m165.78 61.51v72.56h-29.05a4.78 4.78 0 0 0 -4.77 4.78v11.43a4.78 4.78 0 0 1 -4.77 4.78h-35.19a4.79 4.79 0 0 1 -4.78-4.78v-11.43a4.78 4.78 0 0 0 -4.78-4.78h-29v-16h83.21.36a3.59 3.59 0 0 0 1.55-.54 1.88 1.88 0 0 0 .23-.16l.21-.18a1.19 1.19 0 0 0 .2-.19 3.34 3.34 0 0 0 .84-1.46 3.94 3.94 0 0 0 .1-.47 2.81 2.81 0 0 0 0-.5v-32.49a2.74 2.74 0 0 0 0-.5 3.56 3.56 0 0 0 -.1-.47 2.25 2.25 0 0 0 -.08-.24 3.2 3.2 0 0 0 -.4-.78 3.72 3.72 0 0 0 -.56-.63l-.21-.18a1.88 1.88 0 0 0 -.23-.16l-.24-.14a3.84 3.84 0 0 0 -.62-.26 3.13 3.13 0 0 0 -.69-.14h-.36-83.28v-31.96a8.38 8.38 0 0 1 6.63-8.19 8.26 8.26 0 0 1 1.73-.18h79.19z"/>
+    <path d="m165.78 61.51h-18.85a6 6 0 0 1 -6-6v-17.26l6.51 6.09 11.13 10.42z"/>
+    <path d="m172.29 134.07v45.67a.93.93 0 0 1 0 .24 4.77 4.77 0 0 1 -4.77 4.54h-115.87a4.77 4.77 0 0 1 -4.77-4.52.93.93 0 0 1 0-.24v-45.69h35.52a4.78 4.78 0 0 1 4.78 4.78v11.43a4.79 4.79 0 0 0 4.82 4.78h35.23a4.78 4.78 0 0 0 4.77-4.78v-11.43a4.78 4.78 0 0 1 4.77-4.78z"/>
+    <path d="m64.53 55.35h65.12v6.16h-65.12z"/>
+    <path d="m64.53 67h90.71v6.16h-90.71z"/>
+    <path d="m155.24 81.11v6.16h-15.13v-5.19a3.45 3.45 0 0 0 -.14-1z"/>
+    <path d="m140.11 95.22h15.13v6.17h-15.13z"/>
+    <path d="m155.24 109.34v6.16h-15.24a3.45 3.45 0 0 0 .14-1v-5.19z"/>
+    <path d="m64.53 123.45h90.71v6.16h-90.71z"/>
+    <path d="m140.11 82.08v32.45a2.81 2.81 0 0 1 0 .5 3.94 3.94 0 0 1 -.1.47 3.34 3.34 0 0 1 -.84 1.46 1.8 1.8 0 0 1 -.2.19l-.21.18a1.88 1.88 0 0 1 -.23.16 3.59 3.59 0 0 1 -1.55.54h-.36-89.37a3.51 3.51 0 0 1 -3.52-3.52v-32.43a3.52 3.52 0 0 1 3.52-3.52h89.33.36a3.13 3.13 0 0 1 .69.14 3.84 3.84 0 0 1 .62.26l.24.14a1.88 1.88 0 0 1 .23.16l.21.18a3.72 3.72 0 0 1 .56.63 3.2 3.2 0 0 1 .4.78 2.25 2.25 0 0 1 .08.24 3.56 3.56 0 0 1 .1.47 2.74 2.74 0 0 1 .04.52z"/>
+    <path d="m139.49 80.09a3.72 3.72 0 0 0 -.56-.63 3.37 3.37 0 0 1 .56.63z"/>
+    <path d="m53.28 87.54a3.27 3.27 0 0 1 .95-2.54 3.69 3.69 0 0 1 2.38-.83c2.06.1 3.1 1.29 3.1 3.57v19h7a3 3 0 0 1 2.3.87 3.25 3.25 0 0 1 .79 2.3 2.89 2.89 0 0 1 -1 2 3.15 3.15 0 0 1 -2 .72h-10.27a3.1 3.1 0 0 1 -2.37-1 2.93 2.93 0 0 1 -.88-2.07z"/>
+    <path d="m86 83.73a15.2 15.2 0 0 1 5.66 1 11.17 11.17 0 0 1 2.42 1.27 12.48 12.48 0 0 1 2 1.75 13.24 13.24 0 0 1 2.81 4.68 17.46 17.46 0 0 1 1 6.1 17.14 17.14 0 0 1 -1 6 13.6 13.6 0 0 1 -2.81 4.68 11.53 11.53 0 0 1 -4.39 3 16.09 16.09 0 0 1 -11.33 0 12.1 12.1 0 0 1 -4.39-3 12.94 12.94 0 0 1 -2.83-4.68 17.18 17.18 0 0 1 -1-6 17.51 17.51 0 0 1 1-6.06 12.47 12.47 0 0 1 2.86-4.7 12.94 12.94 0 0 1 2-1.77 12 12 0 0 1 2.35-1.25 15.22 15.22 0 0 1 5.65-1.02zm0 6a6.23 6.23 0 0 0 -3.93 1.23 7.26 7.26 0 0 0 -2.3 3.22 12.37 12.37 0 0 0 -.77 4.37 10.43 10.43 0 0 0 1.8 6.17 5.79 5.79 0 0 0 5.2 2.55 6.05 6.05 0 0 0 3.94-1.27 7 7 0 0 0 2.32-3.17 12.41 12.41 0 0 0 .74-4.28 12.92 12.92 0 0 0 -.71-4.39 7.34 7.34 0 0 0 -2.32-3.22 6.1 6.1 0 0 0 -3.97-1.23z"/>
+    <path d="m103.52 98.39a15.43 15.43 0 0 1 1.32-6.39 17.29 17.29 0 0 1 1.57-2.74 12.52 12.52 0 0 1 2-2.17 13.47 13.47 0 0 1 9.11-3.33 22.16 22.16 0 0 1 3.68.32 12.58 12.58 0 0 1 3.5 1.07 6.85 6.85 0 0 1 2.57 2 4.22 4.22 0 0 1 1.01 2.85 2.43 2.43 0 0 1 -.75 1.86 3.51 3.51 0 0 1 -2 .83 4.4 4.4 0 0 1 -1.39-.41 11.06 11.06 0 0 1 -1.51-.87c-.62-.4-1.07-.68-1.34-.83a7.54 7.54 0 0 0 -3.65-.83 7.06 7.06 0 0 0 -3 .67 7.27 7.27 0 0 0 -2.32 1.94 8.38 8.38 0 0 0 -1.44 2.82 21.22 21.22 0 0 0 -.48 3.33 12.88 12.88 0 0 0 .83 4.23 7.48 7.48 0 0 0 2.34 3.29 6.1 6.1 0 0 0 4 1.28 5.85 5.85 0 0 0 3.4-.93 5.21 5.21 0 0 0 1.9-2.09 6.73 6.73 0 0 0 .71-2.38h-3.75a3.16 3.16 0 0 1 -2.34-.91 3.25 3.25 0 0 1 -.91-2.14 3.15 3.15 0 0 1 .91-2.09 3 3 0 0 1 2.26-.83h7.08a2.89 2.89 0 0 1 2.67 1.06 4.47 4.47 0 0 1 .72 2.45 15.55 15.55 0 0 1 -2.13 8.21 10.39 10.39 0 0 1 -4.45 4 13.48 13.48 0 0 1 -6.4 1.55 15.16 15.16 0 0 1 -6-1.28 12.32 12.32 0 0 1 -3.08-2 13.69 13.69 0 0 1 -2.49-3 15.75 15.75 0 0 1 -2.15-8.54z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/images/software/VLSI-design-services.webp b/Tech4biz-Version01/Tech4biz/public/images/software/VLSI-design-services.webp
new file mode 100644
index 0000000..7c712ba
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/software/VLSI-design-services.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/software/security growth.webp b/Tech4biz-Version01/Tech4biz/public/images/software/security growth.webp
new file mode 100644
index 0000000..730864a
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/software/security growth.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/software/security-growth-vlsi.webp b/Tech4biz-Version01/Tech4biz/public/images/software/security-growth-vlsi.webp
new file mode 100644
index 0000000..f0af189
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/software/security-growth-vlsi.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/software/software-banner.jpg b/Tech4biz-Version01/Tech4biz/public/images/software/software-banner.jpg
new file mode 100644
index 0000000..37c3706
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/software/software-banner.jpg differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/software/software-development-solutions.webp b/Tech4biz-Version01/Tech4biz/public/images/software/software-development-solutions.webp
new file mode 100644
index 0000000..1c36bd8
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/software/software-development-solutions.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-1.png b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-1.png
new file mode 100644
index 0000000..35f02e3
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-1.png differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-2.png b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-2.png
new file mode 100644
index 0000000..ba7eed0
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-2.png differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-3.png b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-3.png
new file mode 100644
index 0000000..71379f0
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-3.png differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-4.png b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-4.png
new file mode 100644
index 0000000..3507298
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/solutions/approach/app-4.png differ
diff --git a/Tech4biz-Version01/Tech4biz/public/images/tech4biz-video-thumbnail.webp b/Tech4biz-Version01/Tech4biz/public/images/tech4biz-video-thumbnail.webp
new file mode 100644
index 0000000..9954aa1
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/images/tech4biz-video-thumbnail.webp differ
diff --git a/Tech4biz-Version01/Tech4biz/public/robots.txt b/Tech4biz-Version01/Tech4biz/public/robots.txt
new file mode 100644
index 0000000..5df37a1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/robots.txt
@@ -0,0 +1,20 @@
+# robots.txt for Tech4Biz Solutions
+
+# Apply rules to all user agents
+User-agent: *
+
+# Allow crawling of all content by default
+Allow: /
+
+# Disallow temporary files and build artifacts
+Disallow: /temp/
+Disallow: /build/
+Disallow: /admin/
+Disallow: /api/
+
+# Allow static assets for proper rendering
+Allow: /static/
+Allow: /assets/
+
+# Sitemap location
+Sitemap: https://tech4bizsolutions.com/sitemap.xml
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/sitemap.xml b/Tech4biz-Version01/Tech4biz/public/sitemap.xml
new file mode 100644
index 0000000..86cdde4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/public/sitemap.xml
@@ -0,0 +1,301 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+
+  <url>
+    <loc>https://tech4bizsolutions.com/</loc>
+    <lastmod>2025-01-13T10:30:15.249Z</lastmod>
+    <priority>1.0</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/about</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.7</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/contact</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.6</priority>
+  </url>
+ 
+   <url>
+    <loc>https://tech4bizsolutions.com/privacy-policy</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.1</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/terms-and-conditions</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.1</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/cookies-policy</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.1</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/refund-policy</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.1</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/software-development</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.4</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/vlsi-design</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.4</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/security-platform</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/risk-analytics</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/commerce-intelligence</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/retail-management</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/speech-recognition</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/learning-platform</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/retail-automation</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/case-studies/cloud-commerce</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/urban-connectivity</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/blockchain-technology</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/iot-connectivity</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/fitness-training</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/healthcare-management</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/edge-computing</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/manufacturing-automation</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/slider-detail/ar-visualization</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/business-services/revolutionizing-healcare-through-ai</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/business-services/acceleration-in-quantam-computing</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/business-services/three-d-engineering-design</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/business-services/ev-pcb-borads-design</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.5</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/careers</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.7</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/business-solutions/deployment-of-asic-ai</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.3</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/business-solutions/improved-efficiency</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.3</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/business-solutions/advanced-fpga-design</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.3</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/business-solutions/flexible-solutions</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.3</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/service-details/pcbaManufacturing</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.2</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/service-details/3dPrinting</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.2</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/services</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/3d-animation-and-character-designing</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/3d-designing-and-printing</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/brand-building-and-marketing-services</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/cloud-infrastructure-deployments</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/cyber-security-solutions</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/distributed-ledger-technologies</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/hardware-design-development</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/immersive-technology</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/internet-of-things</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/pcba-and-pcb-manufacturing</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/quantum-computing</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/r-and-d-solutions</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/software-development</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/software-designing-services</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/social-media-designing-services</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/services/vlsi-design</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.9</priority>
+  </url>
+
+   <url>
+    <loc>https://tech4bizsolutions.com/product/cloudriv</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.8</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/product/codenuk</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.8</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/product/lms</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.8</priority>
+  </url>
+   <url>
+    <loc>https://tech4bizsolutions.com/product/cloudtopiaa</loc>
+    <lastmod>2025-01-13T14:32:00.000Z</lastmod>
+    <priority>0.8</priority>
+  </url>
+ 
+</urlset>
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/public/videos/Tech4biz.mp4 b/Tech4biz-Version01/Tech4biz/public/videos/Tech4biz.mp4
new file mode 100644
index 0000000..0ebeb4b
Binary files /dev/null and b/Tech4biz-Version01/Tech4biz/public/videos/Tech4biz.mp4 differ
diff --git a/Tech4biz-Version01/Tech4biz/src/App.css b/Tech4biz-Version01/Tech4biz/src/App.css
new file mode 100644
index 0000000..e69de29
diff --git a/Tech4biz-Version01/Tech4biz/src/App.jsx b/Tech4biz-Version01/Tech4biz/src/App.jsx
new file mode 100644
index 0000000..77cb9df
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/App.jsx
@@ -0,0 +1,27 @@
+import { Suspense } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import MainLayout from '@components/layout/MainLayout';
+import ErrorBoundary from '@components/common/error/ErrorBoundary';
+import LoadingSpinner from '@components/common/LoadingSpinner';
+import routeConfig from './routes/routeConfig';
+
+export default function App() {
+  return (
+    <ErrorBoundary>
+      <HelmetProvider>
+        <Router>
+          <MainLayout>
+            <Suspense fallback={<LoadingSpinner />}>
+              <Routes>
+                {routeConfig.map((route, index) => (
+                  <Route key={index} path={route.path} element={route.element} />
+                ))}
+              </Routes>
+            </Suspense>
+          </MainLayout>
+        </Router>
+      </HelmetProvider>
+    </ErrorBoundary>
+  );
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/LoadingFallback.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/LoadingFallback.jsx
new file mode 100644
index 0000000..dca5c74
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/LoadingFallback.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const spin = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+const LoadingContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  gap: 1rem;
+`;
+
+const Spinner = styled.div`
+  width: 40px;
+  height: 40px;
+  border: 4px solid #3b82f6;
+  border-top: 4px solid transparent;
+  border-radius: 50%;
+  animation: ${spin} 1s linear infinite;
+`;
+
+const LoadingText = styled.p`
+  color: #4b5563;
+  font-size: 1rem;
+  font-weight: 500;
+  margin: 0;
+`;
+
+export const LoadingFallback = () => (
+  <LoadingContainer>
+    <Spinner />
+    <LoadingText>Loading...</LoadingText>
+  </LoadingContainer>
+);
+
+export default LoadingFallback;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/LoadingSpinner.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/LoadingSpinner.jsx
new file mode 100644
index 0000000..b7ad9ae
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/LoadingSpinner.jsx
@@ -0,0 +1,22 @@
+import { motion } from 'framer-motion';
+
+const LoadingSpinner = () => {
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-light-primaryBg">
+      <motion.div
+        className="w-16 h-16 border-4 border-transparent border-t-[#2563EB] border-b-[#2563EB] rounded-full"
+        animate={{ rotate: 360 }}
+        transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+      >
+        <motion.div
+          className="absolute top-0 left-0 w-full h-full rounded-full"
+          animate={{ scale: [1, 1.2, 1] }}
+          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
+          style={{ background: "radial-gradient(circle, rgba(37,99,235,0.2) 0%, rgba(37,99,235,0) 70%)" }}
+        />
+      </motion.div>
+    </div>
+  );
+};
+
+export default LoadingSpinner; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/NotFound.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/NotFound.jsx
new file mode 100644
index 0000000..16e9d56
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/NotFound.jsx
@@ -0,0 +1,123 @@
+import { motion } from "framer-motion"
+import { Home, ArrowLeft } from "lucide-react"
+import { Link, useNavigate } from "react-router-dom"
+
+export default function NotFound() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-[#1b1b1b] px-4 py-8">
+      <div className="max-w-2xl w-full">
+        <motion.div
+          className="text-center"
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          {/* 404 Text with wave animation */}
+          <motion.h1
+            className="text-8xl font-bold text-[#2563EB]"
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: 1,
+              y: [0, -8, 0, -8, 0],
+            }}
+            transition={{
+              opacity: { duration: 0.6 },
+              y: {
+                duration: 4,
+                repeat: Number.POSITIVE_INFINITY,
+                ease: "easeInOut",
+                times: [0, 0.25, 0.5, 0.75, 1],
+              },
+            }}
+          >
+            404
+          </motion.h1>
+
+          {/* Main Message */}
+          <motion.h2
+            className="text-3xl font-bold mt-6 mb-4 text-white"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2, duration: 0.5 }}
+          >
+            Page Not Found
+          </motion.h2>
+
+          {/* Description */}
+          <motion.p
+            className="text-lg text-[#9CA3AF] mb-10 max-w-lg mx-auto"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3, duration: 0.5 }}
+          >
+            We've searched high and low, but the page you're looking for seems to have wandered off the map. Let's
+            help you find your way back.
+          </motion.p>
+
+          {/* Divider */}
+          <motion.div
+            className="w-16 h-1 bg-[#F97316] mx-auto mb-10"
+            initial={{ width: 0 }}
+            animate={{ width: 64 }}
+            transition={{ delay: 0.4, duration: 0.5 }}
+          />
+
+          {/* Buttons */}
+          <motion.div
+            className="flex flex-col sm:flex-row justify-center gap-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.5, duration: 0.5 }}
+          >
+            <motion.button
+              onClick={() => navigate("/")}
+              className="px-6 py-3 bg-[#F97316] text-white rounded-md font-medium flex items-center justify-center gap-2 transition-colors hover:bg-[#ea580c]"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <Home className="w-5 h-5" />
+              Back to Home
+            </motion.button>
+
+            <motion.button
+              onClick={() => navigate(-1)}
+              className="px-6 py-3 bg-transparent border border-[#6B7280] text-[#9CA3AF] rounded-md font-medium flex items-center justify-center gap-2 transition-colors hover:bg-gray-800 hover:text-white"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <ArrowLeft className="w-5 h-5" />
+              Go Back
+            </motion.button>
+          </motion.div>
+
+          {/* Helpful links section */}
+          <motion.div
+            className="mt-16"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.6, duration: 0.5 }}
+          >
+            <p className="text-sm text-[#6B7280] mb-4">You may find these links helpful:</p>
+            <div className="flex flex-wrap justify-center gap-x-6 gap-y-2">
+              <Link to="/" className="text-[#2563EB] hover:underline text-sm">
+                Home
+              </Link>
+              <Link to="/about" className="text-[#2563EB] hover:underline text-sm">
+                About
+              </Link>
+              <Link to="/contact" className="text-[#2563EB] hover:underline text-sm">
+                Contact
+              </Link>
+              <Link to="/careers" className="text-[#2563EB] hover:underline text-sm">
+                Careers
+              </Link>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+    </div>
+  )
+}
+
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/error/ErrorBoundary.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/error/ErrorBoundary.jsx
new file mode 100644
index 0000000..2e26bcb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/error/ErrorBoundary.jsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    console.error("ErrorBoundary caught an error:", error, info);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center min-h-screen bg-[#1b1b1b] p-6">
+          <motion.div
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+            className="text-center"
+          >
+            <motion.h2 
+              className="text-3xl font-bold mb-4 text-[#2563EB]"
+              animate={{ opacity: [1, 0.8, 1] }}
+              transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+            >
+              Oops! Something went wrong.
+            </motion.h2>
+            <p className="text-lg mb-6 text-[#6B7280] max-w-md">
+              We're working on fixing this. Please try again in a moment.
+            </p>
+            <motion.button 
+              onClick={this.handleRetry}
+              className="px-6 py-2 bg-[#F97316] text-[#ffff] rounded-md font-medium text-lg transition-colors duration-300"
+              whileTap={{ scale: 0.95 }}
+            >
+              Retry
+            </motion.button>
+          </motion.div>
+          
+          <motion.div
+            className="mt-8 text-[#6B7280] text-sm"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.5 }}
+          >
+            Error: {this.state.error && this.state.error.toString()}
+          </motion.div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
+
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/error/ServiceErrorBoundary.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/error/ServiceErrorBoundary.jsx
new file mode 100644
index 0000000..a78fbc8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/error/ServiceErrorBoundary.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+
+class ErrorBoundaryInner extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Error caught by boundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center bg-gray-50 px-4">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-center"
+          >
+            <h1 className="text-4xl font-bold text-gray-900 mb-4">
+              Oops! Something went wrong
+            </h1>
+            <p className="text-gray-600 mb-8">
+              We apologize for the inconvenience. Please try again later.
+            </p>
+            <button
+              onClick={() => {
+                this.props.navigate('/');
+                this.setState({ hasError: false, error: null });
+              }}
+              className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            >
+              Return Home
+            </button>
+          </motion.div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+// Wrapper component to provide navigation context
+const ServiceErrorBoundary = ({ children }) => {
+  const navigate = useNavigate();
+  return <ErrorBoundaryInner navigate={navigate}>{children}</ErrorBoundaryInner>;
+};
+
+export default ServiceErrorBoundary;
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollIndicator.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollIndicator.jsx
new file mode 100644
index 0000000..fa4d7d3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollIndicator.jsx
@@ -0,0 +1,29 @@
+// import React, { useState, useEffect } from "react";
+
+// const ScrollIndicator = () => {
+//   const [scrollWidth, setScrollWidth] = useState(0);
+
+//   useEffect(() => {
+//     const updateScrollProgress = () => {
+//       const scrollTop = window.scrollY;
+//       const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+//       const scrollPercent = (scrollTop / docHeight) * 100;
+//       setScrollWidth(scrollPercent);
+//     };
+
+//     window.addEventListener("scroll", updateScrollProgress);
+
+//     return () => window.removeEventListener("scroll", updateScrollProgress);
+//   }, []);
+
+//   return (
+//     <div className="fixed top-16 left-0 w-full z-[9999]">
+//       <div
+//         className="h-1.5 rounded-e-xl bg-blue-500 transition-all duration-150"
+//         style={{ width: `${scrollWidth}%` }}
+//       ></div>
+//     </div>
+//   );
+// };
+
+// export default ScrollIndicator;
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollToTop.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollToTop.jsx
new file mode 100644
index 0000000..11a9ad3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollToTop.jsx
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+const ScrollToTop = () => {
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  return null; // No UI to render
+};
+
+export default ScrollToTop;
diff --git a/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollToTopButton.jsx b/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollToTopButton.jsx
new file mode 100644
index 0000000..ebb5705
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/common/scroll/ScrollToTopButton.jsx
@@ -0,0 +1,41 @@
+import { ArrowUp } from "lucide-react";
+import React, { useState, useEffect } from "react";
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      // Check if the scroll position is greater than 1500vh
+      if (window.scrollY > window.innerHeight * 1.2) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className={`fixed bottom-8 right-8 bg-blue-500 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-all duration-300 ${
+        isVisible ? "opacity-100" : "opacity-0 pointer-events-none"
+      } z-[10000]`}
+    >
+      <ArrowUp/>
+    </button>
+  );
+};
+
+export default ScrollToTopButton;
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/Footer.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/Footer.jsx
new file mode 100644
index 0000000..0cc6995
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/Footer.jsx
@@ -0,0 +1,65 @@
+'use client'
+import React from 'react'
+import { motion } from 'framer-motion'
+import footerConfig from './config/footerConfig.json'
+import Logo from '/images/logos/logo-light.webp'
+import { containerVariants, legalLinkAnimation } from './animations/footerAnimations'
+import FooterLinks from './components/FooterLinks'
+import SocialIcons from './components/SocialIcons'
+
+const Footer = () => {
+  const { footerLinks, socialIcons, legalLinks } = footerConfig
+
+  return (
+    <motion.footer 
+      className="bg-light-primaryBg text-white py-6 md:py-10 font-poppins"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      <div className="max-w-7xl mx-auto px-4 md:px-8">
+        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-6 md:gap-8 mb-6">
+          {/* Logo and Copyright Section */}
+          <div className="flex flex-col items-center md:items-start space-y-4 md:w-1/4">
+            <img src={Logo} alt="Footer Logo" className="h-10" />
+            <p className="text-xs text-white/80">
+              Copyright © {new Date().getFullYear()}
+              <a 
+                target='_blank'
+                rel="noopener noreferrer nofollow"
+                className='text-[#F97316]'
+                href="https://tech4bizsolutions.com"
+              >
+                Tech4Biz Solutions.
+              </a>
+            </p>
+            <SocialIcons socialIcons={socialIcons} />
+          </div>
+
+          {/* Links Section */}
+          <div className="md:w-3/4 text-[14px]">
+            <FooterLinks footerLinks={footerLinks} />
+          </div>
+        </div>
+
+        {/* Legal Links */}
+        <div className="border-t border-white/10 pt-4">
+          <div className="flex flex-wrap justify-center md:justify-start gap-x-4 gap-y-2 text-xs">
+            {legalLinks.map((item) => (
+              <motion.a
+                key={item.label}
+                href={item.link}
+                className="text-white/80 hover:text-white transition-colors duration-200"
+                whileHover={legalLinkAnimation.hover}
+              >
+                {item.label}
+              </motion.a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </motion.footer>
+  )
+}
+
+export default Footer
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/animations/footerAnimations.js b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/animations/footerAnimations.js
new file mode 100644
index 0000000..23d250c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/animations/footerAnimations.js
@@ -0,0 +1,38 @@
+export const containerVariants = {
+    hidden: {
+      opacity: 0,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.6,
+        staggerChildren: 0.1
+      }
+    }
+  }
+  
+  export const itemVariants = {
+    hidden: {
+      opacity: 0,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      y: 0
+    }
+  }
+  
+  export const socialIconAnimation = {
+    hover: { scale: 1.1 }
+  }
+  
+  export const linkAnimation = {
+    hover: { x: 2 },
+    transition: { duration: 0.2 }
+  }
+  
+  export const legalLinkAnimation = {
+    hover: { scale: 1.05 }
+  } 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/components/FooterLinks.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/components/FooterLinks.jsx
new file mode 100644
index 0000000..38cde2b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/components/FooterLinks.jsx
@@ -0,0 +1,91 @@
+import { motion } from 'framer-motion'
+import { useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { linkAnimation } from '../animations/footerAnimations'
+
+const FooterLinks = ({ footerLinks }) => {
+  const [expandedSection, setExpandedSection] = useState(null)
+
+  const toggleSection = (title) => {
+    setExpandedSection(expandedSection === title ? null : title)
+  }
+
+  const renderLink = (item) => {
+    const isExternal = item.link.startsWith('http')
+    
+    return isExternal ? (
+      <a 
+        href={item.link}
+        className="text-white/80 hover:text-white transition-colors duration-200 block py-1 font-poppins"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+      >
+        {item.label}
+      </a>
+    ) : (
+      <Link 
+        to={item.link}
+        className="text-white/80 hover:text-white transition-colors duration-200 block py-1 font-poppins"
+      >
+        {item.label}
+      </Link>
+    )
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      {Object.entries(footerLinks).map(([title, items]) => (
+        <div key={title} className="border-b md:border-none border-gray-700">
+          <button 
+            onClick={() => toggleSection(title)}
+            className="w-full flex justify-between items-center py-2 md:py-0 md:mb-3"
+          >
+            <h2 className="text-white font-medium text-lg font-poppins">{title}</h2>
+            <ChevronDown 
+              className={`w-4 h-4 transition-transform md:hidden ${
+                expandedSection === title ? 'rotate-180' : ''
+              }`}
+            />
+          </button>
+          {title === 'Services' ? (
+            <div className="grid grid-cols-2 gap-x-4">
+              {[items.slice(0, 5), items.slice(5)].map((columnItems, idx) => (
+                <ul key={idx} className={`space-y-2 overflow-hidden transition-all duration-300 md:h-auto ${
+                  expandedSection === title ? 'h-auto pb-2' : 'h-0 md:h-auto'
+                }`}>
+                  {columnItems.map((item) => (
+                    <motion.li 
+                      key={item.label}
+                      whileHover={linkAnimation.hover}
+                      transition={linkAnimation.transition}
+                      className='text-12px'
+                    >
+                      {renderLink(item)}
+                    </motion.li>
+                  ))}
+                </ul>
+              ))}
+            </div>
+          ) : (
+            <ul className={`space-y-2 overflow-hidden transition-all duration-300 md:h-auto ${
+              expandedSection === title ? 'h-auto pb-2' : 'h-0 md:h-auto'
+            }`}>
+              {items.map((item) => (
+                <motion.li 
+                  key={item.label}
+                  whileHover={linkAnimation.hover}
+                  transition={linkAnimation.transition}
+                >
+                  {renderLink(item)}
+                </motion.li>
+              ))}
+            </ul>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default FooterLinks 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/components/SocialIcons.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/components/SocialIcons.jsx
new file mode 100644
index 0000000..4c49a3a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/components/SocialIcons.jsx
@@ -0,0 +1,35 @@
+import { motion } from 'framer-motion'
+import { Facebook, Instagram, Youtube, Twitter, Linkedin } from 'lucide-react'
+import { socialIconAnimation } from '../animations/footerAnimations'
+
+const iconComponents = {
+  Facebook,
+  Instagram,
+  Youtube,
+  Twitter,
+  Linkedin
+}
+
+const SocialIcons = ({ socialIcons }) => {
+  return (
+    <div className="flex space-x-4">
+      {socialIcons.map((icon) => {
+        const IconComponent = iconComponents[icon.icon]
+        return (
+          <motion.a
+            key={icon.label}
+            href={icon.link}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className="text-white/80 hover:text-white transition-colors duration-200"
+            whileHover={socialIconAnimation.hover}
+          >
+            <IconComponent className="h-5 w-5" aria-label={icon.label} />
+          </motion.a>
+        )
+      })}
+    </div>
+  )
+}
+
+export default SocialIcons 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/config/footerConfig.json b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/config/footerConfig.json
new file mode 100644
index 0000000..d5770bf
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Footer/config/footerConfig.json
@@ -0,0 +1,41 @@
+{
+    "footerLinks": {
+      "Services": [
+        { "label": "Cloud Infrastructure", "link": "/services/cloud-infrastructure-deployments" },
+        { "label": "PCBA & PCB Manufacturing", "link": "/services/pcba-and-pcb-manufacturing" },
+        { "label": "3D Designing and Printing", "link": "/services/3d-designing-and-printing" },
+        { "label": "Software Development", "link": "/services/software-development" },
+        { "label": "Hardware Design", "link": "/services/hardware-design-development" },
+        { "label": "VLSI Design", "link": "/services/vlsi-design" },
+        { "label": "IoT Solutions", "link": "/services/internet-of-things" },
+        { "label": "Quantam Computing", "link": "/services/quantum-computing" },
+        { "label": "Cyber Seecurity Solutions", "link": "/services/cyber-security-solutions" },
+        { "label": "Immersive Technology", "link": "/services/immersive-technology" }
+      ],
+      "Resources": [
+        { "label": "Case Studies", "link": "https://showcase.tech4bizsolutions.com/" },
+        { "label": "Technical Blogs", "link": "https://blog.tech4bizsolutions.com/" },
+        { "label": "Whitepapers", "link": "https://showcase.tech4bizsolutions.com/" },
+        { "label": "Research Papers", "link": "https://showcase.tech4bizsolutions.com/" }
+      ],
+      "Company": [
+        { "label": "About Us", "link": "/about" },
+        { "label": "News & Press", "link": "/press-release" },
+        { "label": "Contact Us", "link": "/contact" },
+        { "label": "Careers", "link": "/careers" }
+      ]
+    },
+    "socialIcons": [
+      { "label": "Facebook", "link": "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr", "icon": "Facebook" },
+      { "label": "Instagram", "link": "https://instagram.com", "icon": "Instagram" },
+      { "label": "Youtube", "link": "https://www.youtube.com/@Tech4bizz", "icon": "Youtube" },
+      { "label": "Twitter", "link": "https://x.com/Tech4bizContact", "icon": "Twitter" },
+      { "label": "Linkedin", "link": "https://www.linkedin.com/company/tech4biz-solutions-private-limited", "icon": "Linkedin" }
+    ],
+    "legalLinks": [
+      { "label": "Privacy Policy", "link": "/privacy-policy" },
+      { "label": "Terms and Conditions", "link": "/terms-and-conditions" },
+      { "label": "Cookies Policy", "link": "/cookies-policy" },
+      { "label": "Refund & Cancellation Policy", "link": "/refund-policy" }
+    ]
+  } 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/MainLayout.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/MainLayout.jsx
new file mode 100644
index 0000000..c46ed97
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/MainLayout.jsx
@@ -0,0 +1,34 @@
+import React, { Suspense } from 'react';
+import Header from './Navbar/Header';
+import LoadingSpinner from '@components/common/LoadingSpinner';
+import ErrorBoundary from '@components/common/error/ErrorBoundary';
+import ScrollToTop from '@components/common/scroll/ScrollToTop';
+
+// Lazy load Footer
+const Footer = React.lazy(() => import('./Footer/Footer'));
+
+const MainLayout = ({ children }) => {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <ErrorBoundary>
+        <ScrollToTop />
+        {/* Header - Loaded Instantly */}
+        <Header />
+
+        {/* Main Content - Lazy Loaded */}
+        <Suspense fallback={<LoadingSpinner />}>
+          <main className="flex-grow">
+            <ErrorBoundary>
+              {children}
+            </ErrorBoundary>
+          </main>
+          
+          {/* Footer - Lazy Loaded */}
+          <Footer />
+        </Suspense>
+      </ErrorBoundary>
+    </div>
+  );
+};
+
+export default MainLayout;
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/Header.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/Header.jsx
new file mode 100644
index 0000000..3eb5ed1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/Header.jsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect, useRef, memo, useCallback } from 'react';
+import { FiSearch, FiMenu, FiX } from 'react-icons/fi';
+import { Link } from 'react-router-dom';
+import ErrorBoundary from '@components/common/error/ErrorBoundary';
+import { LazyMotion, domAnimation } from 'framer-motion';
+
+import SearchModal from './components/SearchModal';
+import DesktopNavigation from './components/DesktopNavigation';
+import MobileNavigation from './components/MobileNavigation';
+import headerSchema from './schema/headerSchema.json';
+
+const Header = () => {
+  // State management
+  const [state, setState] = useState({
+    isProductsOpen: false,
+    isMobileMenuOpen: false,
+    isSearchOpen: false,
+    isSticky: false,
+    isLanguageOpen: false,
+    isMobileLanguageOpen: false,
+    selectedLanguage: 'English'
+  });
+
+  // Refs and handlers
+  const desktopLanguageRef = useRef(null);
+  const mobileLanguageRef = useRef(null);
+
+  const handleClickOutside = (event) => {
+    if (desktopLanguageRef.current && !desktopLanguageRef.current.contains(event.target)) {
+      setState(prev => ({ ...prev, isLanguageOpen: false }));
+    }
+    if (mobileLanguageRef.current && !mobileLanguageRef.current.contains(event.target)) {
+      setState(prev => ({ ...prev, isMobileLanguageOpen: false }));
+    }
+  };
+
+  const handleScroll = useCallback(() => {
+    setState(prev => ({ ...prev, isSticky: window.scrollY > 0 }));
+  }, []);
+
+  // Effects
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('scroll', handleScroll);
+
+    const script = document.createElement('script');
+    script.type = 'application/ld+json';
+    script.text = JSON.stringify(headerSchema);
+    document.head.appendChild(script);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll);
+      document.head.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <ErrorBoundary>
+      <LazyMotion features={domAnimation}>
+        <SearchModal 
+          isOpen={state.isSearchOpen} 
+          onClose={useCallback(() => 
+            setState(prev => ({ ...prev, isSearchOpen: false })), 
+            []
+          )} 
+        />
+
+        <nav className={`sticky top-0 left-0 right-0 w-full bg-light-primaryBg transition-all duration-300 z-40 ${state.isSticky ? 'shadow-md' : ''}`}>
+          <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="flex justify-between items-center h-16">
+              {/* Logo */}
+              <div className="flex items-center space-x-4">
+                <Link to="/" className="flex-shrink-0">
+                  <img 
+                    src="/images/logos/logo-light.webp"
+                    alt="Tech4biz Logo"
+                    width="180"
+                    height="36"
+                    loading="eager"
+                    decoding="async"
+                    className="h-9 w-auto"
+                  />
+                </Link>
+              </div>
+
+              {/* Desktop Navigation */}
+              <DesktopNavigation 
+                isProductsOpen={state.isProductsOpen}
+                setIsProductsOpen={(value) => setState(prev => ({ ...prev, isProductsOpen: value }))}
+              />
+
+              {/* Desktop Search */}
+              <div className="hidden md:flex items-center space-x-4">
+                <button 
+                  onClick={() => setState(prev => ({ ...prev, isSearchOpen: true }))}
+                  className="text-white hover:text-white transition-colors transform scale-90 md:scale-100"
+                  aria-label="Search"
+                >
+                  <FiSearch className="h-5 w-5" />
+                </button>
+              </div>
+
+              {/* Mobile Controls */}
+              <div className="md:hidden flex items-center space-x-5">
+                <button 
+                  onClick={() => setState(prev => ({ ...prev, isSearchOpen: true }))}
+                  className="text-white hover:text-white transition-colors transform scale-90 md:scale-100"
+                  aria-label="Search"
+                >
+                  <FiSearch className="h-5 w-5" />
+                </button>
+
+                <button
+                  className="text-gray-600 hover:text-[#1E0E62] transition-colors"
+                  onClick={() => setState(prev => ({ 
+                    ...prev, 
+                    isMobileMenuOpen: !prev.isMobileMenuOpen 
+                  }))}
+                  aria-label="Toggle mobile menu"
+                >
+                  {state.isMobileMenuOpen ? (
+                    <FiX className="h-6 w-6" />
+                  ) : (
+                    <FiMenu className="h-6 w-6" />
+                  )}
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Navigation */}
+          <MobileNavigation 
+            isMobileMenuOpen={state.isMobileMenuOpen}
+            setState={setState}
+          />
+        </nav>
+      </LazyMotion>
+    </ErrorBoundary>
+  );
+};
+
+export default memo(Header);
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/animations/headerAnimations.js b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/animations/headerAnimations.js
new file mode 100644
index 0000000..611eca1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/animations/headerAnimations.js
@@ -0,0 +1,30 @@
+export const fadeAnimation = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.2 }
+};
+
+export const slideAnimation = {
+  initial: { x: '100%' },
+  animate: { x: 0 },
+  exit: { x: '100%' },
+  transition: { type: "spring", stiffness: 100, damping: 20 }
+};
+
+export const dropdownAnimation = {
+  initial: { opacity: 0, y: -10 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -10 },
+  transition: { duration: 0.2 }
+};
+
+export const productListAnimation = {
+  initial: { height: 0, opacity: 0 },
+  animate: { height: "auto", opacity: 1 },
+  exit: { height: 0, opacity: 0 },
+  transition: {
+    height: { duration: 0.3 },
+    opacity: { duration: 0.2 }
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/DesktopNavigation.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/DesktopNavigation.jsx
new file mode 100644
index 0000000..d3f6d92
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/DesktopNavigation.jsx
@@ -0,0 +1,94 @@
+import React, { memo } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { FiChevronDown } from 'react-icons/fi';
+import { Link, useLocation } from 'react-router-dom';
+import { menuItems } from '../config/headerConfig.json';
+import ProductShowcase from './ProductDropDown/ProductList';
+
+const DesktopNavigation = memo(({ isProductsOpen, setIsProductsOpen }) => {
+  const location = useLocation();
+
+  const handleProductsClick = (e) => {
+    e.stopPropagation();
+    setIsProductsOpen(!isProductsOpen);
+  };
+
+  const getItemPath = (item) => {
+    switch (item) {
+      case 'HOME':
+        return '/';
+      case 'SERVICES':
+        return '/services';
+      case 'ABOUT':
+        return '/about';
+      case 'CONTACT':
+        return '/contact';
+      case 'CAREERS':
+        return '/careers';
+      default:
+        return '#';
+    }
+  };
+
+  const isActiveRoute = (path, item) => {
+    if (item === 'HOME') {
+      return location.pathname === '/' || location.pathname === '';
+    }
+    
+    if (item === 'PRODUCTS') {
+      return location.pathname.includes('/product');
+    }
+    
+    return location.pathname.startsWith(path);
+  };
+
+  return (
+    <div className="hidden md:flex items-center space-x-8 max-[956px]:space-x-5">
+      {menuItems.map((item) => {
+        const isActive = isActiveRoute(getItemPath(item), item);
+        const activeClass = isActive ? 'text-light-primaryText' : 'text-light-secondaryText';
+        
+        return (
+          <div key={item} className="relative">
+            {item === 'PRODUCTS' ? (
+              <div className='relative'>
+                <button 
+                  className={`${activeClass} hover:text-light-primaryText transition-colors font-poppins font-bold text-[14px] p-0 bg-transparent border-0 cursor-pointer flex items-center`}
+                  onClick={handleProductsClick}
+                  aria-expanded={isProductsOpen}
+                  aria-haspopup="true"
+                  data-products-trigger
+                >
+                  <span className="flex items-center font-poppins font-bold">
+                    {item}
+                    <FiChevronDown 
+                      style={{
+                        strokeWidth:'2.5px'
+                      }}
+                      className={`ml-1 w-5 h-5 transition-transform duration-300 ${isProductsOpen ? 'rotate-180' : ''}`} 
+                      aria-hidden="true" 
+                    />
+                  </span>
+                </button>
+                <AnimatePresence mode="wait">
+                  {isProductsOpen && <ProductShowcase setIsProductsOpen={setIsProductsOpen} />}
+                </AnimatePresence>
+              </div>
+            ) : (
+              <Link
+                to={getItemPath(item)}
+                className={`${activeClass} hover:text-light-primaryText transition-colors font-poppins font-bold text-[14px]`}
+              >
+                {item}
+              </Link>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+DesktopNavigation.displayName = 'DesktopNavigation';
+
+export default DesktopNavigation;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/LanguageDropdown.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/LanguageDropdown.jsx
new file mode 100644
index 0000000..9f10c56
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/LanguageDropdown.jsx
@@ -0,0 +1,61 @@
+import React, { memo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiChevronDown } from 'react-icons/fi';
+import { languages } from '../config/headerConfig.json';
+
+const LanguageSelector = memo(({ 
+  isDesktop = true,
+  isOpen,
+  selectedLanguage,
+  languageRef,
+  setState 
+}) => {
+  return (
+    <div ref={languageRef} className={`relative ${isDesktop ? 'hidden md:block' : ''}`}>
+      <button
+        onClick={() => setState(prev => ({ 
+          ...prev, 
+          [isDesktop ? 'isLanguageOpen' : 'isMobileLanguageOpen']: !isOpen 
+        }))}
+        className="flex items-center justify-between text-light-primaryText hover:text-light-primaryText transition-colors border rounded-md px-3 py-1 font-body text-sm"
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        {selectedLanguage}
+        <FiChevronDown className={`ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            className="absolute mt-2 w-40 bg-light-primaryBg rounded-md shadow-lg z-50 max-md:right-0 md:right-[-35px]"
+            role="listbox"
+          >
+            {languages.map((language) => (
+              <button
+                key={language}
+                className="block w-full text-left px-4 py-2 text-sm text-light-secondaryText hover:text-light-primaryText hover:bg-[#374151] font-body"
+                onClick={() => setState(prev => ({ 
+                  ...prev, 
+                  selectedLanguage: language,
+                  [isDesktop ? 'isLanguageOpen' : 'isMobileLanguageOpen']: false 
+                }))}
+                role="option"
+                aria-selected={selectedLanguage === language}
+              >
+                {language}
+              </button>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+LanguageSelector.displayName = 'LanguageSelector';
+
+export default LanguageSelector;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/MobileNavigation.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/MobileNavigation.jsx
new file mode 100644
index 0000000..aff68f9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/MobileNavigation.jsx
@@ -0,0 +1,109 @@
+import React, { memo, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiChevronDown } from 'react-icons/fi';
+import { Link, useLocation } from 'react-router-dom';
+import { menuItems, mobileMenuVariants } from '../config/headerConfig.json';
+import MobileProductShowcase from './MobileProductList';
+import { slideAnimation, productListAnimation } from '../animations/headerAnimations';
+
+const MenuItem = memo(({ item, isActive, onClick, children }) => (
+  <motion.div
+    whileHover={{ backgroundColor: 'rgba(55, 65, 81, 0.8)' }}
+    className={`block px-4 py-3 ${isActive ? 'text-light-primaryText' : 'text-light-secondaryText'}`}
+    onClick={onClick}
+  >
+    {children}
+  </motion.div>
+));
+
+const MobileNavigation = memo(({ isMobileMenuOpen, setState }) => {
+  const location = useLocation();
+  const [isProductsOpen, setIsProductsOpen] = useState(false);
+
+  const getItemPath = (item) => {
+    switch (item) {
+      case 'HOME':
+        return '/';
+      case 'SERVICES':
+        return '/services';
+      case 'ABOUT':
+        return '/about';
+      case 'CONTACT':
+        return '/contact';
+      case 'CAREERS':
+        return '/careers';
+      default:
+        return '#';
+    }
+  };
+
+  const isActiveRoute = (path) => {
+    if (path === '/' && location.pathname !== '/') return false;
+    return location.pathname.startsWith(path);
+  };
+
+  return (
+    <AnimatePresence mode="wait">
+      {isMobileMenuOpen && (
+        <motion.div
+          {...slideAnimation}
+          className="md:hidden fixed top-16 right-0 h-[calc(100vh-64px)] w-full sm:w-[350px] z-30 bg-light-primaryBg shadow-lg overflow-y-auto"
+          role="dialog"
+          aria-modal="true"
+          aria-label="Mobile navigation menu"
+        >
+          <div className="flex flex-col h-full">
+            <div className="overflow-y-auto">
+              {menuItems.map((item) => (
+                <div key={item}>
+                  {item === 'PRODUCTS' ? (
+                    <>
+                      <button
+                        className="w-full flex justify-between items-center px-4 py-3 text-light-secondaryText hover:text-light-primaryText hover:bg-[#374151] font-poppins font-bold text-[14px]"
+                        onClick={() => setIsProductsOpen(!isProductsOpen)}
+                        aria-expanded={isProductsOpen}
+                      >
+                        {item}
+                        <FiChevronDown 
+                          className={`ml-1 transition-transform duration-300 ${isProductsOpen ? 'rotate-180' : ''}`}
+                        />
+                      </button>
+                      <AnimatePresence>
+                        {isProductsOpen && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.3 }}
+                            className="overflow-hidden"
+                          >
+                            <MobileProductShowcase onClose={() => {
+                              setIsProductsOpen(false);
+                              setState(prev => ({ ...prev, isMobileMenuOpen: false }));
+                            }} />
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </>
+                  ) : (
+                    <Link
+                      to={getItemPath(item)}
+                      className={`block px-4 py-3 text-light-secondaryText hover:text-light-primaryText hover:bg-[#374151] font-body font-bold text-[14px] ${isActiveRoute(getItemPath(item)) ? 'text-light-primaryText' : ''}`}
+                      onClick={() => setState(prev => ({ ...prev, isMobileMenuOpen: false }))}
+                    >
+                      {item}
+                    </Link>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+});
+
+MobileNavigation.displayName = 'MobileNavigation';
+
+export default MobileNavigation;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/MobileProductList.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/MobileProductList.jsx
new file mode 100644
index 0000000..81aabe7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/MobileProductList.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ExternalLink } from 'lucide-react';
+import { products } from '../config/headerConfig.json';
+import { useNavigate } from 'react-router-dom';
+
+const MobileProductList = ({ onClose }) => {
+  const navigate = useNavigate();
+  
+  const handleProductClick = (productId) => {
+    onClose?.();
+    navigate(`/product/${productId}`);
+  };
+
+  return (
+    <div className="bg-light-primaryBg px-4 py-4">
+      <div className="space-y-6">
+        {products.map((product) => (
+          <motion.div
+            key={product.id}
+            className="group relative cursor-pointer"
+            whileHover={{ scale: 1.02 }}
+            transition={{ duration: 0.2 }}
+            onClick={() => handleProductClick(product.id)}
+          >
+            <div className="block relative overflow-hidden rounded-lg mb-2">
+              <img
+                src={product.image}
+                alt={product.name}
+                className="w-full h-40 object-cover transition-transform duration-700 ease-out"
+                loading="lazy"
+              />
+            </div>
+            <h3 className="text-[16px] font-[500] text-white font-body">
+              {product.name}
+            </h3>
+            <p className="text-[12px] font-[500] text-white/80 font-body mt-1">
+              {product.description}
+            </p>
+            
+            <button 
+              className="mt-2 flex items-center text-[12px] font-medium text-white bg-blue-500 px-4 py-1 rounded-md transition-colors duration-200"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleProductClick(product.id);
+              }}
+            >
+              View Details
+            </button>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+MobileProductList.displayName = 'MobileProductList';
+
+export default MobileProductList;
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ChevronRightIcons.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ChevronRightIcons.jsx
new file mode 100644
index 0000000..cb08b03
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ChevronRightIcons.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const ChevronRightIcon = ({ className }) => (
+  <svg 
+    xmlns="http://www.w3.org/2000/svg" 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round" 
+    className={className}
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+);
+
+export default ChevronRightIcon;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ProductCard.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ProductCard.jsx
new file mode 100644
index 0000000..9f40dbb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ProductCard.jsx
@@ -0,0 +1,57 @@
+import React, { memo, useState } from 'react';
+import ChevronRightIcon from './ChevronRightIcons';
+
+const ProductCard = memo(({ product, onClick }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className="block relative rounded-lg overflow-hidden group transition-all duration-300 transform hover:scale-105 cursor-pointer shadow-lg"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={onClick}
+    >
+      {/* Improved gradient overlay with better visibility */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/70 to-transparent opacity-80 z-10 transition-opacity duration-300 group-hover:opacity-90"></div>
+      
+      <img
+        src={product.image}
+        alt={product.name}
+        className="w-full h-52 object-cover transition-all duration-500 group-hover:brightness-90 group-hover:scale-110"
+        loading="lazy"
+      />
+      
+      {/* Improved content positioning and styling */}
+      <div className="absolute bottom-0 left-0 right-0 p-5 z-20 transform transition-transform duration-300 group-hover:translate-y-[-5px]">
+        {/* Title with subtle animation */}
+        <h3 className="text-xl font-bold text-white mb-2 transition-all duration-300 group-hover:text-blue-300">
+          {product.name}
+        </h3>
+        
+        {/* Description with better readability */}
+        <p className="text-sm text-gray-200 line-clamp-2 mb-3 max-w-[90%] leading-relaxed">
+          {product.description}
+        </p>
+
+        {/* Enhanced call-to-action button */}
+        <div
+          className={`mt-2 inline-flex items-center text-blue-400 font-medium transition-all duration-300 ${
+            isHovered ? "opacity-100 translate-x-0" : "opacity-0 -translate-x-2"
+          }`}
+        >
+          <span className="mr-2 text-sm">Learn more</span>
+          <ChevronRightIcon className="w-4 h-4 transition-transform duration-300 group-hover:translate-x-1 mt-1" />
+        </div>
+      </div>
+      
+      {/* Subtle border highlight on hover */}
+      <div className={`absolute inset-0 border-2 border-blue-400 rounded-lg opacity-0 transition-opacity duration-300 z-5 ${
+        isHovered ? "opacity-70" : ""
+      }`}></div>
+    </div>
+  );
+});
+
+ProductCard.displayName = 'ProductCard';
+
+export default ProductCard;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ProductList.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ProductList.jsx
new file mode 100644
index 0000000..e85d8d5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ProductList.jsx
@@ -0,0 +1,57 @@
+import React, { memo, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { useNavigate } from 'react-router-dom';
+import { products } from '../../config/headerConfig.json';
+import { dropdownAnimation } from '../../animations/headerAnimations';
+import ProductCard from './ProductCard';
+import ServiceCarousel from './ServiceCarousel';
+import useClickOutside from './hooks/useClickOutside';
+
+const ProductList = memo(({ setIsProductsOpen }) => {
+  const showcaseRef = useRef(null);
+  const navigate = useNavigate();
+  
+  // Use custom hook for click outside handling
+  useClickOutside(showcaseRef, setIsProductsOpen, '[data-products-trigger]');
+
+  const handleProductClick = (productId) => {
+    setIsProductsOpen(false);
+    navigate(`/product/${productId}`);
+  };
+
+  const handleServiceClick = (slug) => {
+    setIsProductsOpen(false);
+    navigate(`/business-services/${slug}`);
+  };
+
+  return (
+    <motion.div 
+      ref={showcaseRef}
+      {...dropdownAnimation}
+      className="fixed left-0 right-0 w-full bg-[#1b1b1b] text-white shadow-xl z-50"
+      style={{ top: '64px' }}
+    >
+      <div className="container mx-auto px-4 py-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Product Cards Section */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {products.map((product) => (
+              <ProductCard 
+                key={product.id} 
+                product={product} 
+                onClick={() => handleProductClick(product.id)}
+              />
+            ))}
+          </div>
+
+          {/* Enhanced Services Carousel Section */}
+          <ServiceCarousel onServiceClick={handleServiceClick} />
+        </div>
+      </div>
+    </motion.div>
+  );
+});
+
+ProductList.displayName = 'ProductList';
+
+export default ProductList; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ServiceCard.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ServiceCard.jsx
new file mode 100644
index 0000000..91d6301
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ServiceCard.jsx
@@ -0,0 +1,52 @@
+import React, { memo, useState } from 'react';
+import ChevronRightIcon from './ChevronRightIcons';
+
+const ServiceCard = memo(({ service, image, isActive }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className={`absolute inset-0 transition-opacity duration-500 ${
+        isActive ? "opacity-100 z-10" : "opacity-0 z-0"
+      }`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <div className="relative h-full w-full overflow-hidden rounded-lg">
+        {/* Background Image with lazy loading */}
+        <img 
+          src={image}
+          alt={service.title}
+          className="absolute inset-0 h-full w-full object-cover transition-transform duration-500 ease-in-out"
+          style={{ transform: isHovered ? "scale(1.05)" : "scale(1)" }}
+          loading="lazy"
+        />
+        
+        {/* Gradient Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-gray-900/80 to-transparent"></div>
+        
+        {/* Content */}
+        <div className="absolute inset-0 p-6 flex flex-col justify-between z-20">
+          <div>
+            <h3 className="text-3xl font-bold text-white mb-2">{service.title}</h3>
+            <p className="text-gray-200">{service.description}</p>
+          </div>
+          
+          {/* Subtle clickable indicator */}
+          <div 
+            className={`flex items-center text-gray-200 hover:text-white mt-4 transition-all duration-300
+              ${isHovered ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`}
+            style={{ marginBottom: '20px' }}
+          >
+            <span className="text-sm font-medium mr-2">Explore service</span>
+            <ChevronRightIcon className="w-4 h-4" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ServiceCard.displayName = 'ServiceCard';
+
+export default ServiceCard;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ServiceCarousel.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ServiceCarousel.jsx
new file mode 100644
index 0000000..05ea8a9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/ServiceCarousel.jsx
@@ -0,0 +1,48 @@
+import React, { memo, useState } from 'react';
+import businessServices from '@/pages/home/components/OurServices/config/businessServices.json';
+import { serviceImages } from '../../config/headerConfig.json';
+import useCarousel from './hooks/useCarousel';
+import ServiceCard from './ServiceCard';
+
+const ServiceCarousel = memo(({ onServiceClick }) => {
+  const services = businessServices.experiences;
+  const { activeIndex, goToSlide } = useCarousel(services.length, 3000);
+
+  return (
+    <div className="relative h-full">
+      <div className="relative overflow-hidden rounded-lg h-full">
+        {services.map((service, index) => (
+          <div 
+            key={service.id}
+            onClick={() => onServiceClick(service.slug)}
+            className="cursor-pointer"
+          >
+            <ServiceCard 
+              service={service}
+              image={serviceImages[service.id]}
+              isActive={index === activeIndex} 
+            />
+          </div>
+        ))}
+        
+        {/* Carousel Indicators */}
+        <div className="absolute bottom-6 left-0 right-0 flex justify-center space-x-2 z-30">
+          {services.map((_, index) => (
+            <button
+              key={index}
+              className={`w-1.5 h-1.5 rounded-full transition-all ${
+                index === activeIndex ? "bg-blue-400 w-4" : "bg-gray-600"
+              }`}
+              onClick={() => goToSlide(index)}
+              aria-label={`Go to slide ${index + 1}`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ServiceCarousel.displayName = 'ServiceCarousel';
+
+export default ServiceCarousel;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/hooks/useCarousel.js b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/hooks/useCarousel.js
new file mode 100644
index 0000000..c83b4f7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/hooks/useCarousel.js
@@ -0,0 +1,32 @@
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Hook to manage carousel functionality
+ * @param {Number} itemCount - Total number of items in carousel
+ * @param {Number} interval - Auto-slide interval in milliseconds
+ * @returns {Object} - Carousel state and controls
+ */
+const useCarousel = (itemCount, interval = 3000) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  
+  // Function to go to a specific slide
+  const goToSlide = useCallback((index) => {
+    setActiveIndex(index);
+  }, []);
+  
+  // Auto-slide effect
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setActiveIndex((prevIndex) => (prevIndex === itemCount - 1 ? 0 : prevIndex + 1));
+    }, interval);
+    
+    return () => clearInterval(timer);
+  }, [itemCount, interval]);
+  
+  return {
+    activeIndex,
+    goToSlide
+  };
+};
+
+export default useCarousel;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/hooks/useClickOutside.js b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/hooks/useClickOutside.js
new file mode 100644
index 0000000..deeed09
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/ProductDropDown/hooks/useClickOutside.js
@@ -0,0 +1,26 @@
+import { useEffect } from 'react';
+
+/**
+ * Hook to handle clicks outside of a specified element
+ * @param {React.RefObject} ref - Reference to the element to monitor
+ * @param {Function} handler - Function to call when click is outside
+ * @param {String} excludeSelector - CSS selector for elements to exclude
+ */
+const useClickOutside = (ref, handler, excludeSelector = null) => {
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        ref.current && 
+        !ref.current.contains(event.target) &&
+        (!excludeSelector || !event.target.closest(excludeSelector))
+      ) {
+        handler(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () => document.removeEventListener('mousedown', handleClickOutside, true);
+  }, [ref, handler, excludeSelector]);
+};
+
+export default useClickOutside;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/SearchModal.jsx b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/SearchModal.jsx
new file mode 100644
index 0000000..dad2701
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/components/SearchModal.jsx
@@ -0,0 +1,105 @@
+import React, { memo, useCallback, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiSearch, FiX } from 'react-icons/fi';
+import { fadeAnimation } from '../animations/headerAnimations';
+
+// Custom hook for debounce
+const useDebounce = (callback, delay) => {
+  const timeoutRef = useRef(null);
+
+  const debouncedCallback = useCallback((...args) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }, [callback, delay]);
+
+  return debouncedCallback;
+};
+
+const SearchOverlay = memo(({ onClose }) => (
+  <motion.div
+    {...fadeAnimation}
+    className="fixed inset-0 bg-white/70 backdrop-blur-md z-40"
+    onClick={onClose}
+    role="presentation"
+  />
+));
+
+const SearchContent = memo(({ onClose, handleSearch }) => (
+  <motion.div
+    {...fadeAnimation}
+    className="fixed top-0 left-0 right-0 bg-white z-50"
+    role="dialog"
+    aria-label="Search overlay"
+  >
+    <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="flex items-center justify-center h-16 border-b border-gray-200">
+        <FiSearch className="h-5 w-5 text-gray-400" aria-hidden="true" />
+        <input
+          type="search"
+          placeholder="What are you looking for?"
+          className="flex-1 px-4 text-gray-600 placeholder-gray-400 bg-transparent border-none focus:outline-none focus:ring-0"
+          onChange={(e) => handleSearch(e.target.value)}
+          aria-label="Search input"
+          autoFocus
+        />
+        <button
+          onClick={onClose}
+          className="text-gray-400"
+        >
+        </button>
+      </div>
+    </div>
+  </motion.div>
+));
+
+const SearchModal = memo(({ isOpen, onClose }) => {
+  const handleSearch = useDebounce((searchTerm) => {
+    // Implement search functionality here
+  }, 300);
+
+  // Add effect to block scrolling when modal is open
+  useEffect(() => {
+    if (isOpen) {
+      // Save the current scroll position
+      const scrollY = window.scrollY;
+      // Add styles to body to prevent scrolling
+      document.body.style.position = 'fixed';
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = '100%';
+    } else {
+      // Restore scrolling when modal is closed
+      const scrollY = document.body.style.top;
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+      window.scrollTo(0, parseInt(scrollY || '0') * -1);
+    }
+    
+    return () => {
+      // Cleanup function to ensure scrolling is restored
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.width = '';
+    };
+  }, [isOpen]);
+
+  return (
+    <AnimatePresence mode="wait">
+      {isOpen && (
+        <>
+          <SearchOverlay onClose={onClose} />
+          <SearchContent onClose={onClose} handleSearch={handleSearch} />
+        </>
+      )}
+    </AnimatePresence>
+  );
+});
+
+SearchModal.displayName = 'SearchModal';
+
+export default SearchModal;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/config/headerConfig.json b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/config/headerConfig.json
new file mode 100644
index 0000000..bfd2e81
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/config/headerConfig.json
@@ -0,0 +1,109 @@
+{
+  "menuItems": [
+    "HOME",
+    "PRODUCTS",
+    "SERVICES",
+    "ABOUT",
+    "CONTACT",
+    "CAREERS"
+  ],
+  "languages": ["English", "Spanish", "French"],
+  "mobileMenuVariants": {
+    "closed": { "opacity": 0, "x": "100%" },
+    "open": { "opacity": 1, "x": 0 }
+  },
+  "products": [
+    {
+      "id": "cloudriv",
+      "name": "CloudDriv",
+      "image": "/images/products/card/cloud-drive-storage-platform.webp",
+      "path": "/product/cloudriv",
+      "description": "Secure cloud storage for seamless sharing and collaboration.",
+      "metadata": {
+        "title": "CloudRiv - Cloud Storage Platform",
+        "description": "Enterprise-grade cloud storage solution with advanced security features."
+      }
+    },
+    {
+      "id": "codenuk",
+      "name": "Codenuk",
+      "image": "/images/products/card/codenuk-coding-solution-platform.webp",
+      "path": "/product/codenuk",
+      "description": "Codenuk is a coding solution platform that provides a comprehensive set of tools for developers and teams.",
+      "metadata": {
+        "title": "Codenuk - Coding Solution Platform",
+        "description": "Advanced coding platform for developers and teams."
+      }
+    },
+    {
+      "id": "lms",
+      "name": "LMS",
+      "image": "/images/products/card/learning-management-system.webp",
+      "path": "/product/lms",
+      "description": "Streamline education delivery with our comprehensive Learning Management System.",
+      "metadata": {
+        "title": "LMS - Learning Management System",
+        "description": "Comprehensive learning management solution for organizations."
+      }
+    },
+    {
+      "id": "cloudtopiaa",
+      "name": "Cloudtopiaa",
+      "image": "/images/products/card/cloudtopiaa-enterprise-solutions.webp",
+      "path": "/product/cloudtopiaa",
+      "description": "Secure, scalable cloud solutions that power your business growth.",
+      "metadata": {
+        "title": "Cloudtopiaa - Enterprise Solutions",
+        "description": "Enterprise-grade cloud infrastructure and management solutions."
+      }
+    }
+  ],
+  "serviceImages": {
+    "exp-0": "/images/ProductDropDown/aihealthcare.webp",
+    "exp-1": "/images/ProductDropDown/quantam.webp",
+    "exp-2": "/images/ProductDropDown/designing.webp",
+    "exp-3": "/images/ProductDropDown/pcb.webp"
+  },
+  "productList": [
+    {
+      "name": "IoT in Hospitality",
+      "link": "/",
+      "description": "Transform guest experiences with smart room controls, automated check-ins, and personalized services powered by IoT technology."
+    },
+    {
+      "name": "Smart Cities Solutions",
+      "link": "/",
+      "description": "Comprehensive IoT infrastructure for urban development, including smart lighting, waste management, and traffic control systems."
+    },
+    {
+      "name": "Automotive IoT Platform",
+      "link": "/",
+      "description": "Advanced connected car solutions inspired by BMW and Tesla, featuring real-time diagnostics, autonomous capabilities, and smart navigation."
+    },
+    {
+      "name": "Precision Agriculture System",
+      "link": "/",
+      "description": "Data-driven farming solutions with IoT sensors for soil monitoring, automated irrigation, and crop health tracking for sustainable agriculture."
+    },
+    {
+      "name": "Smart Retail Suite",
+      "link": "/",
+      "description": "Revolutionary retail management system with real-time inventory tracking, automated checkout, and personalized customer engagement tools."
+    },
+    {
+      "name": "Healthcare IoT Platform",
+      "link": "/",
+      "description": "Connected hospital solutions for patient monitoring, asset tracking, and streamlined healthcare operations management."
+    },
+    {
+      "name": "IoT in Luxury Cars",
+      "link": "/",
+      "description": "The luxury automotive industry is undergoing a technological revolution, driven by IoT (Internet of Things)."
+    },
+    {
+      "name": "Generative AI in Manufacturing",
+      "link": "/",
+      "description": "The manufacturing industry is entering a new era, driven by generative AI—a technology reshaping the way products are designed, made, and delivered."
+    }
+  ]
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/schema/headerSchema.json b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/schema/headerSchema.json
new file mode 100644
index 0000000..a6742ee
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/layout/Navbar/schema/headerSchema.json
@@ -0,0 +1,37 @@
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Tech4biz",
+  "url": "https://www.tech4bizsolutions.com/",
+  "logo": {
+    "@type": "ImageObject",
+    "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+    "width": "180",
+    "height": "36"
+  },
+  "sameAs": [
+    "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+    "https://x.com/Tech4bizContact",
+    "https://www.youtube.com/@Tech4bizz",
+    "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+  ],
+  "contactPoint": {
+    "@type": "ContactPoint",
+    "telephone": "+1-415-870-3091",
+    "contactType": "Customer Service",
+    "email": "mailto:contact@tech4biz.io",
+    "areaServed": "IN",
+    "availableLanguage": ["English", "Hindi", "Kannada"]
+  },
+  "address": {
+    "@type": "PostalAddress",
+    "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout, Bengaluru, Karnataka 560102",
+    "addressLocality": "Bangalore",
+    "addressRegion": "HSR",
+    "postalCode": "560102",
+    "addressCountry": "Karnataka"
+  },
+  "description": "Tech4biz Solutions Private Limited offers groundbreaking technology solutions for businesses globally, focusing on cloud services, IoT, and AI-enhanced platforms.",
+  "email": "contact@tech4biz.io",
+  "telephone": "+1-415-870-3091"
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/components/modals/CRMModalForm.jsx b/Tech4biz-Version01/Tech4biz/src/components/modals/CRMModalForm.jsx
new file mode 100644
index 0000000..0e0d202
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/modals/CRMModalForm.jsx
@@ -0,0 +1,260 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import axios from "axios";
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
+import industries from "./industries.json";
+import { Listbox } from '@headlessui/react';
+import { ChevronsUpDown } from 'lucide-react';
+
+const CRMModalForm = ({ isVisible, onClose, source }) => {
+  const [form, setForm] = useState({
+    firstName: "",
+    lastName: "",
+    emailAddress: "",
+    industry: "",
+    addressCountry: "",
+    country: "",
+    phoneNumber: "",
+    description: "",
+  });
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setForm({ ...form, [name]: value });
+  };
+
+  const handlePhoneChange = (value) => {
+    const countryCode = `+${form.addressCountry}`;
+    const localNumber = value.startsWith(countryCode) ? value.slice(countryCode.length) : value;
+    setForm({
+      ...form,
+      phoneNumber: `${countryCode}${localNumber}`,
+    });
+    setError(null);
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const dataToSubmit = {
+        ...form,
+        description: `${form.description}\n\nLead Source: ${source}`,
+        assignedUserId: "671b293cc773b399a",
+      };
+
+      await axios.post(
+        "https://sales.tech4bizsolutions.com/api/v1/LeadCapture/e18cbb738435332fd81500e26efbfa79",
+        dataToSubmit
+      );
+      alert("Thank you! Your submission has been received.");
+      setForm({
+        firstName: "",
+        lastName: "",
+        emailAddress: "",
+        industry: "",
+        country: "",
+        addressCountry: "",
+        phoneNumber: "",
+        description: "",
+      });
+      onClose();
+    } catch (err) {
+      setError(err.response?.data?.message || "An unexpected error occurred. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "auto";
+    }
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [isVisible]);
+
+  if (!isVisible) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm flex items-center justify-center p-4 z-50"
+      >
+        <motion.div
+          initial={{ scale: 0.9, y: 20 }}
+          animate={{ scale: 1, y: 0 }}
+          exit={{ scale: 0.9, y: 20 }}
+          className="bg-white rounded-lg shadow-xl w-full max-w-lg sm:max-w-2xl mx-4 sm:mx-0 max-h-[90vh] overflow-y-auto"
+        >
+          <div className="p-6 sm:p-8 crm-modal-form">
+            <div className="flex justify-between items-center mb-6">
+              <h2 className="text-2xl font-bold text-gray-800">Technical Consultation</h2>
+              <button
+                onClick={onClose}
+                className="text-gray-500 hover:text-gray-700 transition-colors"
+                aria-label="Close modal"
+              >
+                <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1 text-left">
+                    First Name
+                  </label>
+                  <input
+                    type="text"
+                    id="firstName"
+                    name="firstName"
+                    value={form.firstName}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500"
+                    required
+                  />
+                </div>
+                <div>
+                  <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1 text-left">
+                    Last Name
+                  </label>
+                  <input
+                    type="text"
+                    id="lastName"
+                    name="lastName"
+                    value={form.lastName}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500"
+                    required
+                  />
+                </div>
+              </div>
+              <div>
+                <label htmlFor="emailAddress" className="block text-sm font-medium text-gray-700 mb-1 text-left">
+                  Email Address
+                </label>
+                <input
+                  type="email"
+                  id="emailAddress"
+                  name="emailAddress"
+                  value={form.emailAddress}
+                  onChange={handleChange}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500"
+                  required
+                />
+              </div>
+              <div className="relative">
+                <Listbox value={form.industry} onChange={(value) => handleChange({ target: { name: 'industry', value } })}>
+                  <Listbox.Button className="w-full px-4 h-11 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 text-left flex items-center justify-between">
+                    <span>{form.industry || 'Select an industry'}</span>
+                    <ChevronsUpDown className="w-5 h-5 text-gray-400" />
+                  </Listbox.Button>
+                  <Listbox.Options className="absolute z-10 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-auto">
+                    <Listbox.Option
+                      value=""
+                      className={({ active }) =>
+                        `cursor-pointer select-none relative py-2 px-4 ${
+                          active ? 'bg-gray-50 text-gray-900' : 'text-gray-900'
+                        }`
+                      }
+                    >
+                      Select an industry
+                    </Listbox.Option>
+                    {industries.map((industry) => (
+                      <Listbox.Option
+                        key={industry.id}
+                        value={industry.value}
+                        className={({ active }) =>
+                          `cursor-pointer select-none relative py-2 px-4 ${
+                            active ? 'bg-gray-50 text-gray-900' : 'text-gray-900'
+                          }`
+                        }
+                      >
+                        {industry.value}
+                      </Listbox.Option>
+                    ))}
+                  </Listbox.Options>
+                </Listbox>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label htmlFor="country" className="block text-sm font-medium text-gray-700 mb-1 text-left">
+                    Country
+                  </label>
+                  <input
+                    type="text"
+                    id="country"
+                    name="country"
+                    value={form.country}
+                    onChange={handleChange}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500"
+                    required
+                  />
+                </div>
+                <div>
+                  <label htmlFor="phoneNumber" className="block text-sm font-medium text-gray-700 mb-1 text-left">
+                    Phone Number
+                  </label>
+                  <PhoneInput
+                    inputClass="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500"
+                    country="in"
+                    value={form.phoneNumber.replace(`+${form.addressCountry}`, '')}
+                    onChange={handlePhoneChange}
+                    required
+                  />
+                </div>
+              </div>
+              <div>
+                <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1 text-left">
+                  Description
+                </label>
+                <textarea
+                  id="description"
+                  name="description"
+                  value={form.description}
+                  onChange={handleChange}
+                  rows="4"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-gray-500 focus:border-gray-500"
+                  required
+                ></textarea>
+              </div>
+              {error && <p className="text-red-600 text-sm">{error}</p>}
+              <div className="flex flex-col sm:flex-row justify-end space-y-3 sm:space-y-0 sm:space-x-3 mt-6">
+                <button
+                  type="button"
+                  onClick={onClose}
+                  className="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={loading}
+                  className="px-4 py-2 border border-transparent rounded-md shadow-sm text-white bg-[#3b82f6] hover:bg-[#2563eb] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                >
+                  {loading ? "Submitting..." : "Schedule Consultation"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default CRMModalForm;
+
diff --git a/Tech4biz-Version01/Tech4biz/src/components/modals/industries.json b/Tech4biz-Version01/Tech4biz/src/components/modals/industries.json
new file mode 100644
index 0000000..eade284
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/components/modals/industries.json
@@ -0,0 +1,53 @@
+[
+  { "id": 1, "value": "Advertising" },
+  { "id": 2, "value": "Aerospace" },
+  { "id": 3, "value": "Agriculture" },
+  { "id": 4, "value": "Apparel & Accessories" },
+  { "id": 5, "value": "Architecture" },
+  { "id": 6, "value": "Automotive" },
+  { "id": 7, "value": "Banking" },
+  { "id": 8, "value": "Biotechnology" },
+  { "id": 9, "value": "Building Materials & Equipment" },
+  { "id": 10, "value": "Chemical" },
+  { "id": 11, "value": "Computer" },
+  { "id": 12, "value": "Construction" },
+  { "id": 13, "value": "Consulting" },
+  { "id": 14, "value": "Creative" },
+  { "id": 15, "value": "Culture" },
+  { "id": 16, "value": "Defense" },
+  { "id": 17, "value": "Education" },
+  { "id": 18, "value": "Electric Power" },
+  { "id": 19, "value": "Electronics" },
+  { "id": 20, "value": "Energy" },
+  { "id": 21, "value": "Entertainment & Leisure" },
+  { "id": 22, "value": "Finance" },
+  { "id": 23, "value": "Food & Beverage" },
+  { "id": 24, "value": "Grocery" },
+  { "id": 25, "value": "Healthcare" },
+  { "id": 26, "value": "Hospitality" },
+  { "id": 27, "value": "Insurance" },
+  { "id": 28, "value": "Legal" },
+  { "id": 29, "value": "Manufacturing" },
+  { "id": 30, "value": "Marketing" },
+  { "id": 31, "value": "Mass Media" },
+  { "id": 32, "value": "Mining" },
+  { "id": 33, "value": "Music" },
+  { "id": 34, "value": "Petroleum" },
+  { "id": 35, "value": "Publishing" },
+  { "id": 36, "value": "Real Estate" },
+  { "id": 37, "value": "Retail" },
+  { "id": 38, "value": "Service" },
+  { "id": 39, "value": "Shipping" },
+  { "id": 40, "value": "Software" },
+  { "id": 41, "value": "Sports" },
+  { "id": 42, "value": "Support" },
+  { "id": 43, "value": "Technology" },
+  { "id": 44, "value": "Telecommunications" },
+  { "id": 45, "value": "Television" },
+  { "id": 46, "value": "Testing, Inspection & Certification" },
+  { "id": 47, "value": "Transportation" },
+  { "id": 48, "value": "Travel" },
+  { "id": 49, "value": "Venture Capital" },
+  { "id": 50, "value": "Water" },
+  { "id": 51, "value": "Wholesale" }
+] 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/hooks/useScrollPosition.js b/Tech4biz-Version01/Tech4biz/src/hooks/useScrollPosition.js
new file mode 100644
index 0000000..4c58441
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/hooks/useScrollPosition.js
@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+import { debounce } from 'lodash';
+
+export const useScrollPosition = () => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const handleScroll = useCallback(
+    debounce(() => {
+      setIsScrolled(window.scrollY > 0);
+    }, 100), // Adjust the debounce delay as needed
+    []
+  );
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    
+    return () => {
+      handleScroll.cancel(); // Cancel any pending debounced calls on cleanup
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  return isScrolled;
+};
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/index.css b/Tech4biz-Version01/Tech4biz/src/index.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/Tech4biz-Version01/Tech4biz/src/main.jsx b/Tech4biz-Version01/Tech4biz/src/main.jsx
new file mode 100644
index 0000000..b9a1a6d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/animations/useModal.js b/Tech4biz-Version01/Tech4biz/src/pages/about/animations/useModal.js
new file mode 100644
index 0000000..edb96f2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/animations/useModal.js
@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+const useModal = () => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const openModal = () => setIsModalVisible(true);
+  const closeModal = () => setIsModalVisible(false);
+
+  return { isModalVisible, openModal, closeModal };
+};
+
+export default useModal;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/animations/useParallax.js b/Tech4biz-Version01/Tech4biz/src/pages/about/animations/useParallax.js
new file mode 100644
index 0000000..c0ba344
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/animations/useParallax.js
@@ -0,0 +1,13 @@
+import { useScroll, useTransform } from "framer-motion";
+
+const useParallax = () => {
+  const { scrollY } = useScroll();
+  const y = useTransform(scrollY, [0, 500], [0, 150]);
+  const y1 = useTransform(scrollY, [0, 1000], [0, 200]);
+  const y2 = useTransform(scrollY, [0, 1000], [0, -150]);
+  const rotation = useTransform(scrollY, [0, 1000], [0, 360]);
+  
+  return { y, y1, y2, rotation, scrollY };
+};
+
+export default useParallax;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/animations/variants.js b/Tech4biz-Version01/Tech4biz/src/pages/about/animations/variants.js
new file mode 100644
index 0000000..cab03c6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/animations/variants.js
@@ -0,0 +1,21 @@
+// This file centralizes all common animation variants
+
+export const fadeIn = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.6 },
+};
+
+export const staggerChildren = {
+  animate: {
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+export const fadeInUp = {
+  initial: { opacity: 0, y: 60 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -60 },
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/About.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/About.jsx
new file mode 100644
index 0000000..1b36492
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/About.jsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { motion } from 'framer-motion';
+import { fadeIn, staggerChildren } from '../animations/variants';
+
+const AboutUs = ({data}) => {
+  return (
+    <div>
+           <motion.section 
+        className="pt-0 pb-20 px-4 bg-[#1B1B1B] w-full text-white"
+        variants={staggerChildren}
+        initial="initial"
+        whileInView="animate"
+        viewport={{ once: true }}
+      >
+        <motion.div 
+          className="max-w-4xl mx-auto text-center"
+          {...fadeIn}
+        >
+          <h2 className="text-3xl md:text-4xl font-bold mb-6">
+           {data.title}
+          </h2>
+          <p className="text-lg text-white-600">
+           {data.description}
+          </p>
+        </motion.div>
+      </motion.section>
+   
+    </div>
+  )
+}
+
+export default AboutUs
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/CaseStudies.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/CaseStudies.jsx
new file mode 100644
index 0000000..05f0bea
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/CaseStudies.jsx
@@ -0,0 +1,113 @@
+import React, { useState } from 'react';
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { ArrowRight, Mouse, ChevronDown, ExternalLink } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+// Common company metrics for demos
+
+const CaseStudies = () => {
+    const metrics = {
+        projects: "150+",
+        clients: "80+",
+        satisfaction: "98%",
+        awards: "25+"
+      };
+      
+  const [activeCard, setActiveCard] = useState(0);
+  const { scrollY } = useScroll();
+  const opacity = useTransform(scrollY, [0, 300], [1, 0]);
+
+  const cards = [
+    { title: "Custom Applications Delivered", count: "470+" },
+    { title: "Clients Across Multiple Sectors", count: "105+" },
+    { title: "AI Models Developed", count: "50+" },
+    { title: "Real-Time Monitoring Systems Implemented", count: "20+" }
+  ];
+
+  return (
+    <motion.div 
+      className="max-h-screen pt-20 pb-28 px-6 md:px-16 max-w-7xl mx-auto  bg-white overflow-hidden"
+    >
+      <div className="container mx-auto px-4 h-full flex flex-col justify-center">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="space-y-8"
+          >
+            <motion.h1 
+              className="text-4xl lg:text-6xl font-bold"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+            >
+              Our Success
+              <br />
+              Stories
+            </motion.h1>
+            <motion.p 
+              className="text-xl text-gray-600 max-w-xl"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.3 }}
+            >
+             At Tech4Biz Solutions, we specialize in solving complex business challenges using cutting-edge technologies and innovative approaches. Over our 9-year journey, we've built a solid foundation, empowering businesses to leverage technology for growth. Here are some of our key accomplishments:
+            </motion.p>
+            <motion.div 
+              className="flex gap-4 items-center"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.4 }}
+            >
+              <button className="px-6 py-3 bg-black text-white rounded-xl">
+                <a 
+                  target="_blank" 
+                  rel="noopener noreferrer nofollow" 
+                  href="https://showcase.tech4bizsolutions.com/">
+                  View All Cases
+                </a>
+              </button>
+            </motion.div>
+          </motion.div>
+          <div className="grid grid-cols-2 gap-4">
+            {cards.map((card, index) => (
+              <motion.div
+                key={card.title}
+                whileHover={{ scale: 1.05 }}
+                onHoverStart={() => setActiveCard(index)}
+                className={`p-6 rounded-2xl cursor-pointer transition-colors duration-300 ${
+                  activeCard === index ? 'bg-blue-50' : 'bg-gray-50'
+                }`}
+              >
+                <motion.h3 
+                  className="text-2xl font-bold mb-2"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.2 + index * 0.1 }}
+                >
+                  {card.count}
+                </motion.h3>
+                <motion.p
+                  className="text-gray-600"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.3 + index * 0.1 }}
+                >
+                  {card.title}
+                </motion.p>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+export default CaseStudies
+ 
+
+ 
+     
+    
+
+      
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/CreativeAi.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/CreativeAi.jsx
new file mode 100644
index 0000000..8c45212
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/CreativeAi.jsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const fadeIn = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.6 },
+};
+
+const staggerChildren = {
+  animate: {
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+};
+
+const CreativeAi = ({ data }) => {
+  return (
+    <div>
+      <motion.section
+        className="py-20 px-4 bg-white"
+        variants={staggerChildren}
+        initial="initial"
+        whileInView="animate"
+        viewport={{ once: true }}
+      >
+        <div className="max-w-6xl mx-auto">
+          <motion.div
+            className="grid md:grid-cols-2 gap-12 items-center"
+            {...fadeIn}
+          >
+            <div className="space-y-6">
+              <h3 className="text-3xl font-bold text-black">{data.title}</h3>
+              <p className="text-black">{data.description}</p>
+
+              <div className="grid grid-cols-2 gap-4">
+                {data.data.map((feature, index) => (
+                  <motion.div
+                    key={index}
+                    className="p-4 bg-white backdrop-blur-lg rounded-lg shadow-md"
+                    whileHover={{ scale: 1.05 }}
+                    transition={{ type: 'spring', stiffness: 300 }}
+                  >
+                    <h4 className="text-lg font-medium text-black mb-2">
+                      {feature.title}
+                    </h4>
+                    <p className="text-slate-400 text-sm">
+                      {feature.description}
+                    </p>
+                  </motion.div>
+                ))}
+              </div>
+            </div>
+
+            <div className="relative h-[480px] flex items-center justify-center">
+              <motion.div
+                className="absolute w-72 h-72 bg-blue-500/20 rounded-full"
+                
+                animate={{
+                  scale: [1, 1.2, 1],
+                  opacity: [0.5, 0.8, 0.5],
+                }}
+                transition={{
+                  duration: 3,
+                  repeat: Infinity,
+                  ease: 'easeInOut',
+                }}
+              />
+              <motion.div
+                className="absolute w-60 h-60 bg-purple-500/20 rounded-full"
+                animate={{
+                  scale: [1.2, 1, 1.2],
+                  opacity: [0.5, 0.8, 0.5],
+                }}
+                style={{
+                  backgroundImage: 'url("/images/about/powering-the-future-with-ai.webp")',
+                  backgroundSize: 'cover',
+                 
+                }}
+                transition={{
+                  duration: 3,
+                  repeat: Infinity,
+                  ease: 'easeInOut',
+                  delay: 1,
+                }}
+              />
+            </div>
+          </motion.div>
+        </div>
+      </motion.section>
+    </div>
+  );
+};
+
+export default CreativeAi;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/Features.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Features.jsx
new file mode 100644
index 0000000..b6ee646
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Features.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Cloud, Shield, Zap, Globe, Camera, Code, TrendingUp, DollarSign, Users, Link, RefreshCcw, BarChart, Sliders, Leaf } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+// Map icon names to components
+const iconMap = {
+  TrendingUp: <TrendingUp />,
+  DollarSign: <DollarSign />,
+  Users: <Users />,
+  Shield: <Shield />,
+  Link: <Link />,
+  RefreshCcw: <RefreshCcw />,
+  BarChart: <BarChart />,
+  Sliders: <Sliders />,
+  Leaf: <Leaf />,
+  // Add other icons as needed
+};
+
+const Features = ({ data }) => {
+  return (
+    <section className="min-h-full bg-[#1b1b1b] py-20">
+      <div className="container mx-auto px-4">
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 50 }}
+          transition={{ duration: 0.8 }}
+          className="text-center mb-16"
+        >
+          <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
+            {data.title}
+          </h1>
+          <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+            {data.description}
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+          {data.data.map((feature, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 50 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: 50 }}
+              transition={{ duration: 0.5, delay: index * 0.2 }}
+              whileHover={{ scale: 1.05, rotateY: 10 }}
+              className="bg-white/5 backdrop-blur-lg p-8 rounded-2xl text-white text-center"
+            >
+              <div className="text-4xl mb-4 flex justify-center">
+                {iconMap[feature.icon] || <Cloud />}
+              </div>
+              <h3 className="text-xl font-semibold">{feature.title}</h3>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Features;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesFour.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesFour.jsx
new file mode 100644
index 0000000..71dc821
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesFour.jsx
@@ -0,0 +1,64 @@
+import { Camera, Cloud, Code, Globe } from 'lucide-react';
+import React from 'react';
+import { motion } from 'framer-motion';
+
+// Map icon names to components
+const iconMap = {
+  Globe: <Globe />,
+  Camera: <Camera />,
+  Cloud: <Cloud />,
+  Code: <Code />,
+  // Add other icons as needed
+};
+
+const FeaturesFour = ({ data }) => {
+  return (
+    <div>
+      <section className="py-32 bg-gradient-to-b from-zinc-900 to-black">
+        <div className="container mx-auto px-6">
+          <motion.div
+            className="max-w-3xl mx-auto mb-24 text-center text-white"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+          >
+            <h2 className="text-4xl font-bold mb-6">{data.title}</h2>
+            <p className="text-xl">{data.description}</p>
+          </motion.div>
+
+          <div className="flex flex-col lg:flex-row gap-8">
+            <motion.div
+              className="flex-1 bg-gradient-to-br from-purple-500/10 to-blue-500/10 rounded-3xl p-12 backdrop-blur-lg"
+              whileHover={{ scale: 1.02 }}
+            >
+              <div className="aspect-video rounded-xl overflow-hidden mb-8 text-white">
+                <img
+                  src="https://img.freepik.com/free-photo/person-working-html-computer_23-2150038840.jpg?uid=P176103548&ga=GA1.1.638379889.1733982420&semt=ais_hybrid"
+                  alt="Main Feature"
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <h3 className="text-3xl text-white font-bold mb-4">{data.singleCard.title}</h3>
+              <p className="text-white">{data.singleCard.description}</p>
+            </motion.div>
+
+            <div className="flex-1 space-y-8">
+              {data.data.map((item, i) => (
+                <motion.div
+                  key={i}
+                  className="text-white bg-gradient-to-br from-purple-500/5 to-blue-500/5 rounded-2xl p-6 backdrop-blur-lg"
+                  whileHover={{ scale: 1.05 }}
+                >
+                  {iconMap[item.icon] || <Globe className="mb-4 text-white" />}
+                  <h4 className="text-xl font-bold mb-2">{item.title}</h4>
+                  <p className="text-sm">{item.description}</p>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default FeaturesFour;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesThree.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesThree.jsx
new file mode 100644
index 0000000..0904600
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesThree.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { ArrowRight, Code, Database, Globe, Laptop, LockIcon, RefreshCw } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+// Map icon names to components
+const iconMap = {
+  ArrowRight: <ArrowRight />,
+  Code: <Code />,
+  Database: <Database />,
+  Globe: <Globe />,
+  Laptop: <Laptop />,
+  LockIcon: <LockIcon />,
+  RefreshCw: <RefreshCw />,
+  // Add other icons as needed
+};
+
+const FeaturesSectionThree = ({ data }) => {
+  return (
+    <section className="py-20 bg-white">
+      <div className="container max-w-7xl mx-auto py-16 px-4 md:px-12">
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 0.8 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-4xl font-bold mb-4">{data.title}</h2>
+          <p className="text-gray-600">{data.description}</p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {data.data.map((feature, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              whileHover={{ y: -10 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              className="bg-white p-6 rounded-xl shadow-lg hover:shadow-2xl transition-all"
+            >
+              <div className="text-blue-500 text-3xl mb-4">
+                {iconMap[feature.icon] || <ArrowRight />}
+              </div>
+              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+              <p className="text-gray-600">{feature.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeaturesSectionThree;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesTwo.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesTwo.jsx
new file mode 100644
index 0000000..4001a23
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/FeaturesTwo.jsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { Database, Globe, RefreshCw, Lock, TrendingUp, DollarSign, Users, Shield, Link, BarChart, Sliders, Leaf } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+// Map icon names to components
+const iconMap = {
+  Globe: <Globe />,
+  Lock: <Lock />,
+  RefreshCw: <RefreshCw />,
+  Database: <Database />,
+  TrendingUp: <TrendingUp />,
+  DollarSign: <DollarSign />,
+  Users: <Users />,
+  Shield: <Shield />,
+  Link: <Link />,
+  BarChart: <BarChart />,
+  Sliders: <Sliders />,
+  Leaf: <Leaf />,
+  // Add other icons as needed
+};
+
+const FeaturesSectionTwo = ({ data }) => {
+  const [activeFeature, setActiveFeature] = useState(0);
+
+  return (
+    <section className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <motion.div
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-5xl font-bold mb-6">
+            {data.title}
+            <span className="bg-clip-text text-transparent bg-gradient-to-r from-[#000] to-[#000]">
+              {' '}for Scale
+            </span>
+          </h2>
+        </motion.div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
+          {/* Feature list */}
+          <div className="space-y-6">
+            {data.data.map((feature, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, x: -50 }}
+                whileInView={{ opacity: 1, x: 0 }}
+                whileHover={{ x: 10 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                className={`p-6 rounded-xl cursor-pointer transition-all ${
+                  activeFeature === index 
+                    ? 'bg-blue-50 border-l-4 border-blue-500' 
+                    : 'hover:bg-gray-50'
+                }`}
+                onClick={() => setActiveFeature(index)}
+              >
+                <div className="flex items-center">
+                  <div className="text-3xl text-[#2563EB] mr-4">
+                    {iconMap[feature.icon] || <Globe />}
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+                    <p className="text-gray-600">{feature.description}</p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Feature showcase */}
+          <div className="relative">
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              className="bg-gradient-to-r from-[#2563EB] to-blue-300 rounded-2xl p-1"
+            >
+              <div className="bg-white rounded-2xl p-1 w-full h-2/4">
+                <AnimatePresence mode="wait">
+                  <motion.div
+                    key={activeFeature}
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    exit={{ opacity: 0, y: -20 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <img
+                      src={data.data[activeFeature].image} // Dynamic image
+                      alt={data.data[activeFeature].title} // Alt text
+                      className="rounded-2xl shadow-lg w-full h-[400px]"
+                    />
+                  </motion.div>
+                </AnimatePresence>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FeaturesSectionTwo;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/Journey.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Journey.jsx
new file mode 100644
index 0000000..1d026a1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Journey.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import useParallax from '../animations/useParallax.js';
+
+const Journey = ({ data }) => {
+  const { y, y1, y2, rotation } = useParallax();
+
+  return (
+    <div>
+      <section className="h-full pt-20 pb-48 bg-[#1b1b1b] text-white">
+        <div className="max-w-7xl mx-auto px-4">
+          <motion.h2 
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            className="text-4xl font-bold text-center mb-16"
+          >
+            Our Journey
+          </motion.h2>
+          <div className="relative">
+            <div className="absolute top-1/2 w-full h-0.5 bg-blue-200 -translate-y-1/2" />
+            <div className="flex justify-between relative">
+              {data.timelinedata.map((item, index) => (
+                <motion.div
+                  key={item.year}
+                  initial={{ opacity: 0, y: 50 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  transition={{ delay: index * 0.2 }}
+                  className="relative z-10"
+                >
+                  <motion.div
+                    whilehover={{ scale: 1.1 }}
+                    className="w-20 h-20 bg-white rounded-full shadow-lg flex items-center justify-center cursor-pointer border-4 border-blue-500"
+                  >
+                    <span className="text-xl font-bold text-black">{item.year}</span>
+                  </motion.div>
+                  <div className="absolute top-full mt-4 -left-1/2 w-32 text-center">
+                    <h3 className="font-semibold text-[16px]">{item.title}</h3>
+                    <p className="text-[10px]">{item.description}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default Journey;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/Mission.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Mission.jsx
new file mode 100644
index 0000000..3aff0e3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Mission.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { motion, useAnimation, useScroll, useTransform , useSpring } from 'framer-motion';
+import {Link} from 'react-router-dom'
+const Mission = ({data}) => {
+    const { scrollY } = useScroll();
+    const BASE_URL =
+    window.location.hostname === 'localhost'
+      ? 'http://localhost:5173'
+      : 'https://tech4bizsolutions.com';
+  return (
+     
+   <>
+      <section className="px-4 py-20">
+        <div className="max-w-6xl mx-auto py-4 px-4 md:px-12">
+          <div className="grid gap-12 md:grid-cols-2 items-center">
+            <motion.div
+              initial={{ opacity: 0, x: -50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+            >
+              <h2 className="mb-6 text-4xl font-bold">{data.title}</h2>
+              <p className="text-lg text-gray-600 mb-6">
+               {data.description}
+              </p>
+             
+            </motion.div>
+            <motion.div
+              initial={{ opacity: 0, x: 50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              className="bg-gray-100 rounded-2xl p-2 h-96"
+            >
+              {/* Placeholder for image or content */}
+              <div className="w-full h-full bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl" 
+                style={{backgroundImage:`url(${data.image})`, backgroundSize:'cover'}}
+              />
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+     
+      <section className="px-4 py-20 bg-[#1b1b1b] text-white">
+        <div className="mx-auto max-w-7xl">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="text-center max-w-3xl mx-auto"
+          >
+            <h2 className="mb-6 text-4xl font-bold">{data.vision.title}</h2>
+            <p className="text-lg text-center text-gray-300 mb-8">
+            {data.vision.description}
+            </p>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+              {[
+                { number: "100+", label: "Clients" },
+                { number: "50+", label: "Countries" },
+                { number: "200+", label: "Projects" },
+                { number: "95%", label: "Satisfaction" }
+              ].map((stat, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ delay: index * 0.1 }}
+                >
+                  <p className="text-3xl font-bold text-white mb-2">{stat.number}</p>
+                  <span className="text-gray-400">{stat.label}</span>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </section>
+   </>
+       
+  )
+}
+
+export default Mission
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/Newsletter.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Newsletter.jsx
new file mode 100644
index 0000000..c3517dd
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Newsletter.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Mail } from 'lucide-react';
+import { useFormHandler } from '@/pages/detail-pages/ourServicesDetailPage/utils/subscription';
+import { notification } from 'antd'; // Import Ant Design notification
+import { subscribeToNewsletter } from '@/utils/newsletterApi';
+
+const Newsletter = () => {
+  const located = "About Us Newsletter"; // Example located prop
+
+  const { email, error, handleInputChange, submitForm, resetForm } = useFormHandler({
+    located,
+    handleSubmit: subscribeToNewsletter,
+  });
+
+  return (
+    <div className="h-full bg-[#1b1b1b] py-12 px-4 sm:px-6 lg:px-8">
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        viewport={{ once: true }}
+        className="max-w-4xl mx-auto mb-16 bg-[#fff] rounded-xl p-8 sm:p-12"
+      >
+        <div className="text-center max-w-2xl mx-auto">
+          <motion.div
+            initial={{ scale: 0 }}
+            whileInView={{ scale: 1 }}
+            transition={{ duration: 0.5 }}
+            className="mb-6 inline-block"
+          >
+            <Mail className="w-12 h-12 text-[#1b1b1b]" />
+          </motion.div>
+          <h2 className="text-3xl font-bold text-black mb-4">
+            Weekly Developer Digest
+          </h2>
+          <p className="text-gray-400 mb-8">
+            Code snippets, best practices, and developer news curated just for you.
+          </p>
+          <div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
+            <input
+              type="email"
+              placeholder="dev@example.com"
+              className="flex-1 px-4 py-3 rounded-lg bg-[#fff] text-black border border-[#1b1b1b]"
+              value={email}
+              onChange={handleInputChange}
+            />
+            <motion.button
+              whilehover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              className="px-6 py-3 bg-[#F97316] text-white rounded-lg font-medium"
+              onClick={submitForm}
+            >
+              Subscribe
+            </motion.button>
+          </div>
+          {error && <p className="text-red-500 mt-2">{error}</p>} {/* Display error message if any */}
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Newsletter;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/OurValues.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/OurValues.jsx
new file mode 100644
index 0000000..f069efc
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/OurValues.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight, Target, Award, CheckCircle, Lightbulb, Shield, DollarSign } from 'lucide-react';
+
+// Map icon names to components
+const iconMap = {
+  Award: <Award />,
+  CheckCircle: <CheckCircle />,
+  Lightbulb: <Lightbulb />,
+  Target: <Target />,
+  Shield: <Shield />,
+  DollarSign: <DollarSign />,
+  // Add other icons as needed
+};
+
+const OurValues = ({ data }) => {
+  return (
+    <div>
+      <section className="h-full pt-20 pb-20 py-6 bg-gradient-to-br from-[#1b1b1b] to-[#1b1b1b] text-white">
+        <div className="max-w-7xl mx-auto px-4">
+          <motion.h2
+            initial={{ opacity: 0 }}
+            whileInView={{ opacity: 1 }}
+            className="text-4xl font-bold text-center mb-16"
+          >
+            {data.title}
+          </motion.h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {data.data.map((value, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, scale: 0.8 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                whileHover={{ y: -10 }}
+                transition={{ delay: index * 0.1 }}
+                className="group cursor-pointer"
+              >
+                <div className="bg-white/7 backdrop-blur-lg p-6 rounded-2xl border border-white/20">
+                  <motion.div
+                    whileHover={{ rotate: 360 }}
+                    transition={{ duration: 0.5 }}
+                    className="w-12 h-12 bg-blue-500 rounded-full mb-4 flex items-center justify-center"
+                  >
+                    {iconMap[value.icon] || <ChevronRight className="w-6 h-6 text-white" />}
+                  </motion.div>
+                  <h3 className="text-xl font-bold mb-2">{value.title}</h3>
+                  <p className="text-gray-300">{value.description}</p>
+                  <motion.div
+                    initial={{ width: 0 }}
+                    whileHover={{ width: '100%' }}
+                    className="h-0.5 bg-blue-500 mt-4"
+                  />
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default OurValues;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/Security.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Security.jsx
new file mode 100644
index 0000000..15702ec
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Security.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Cloud, Shield, Zap } from 'lucide-react';
+import { motion } from 'framer-motion';
+import CRMModalForm from '@/components/modals/CRMModalForm';
+import useModal from '../animations/useModal';
+
+// Map icon names to components
+const iconMap = {
+  Cloud: <Cloud />,
+  Shield: <Shield />,
+  Zap: <Zap />,
+  // Add other icons as needed
+};
+
+const Security = ({ data }) => {
+  const { isModalVisible, openModal, closeModal } = useModal();
+
+  return (
+    <section className="min-h-full bg-[#1B1B1B] relative overflow-hidden py-20">
+      {/* Animated background gradient */}
+      <motion.div
+        animate={{
+          background: ['#1B1B1B', '#1B1B1B', '#1B1B1B'],
+        }}
+        transition={{ duration: 10, repeat: Infinity }}
+        className="absolute inset-0 opacity-30"
+      />
+
+      <div className="container mx-auto px-4 relative max-w-6xl  py-16  md:px-12">
+        <div className="max-w-6xl mx-auto">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            className="text-center mb-20"
+          >
+            <h1 className="text-4xl md:text-6xl font-bold text-white mb-8 leading-tight">
+              {data.title}
+            </h1>
+            <p className="text-base md:text-xl text-gray-300 max-w-2xl mx-auto mb-12">
+              {data.description}
+            </p>
+            <motion.button
+              onClick={openModal}
+              className="bg-[#F97316] text-white px-8 py-2 rounded-full text-lg font-semibold transition-all"
+            >
+              {data.cta}
+            </motion.button>
+          </motion.div>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 relative">
+            {data.fields.map((field, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 50 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                whileHover={{ y: -10, scale: 1.02 }}
+                transition={{ duration: 0.5, delay: index * 0.2 }}
+                className={`bg-gradient-to-br from-white to-white p-0.5 rounded-2xl`}
+              >
+                <div className="bg-[#1b1b1b] p-8 rounded-2xl h-full">
+                  <div className="text-4xl mb-6 text-white">
+                    {iconMap[field.icon] || <Cloud />}
+                  </div>
+                  <h3 className="text-2xl font-bold text-white mb-4">{field.title}</h3>
+                  <p className="text-gray-300">{field.description}</p>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={closeModal}
+        source="About us Banner" 
+      />
+    </section>
+  );
+};
+
+export default Security;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/components/Services.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Services.jsx
new file mode 100644
index 0000000..5cd66e8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/components/Services.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 60 },
+  animate: { opacity: 1, y: 0 },
+  exit: { opacity: 0, y: -60 },
+};
+
+const Services = ({ data }) => {
+  return (
+    <div>
+      {/* Services Section */}
+      <motion.section
+        className="py-20 px-6 md:px-16 max-w-7xl mx-auto"
+        initial="initial"
+        whileInView="animate"
+        viewport={{ once: true }}
+      >
+        <motion.h2
+          className="text-3xl md:text-5xl font-bold text-center mb-16"
+          variants={fadeInUp}
+        >
+          {data.title}
+        </motion.h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {data.data.map((service, index) => (
+            <motion.div
+              key={index}
+              className="p-8 bg-white rounded-xl shadow-lg hover:shadow-xl transition-shadow"
+              variants={fadeInUp}
+              whileHover={{ scale: 1.05 }}
+            >
+              <h3 className="text-xl font-bold mb-4">{service.title}</h3>
+              <p className="text-gray-600">{service.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </motion.section>
+    </div>
+  );
+};
+
+export default Services;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/config/aboutContent.json b/Tech4biz-Version01/Tech4biz/src/pages/about/config/aboutContent.json
new file mode 100644
index 0000000..513aec9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/config/aboutContent.json
@@ -0,0 +1,331 @@
+[
+  {
+    "banner": {
+      "title": "Shaping Tomorrow's Technologies Across Industries",
+      "cta": "Contact Us",
+      "link": "link",
+      "description": "Empowering Business Innovation with Versatility. Discover the breadth of technology with Tech4Biz Solutions. ",
+      "fields": [
+        {
+          "icon": "Cloud",
+          "title": "Innovation",
+          "description": "Shaping the future through AI, GenAI, hardware, and transformative ideas."
+        },
+        {
+          "icon": "Shield",
+          "title": "Excellence",
+          "description": "Delivering robust, secure, and scalable solutions for diverse industries."
+        },
+        {
+          "icon": "Zap",
+          "title": "Trust",
+          "description": "Building lasting partnerships through reliability and unparalleled support."
+        }
+      ]
+    },
+    "innovate": {
+      "title": "Driving Success through Innovation",
+      "description": "At Tech4Biz Solutions, we are your strategic partner in innovation. With expertise in AI, GenAI, hardware technology, and cloud infrastructure, we help transform your business vision into reality."
+    },
+    "mision": {
+      "title": "Innovation: Our Mission at Tech4Biz",
+      "description": "We revolutionize business operations through cutting-edge technology. From AI integrations to cloud solutions, we empower organizations to achieve growth and resilience, ensuring every solution aligns with your business objectives.",
+      "image": "/images/about/enpowering-business-through-innovation.webp",
+      "cta": "Learn More",
+      "vision": {
+        "title": "Our Vision",
+        "description": "Tech4Biz envisions a future where businesses thrive through technological excellence. We aim to lead globally in IT innovation, pioneering advancements in AI, GenAI, hardware, and cybersecurity to empower industries worldwide. ",
+        "data": [
+          {
+            "count": 1,
+            "title": "First Object"
+          },
+          {
+            "count": 2,
+            "title": "Second Object"
+          },
+          {
+            "count": 3,
+            "title": "Third Object"
+          },
+          {
+            "count": 4,
+            "title": "Fourth Object"
+          }
+        ]
+      }
+    },
+    
+    "powerFeatures": {
+      "title": "Powerful Features",
+      "description": "Key Features That Set Us Apart",
+      "data": [
+        {
+          "title": "Expertise",
+          "icon": "ArrowRight",
+          "description": "Over seven years of delivering transformative IT solutions."
+        },
+        {
+          "title": "Cutting-Edge Technology",
+          "icon": "Database",
+          "description": "Stay ahead with AI, GenAI, and hardware-driven innovations."
+        },
+        {
+          "title": "Cost-Effective",
+          "icon": "Code",
+          "description": "Competitive pricing models tailored to client needs."
+        },
+        {
+          "title": "Reliable Support",
+          "icon": "Laptop",
+          "description": "24/7 service to ensure uninterrupted business continuity."
+        }
+      ]
+    },
+    "aiFeatures": {
+      "title": "Powering the Future with AI and GenAI",
+      "description": "Unlocking the Potential of AI for Scalable, Secure, and Efficient Solutions",
+      "data": [
+        {
+          "title": "Optimized Efficiency",
+          "description": "Streamline processes with intelligent automation powered by AI and GenAI."
+        },
+        {
+          "title": "Data-Driven Decisions",
+          "description": "Leverage advanced analytics for actionable insights and smarter strategies."
+        },
+        {
+          "title": "Advanced Security",
+          "description": "Enhance cybersecurity with proactive AI-driven threat detection and prevention."
+        },
+        {
+          "title": "Growth-Ready Solutions",
+          "description": "Scalable AI systems designed to grow alongside your business."
+        }
+      ]
+    },
+    "future": {
+      "title": "Built for the Future",
+      "description": "IT Solutions Designed for Tomorrow",
+      "singleCard": {
+        "title": "Driving Success Together",
+        "icon": "icon",
+        "description": "Achieve growth with solutions that are ready for the future."
+      },
+      "data": [
+        {
+          "title": "Scalability",
+          "icon": "Globe",
+          "description": "Solutions that adapt to evolving business demands."
+        },
+        {
+          "title": "Integration",
+          "icon": "Camera",
+          "description": "Seamlessly connect with existing systems."
+        },
+        {
+          "title": "Adaptability",
+          "icon": "Cloud",
+          "description": "Future-proof solutions to support long-term success."
+        },
+        {
+          "title": "Innovation",
+          "icon": "Code",
+          "description": "Pushing the boundaries of technology for transformative outcomes."
+        }
+      ]
+    },
+    "services": {
+      "title": "Our Services",
+      "description": "Comprehensive Technology Solutions",
+      "data": [
+        {
+          "title": "Custom AI & GenAI Solutions",
+          "description": "Revolutionizing industries with tailored AI models and GenAI applications."
+        },
+        {
+          "title": "Hardware & Cybersecurity",
+          "description": "Delivering robust hardware systems and comprehensive cybersecurity frameworks."
+        },
+        {
+          "title": "Cloud Infrastructure",
+          "description": "Scalable cloud platforms designed for efficiency and resilience."
+        },
+        {
+          "title": "Managed IT Services",
+          "description": "Proactive IT management ensuring seamless operations."
+        },
+        {
+          "title": "Data Protection & Network Optimization",
+          "description": "Safeguarding critical data and enhancing network performance."
+        }
+      ]
+    },
+    "reveolution": {
+      "title": "The Future of Cloud Computing for Business",
+      "description": "Leveraging cloud technologies to transform business operations, enhance scalability, and drive innovation while reducing costs and improving security.",
+      "data": [
+  {
+    "title": "Scalable Solutions",
+    "icon": "TrendingUp"
+  },
+  {
+    "title": "Cost Savings",
+    "icon": "DollarSign"
+  },
+  {
+    "title": "Collaboration Boost",
+    "icon": "Users"
+  },
+  {
+    "title": "Enhanced Security",
+    "icon": "Shield"
+  },
+  {
+    "title": "Effortless Integration",
+    "icon": "Link"
+  },
+  {
+    "title": "Backup Recovery",
+    "icon": "RefreshCcw"
+  },
+  {
+    "title": "Real-Time Insights",
+    "icon": "BarChart"
+  },
+  {
+    "title": "Increased Flexibility",
+    "icon": "Sliders"
+  },
+  {
+    "title": "Eco-Conscious Solutions",
+    "icon": "Leaf"
+  }
+]
+    },
+    "powerfulFeatures": {
+      "title": "The Future of Cloud Computing and GenAI",
+      "description": "Scalable Solutions for Growth",
+      "data": [
+        {
+          "title": "Flexible Scaling",
+          "icon": "Globe",
+          "description": "Flexible scaling to meet dynamic demands.",
+          "image": "/images/about/flexible-scaling.webp"
+        },
+        {
+          "title": "Cost Efficiency",
+          "icon": "DollarSign",
+          "description": "Cost-efficient pay-as-you-go models.",
+          "image": "/images/about/cost-efficiency.webp"
+        },
+        {
+          "title": "Optimized Performance",
+          "icon": "RefreshCw",
+          "description": "High-powered computing for large-scale operations.",
+          "image": "/images/about/optimized-performance.webp"
+        },
+        {
+          "title": "Robust Security",
+          "icon": "Database",
+          "description": "AI-enhanced security measures to protect your data.",
+          "image": "/images/about/robust-security.webp"
+        }
+      ]
+    },
+    "values": {
+      "title": "Our Values",
+      "description": "Core Principles That Drive Us",
+      "data": [
+        {
+          "title": "Expertise",
+          "icon": "Award",
+          "description": "Versatility across software, hardware, and AI domains."
+        },
+        {
+          "title": "Reliability",
+          "icon": "CheckCircle",
+          "description": "Dependable solutions tailored to client needs."
+        },
+        {
+          "title": "Innovation",
+          "icon": "Lightbulb",
+          "description": "Staying ahead with groundbreaking ideas."
+        },
+        {
+          "title": "Integrity",
+          "icon": "Shield",
+          "description": "Transparent and ethical operations."
+        },
+        {
+          "title": "Focus",
+          "icon": "Target",
+          "description": "Solutions that prioritize business success."
+        }
+      ]
+    },
+    "deploy": {
+      "title": "title",
+      "description": "description",
+      "data": [
+        {
+          "title": "First",
+          "icon": "icon",
+          "cta": "cta",
+          "description": "description",
+          "image": "image"
+        },
+
+        {
+          "title": "First",
+          "icon": "icon",
+          "cta": "cta",
+          "description": "description",
+          "image": "image"
+        },
+
+        {
+          "title": "First",
+          "icon": "icon",
+          "cta": "cta",
+          "description": "description",
+          "image": "image"
+        },
+
+        {
+          "title": "First",
+          "icon": "icon",
+          "cta": "cta",
+          "description": "description",
+          "image": "image"
+        }
+      ]
+    },
+    "journey": {
+      "title": "Our Journey",
+      "description": "A timeline of innovation and growth",
+      "timelinedata": [
+        {
+          "year": "2016",
+          "title": "The Beginning",
+          "description": "Founded to solve complex tech challenges"
+        },
+        {
+          "year": "2018",
+          "title": "Expansion",
+          "description": "Launched AI and server technologies"
+        },
+        {
+          "year": "2020",
+          "title": "Diversification",
+          "description": "Added hardware and cybersecurity solutions"
+        },
+        {
+          "year": "2023",
+          "title": "Leadership",
+          "description": "Global expansion and partnerships"
+        }
+      ]
+    }
+  }
+]
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/config/aboutSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/about/config/aboutSchema.json
new file mode 100644
index 0000000..9fb8118
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/config/aboutSchema.json
@@ -0,0 +1,423 @@
+ {
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "About Us | Tech4Biz Solutions",
+  "url": "https://tech4bizsolutions.com/about",
+  "description": "Learn more about Tech4Biz Solutions, our mission, innovation, services, and journey toward building tomorrow's technology today.",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Tech4biz Solutions Private Limited",
+    "url": "https://tech4bizsolutions.com",
+    "sameAs": [
+      "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+      "https://x.com/Tech4bizContact",
+      "https://www.youtube.com/@Tech4bizz",
+      "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+    ],
+    "contactPoint": {
+      "@type": "ContactPoint",
+      "telephone": "+1-415-870-3091",
+      "contactType": "Customer Service",
+      "email": "mailto:contact@tech4biz.io",
+      "areaServed": "IN",
+      "availableLanguage": [
+        "English",
+        "Hindi",
+        "Kannada"
+      ]
+    },
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout, Bengaluru, Karnataka 560102",
+      "addressLocality": "Bangalore",
+      "addressRegion": "HSR",
+      "postalCode": "560102",
+      "addressCountry": "Karnataka"
+    },
+    "email": "contact@tech4biz.io",
+    "telephone": "+1-415-870-3091"
+  },
+  "breadcrumb": {
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Home",
+        "item": "https://tech4bizsolutions.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "About",
+        "item": "https://tech4bizsolutions.com/about"
+      }
+    ]
+  },
+  "mainEntity": {
+    "@type": "WebPageElement",
+    "name": "About Page Sections",
+    "hasPart": [
+      {
+        "@type": "WebPageElement",
+        "name": "Banner",
+        "headline": "Shaping Tomorrow's Technologies Across Industries",
+        "description": "Empowering Business Innovation with Versatility. Discover the breadth of technology with Tech4Biz Solutions.",
+        "action": {
+          "@type": "Action",
+          "name": "Contact Us",
+          "target": "link"
+        },
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Innovation",
+            "description": "Shaping the future through AI, GenAI, hardware, and transformative ideas."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Excellence",
+            "description": "Delivering robust, secure, and scalable solutions for diverse industries."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Trust",
+            "description": "Building lasting partnerships through reliability and unparalleled support."
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Innovate",
+        "headline": "Driving Success through Innovation",
+        "description": "At Tech4Biz Solutions, we are your strategic partner in innovation. With expertise in AI, GenAI, hardware technology, and cloud infrastructure, we help transform your business vision into reality."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Mission",
+        "headline": "Innovation: Our Mission at Tech4Biz",
+        "description": "We revolutionize business operations through cutting-edge technology. From AI integrations to cloud solutions, we empower organizations to achieve growth and resilience.",
+        "image": "https://tech4bizsolutions.com/images/about/enpowering-business-through-innovation.webp",
+        "action": {
+          "@type": "Action",
+          "name": "Learn More",
+          "target": "#"
+        },
+        "hasPart": {
+          "@type": "WebPageElement",
+          "name": "Vision",
+          "headline": "Our Vision",
+          "description": "Tech4Biz envisions a future where businesses thrive through technological excellence, pioneering advancements in AI, GenAI, hardware, and cybersecurity to empower industries worldwide.",
+          "hasPart": [
+            {
+              "@type": "WebPageElement",
+              "name": "First Object",
+              "description": "1"
+            },
+            {
+              "@type": "WebPageElement",
+              "name": "Second Object",
+              "description": "2"
+            },
+            {
+              "@type": "WebPageElement",
+              "name": "Third Object",
+              "description": "3"
+            },
+            {
+              "@type": "WebPageElement",
+              "name": "Fourth Object",
+              "description": "4"
+            }
+          ]
+        }
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Power Features",
+        "headline": "Powerful Features",
+        "description": "Key Features That Set Us Apart",
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Expertise",
+            "description": "Over seven years of delivering transformative IT solutions."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Cutting-Edge Technology",
+            "description": "Stay ahead with AI, GenAI, and hardware-driven innovations."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Cost-Effective",
+            "description": "Competitive pricing models tailored to client needs."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Reliable Support",
+            "description": "24/7 service to ensure uninterrupted business continuity."
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "AI Features",
+        "headline": "Powering the Future with AI and GenAI",
+        "description": "Unlocking the potential of AI for scalable, secure, and efficient solutions.",
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Optimized Efficiency",
+            "description": "Streamline processes with intelligent automation powered by AI and GenAI."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Data-Driven Decisions",
+            "description": "Leverage advanced analytics for actionable insights and smarter strategies."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Advanced Security",
+            "description": "Enhance cybersecurity with proactive AI-driven threat detection and prevention."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Growth-Ready Solutions",
+            "description": "Scalable AI systems designed to grow alongside your business."
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Future",
+        "headline": "Built for the Future",
+        "description": "IT Solutions Designed for Tomorrow",
+        "action": {
+          "@type": "Action",
+          "name": "Driving Success Together",
+          "target": "#"
+        },
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Scalability",
+            "description": "Solutions that adapt to evolving business demands."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Integration",
+            "description": "Seamlessly connect with existing systems."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Adaptability",
+            "description": "Future-proof solutions to support long-term success."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Innovation",
+            "description": "Pushing the boundaries of technology for transformative outcomes."
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Services",
+        "headline": "Our Services",
+        "description": "Comprehensive Technology Solutions",
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Custom AI & GenAI Solutions",
+            "description": "Revolutionizing industries with tailored AI models and GenAI applications."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Hardware & Cybersecurity",
+            "description": "Delivering robust hardware systems and comprehensive cybersecurity frameworks."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Cloud Infrastructure",
+            "description": "Scalable cloud platforms designed for efficiency and resilience."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Managed IT Services",
+            "description": "Proactive IT management ensuring seamless operations."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Data Protection & Network Optimization",
+            "description": "Safeguarding critical data and enhancing network performance."
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Revolution",
+        "headline": "The Future of Cloud Computing for Business",
+        "description": "A look at scalable solutions, cost savings, enhanced security, and more.",
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Scalable Solutions",
+            "description": "Scalable Solutions",
+            "icon": "TrendingUp"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Cost Savings",
+            "description": "Cost Savings",
+            "icon": "DollarSign"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Collaboration Boost",
+            "description": "Collaboration Boost",
+            "icon": "Users"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Enhanced Security",
+            "description": "Enhanced Security",
+            "icon": "Shield"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Effortless Integration",
+            "description": "Effortless Integration",
+            "icon": "Link"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Backup Recovery",
+            "description": "Backup Recovery",
+            "icon": "RefreshCcw"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Real-Time Insights",
+            "description": "Real-Time Insights",
+            "icon": "BarChart"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Increased Flexibility",
+            "description": "Increased Flexibility",
+            "icon": "Sliders"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Eco-Conscious Solutions",
+            "description": "Eco-Conscious Solutions",
+            "icon": "Leaf"
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Powerful Features",
+        "headline": "The Future of Cloud Computing and GenAI",
+        "description": "Scalable Solutions for Growth",
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Flexible Scaling",
+            "description": "Flexible scaling to meet dynamic demands.",
+            "icon": "Globe",
+            "image": "https://tech4bizsolutions.com/images/about/flexible-scaling.webp"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Cost Efficiency",
+            "description": "Cost-efficient pay-as-you-go models.",
+            "icon": "DollarSign",
+            "image": "https://tech4bizsolutions.com/images/about/cost-efficiency.webp"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Optimized Performance",
+            "description": "High-powered computing for large-scale operations.",
+            "icon": "RefreshCw",
+            "image": "https://tech4bizsolutions.com/images/about/optimized-performance.webp"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Robust Security",
+            "description": "AI-enhanced security measures to protect your data.",
+            "icon": "Database",
+            "image": "https://tech4bizsolutions.com/images/about/robust-security.webp"
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Values",
+        "headline": "Our Values",
+        "description": "Core Principles That Drive Us",
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "Expertise",
+            "description": "Versatility across software, hardware, and AI domains.",
+            "icon": "Award"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Reliability",
+            "description": "Dependable solutions tailored to client needs.",
+            "icon": "CheckCircle"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Innovation",
+            "description": "Staying ahead with groundbreaking ideas.",
+            "icon": "Lightbulb"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Integrity",
+            "description": "Transparent and ethical operations.",
+            "icon": "Shield"
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "Focus",
+            "description": "Solutions that prioritize business success.",
+            "icon": "Target"
+          }
+        ]
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Journey",
+        "headline": "Our Journey",
+        "description": "A timeline of innovation and growth.",
+        "hasPart": [
+          {
+            "@type": "WebPageElement",
+            "name": "2016 - The Beginning",
+            "description": "Founded to solve complex tech challenges."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "2018 - Expansion",
+            "description": "Launched AI and server technologies."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "2020 - Diversification",
+            "description": "Added hardware and cybersecurity solutions."
+          },
+          {
+            "@type": "WebPageElement",
+            "name": "2023 - Leadership",
+            "description": "Global expansion and partnerships."
+          }
+        ]
+      }
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/about/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/about/index.jsx
new file mode 100644
index 0000000..d740593
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/about/index.jsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import { Helmet } from 'react-helmet-async';
+import AboutUs from './components/About'
+import Features from './components/Features'
+import Security from './components/Security'
+import FeaturesSectionTwo from './components/FeaturesTwo'
+import FeaturesSectionThree from './components/FeaturesThree'
+import CreativeAi from './components/CreativeAi'
+import Services from './components/Services'
+import Journey from './components/Journey'
+import OurValues from './components/OurValues'
+import FeaturesFour from './components/FeaturesFour'
+import Mission from './components/Mission'
+import Newsletter from './components/Newsletter'
+import aboutData from './config/aboutContent.json'
+import aboutSchema from './config/aboutSchema.json'
+import ScrollToTop from '@/components/common/scroll/ScrollToTop'
+import ScrollToTopButton from '@/components/common/scroll/ScrollToTopButton'
+import CaseStudies from './components/CaseStudies'
+const AboutPage = () => {
+  return (
+    <div>
+      <Helmet>
+        <title>About Us | Tech4Biz Solutions - Building Tomorrow's Technology Today</title>
+        <script type="application/ld+json">
+          {JSON.stringify(aboutSchema)}
+        </script>
+      </Helmet>
+      <ScrollToTop/>
+      <ScrollToTopButton />
+      <Security data={aboutData[0].banner}/>
+      <AboutUs data={aboutData[0].innovate}/>
+      <Mission data={aboutData[0].mision}/>
+      <FeaturesSectionThree data={aboutData[0].powerFeatures}/>
+      <CreativeAi data={aboutData[0].aiFeatures}/>
+      <FeaturesFour data={aboutData[0].future}/>
+      <Services data={aboutData[0].services}/>
+      <Features data={aboutData[0].reveolution}/>
+      <FeaturesSectionTwo data={aboutData[0].powerfulFeatures}/>
+      <CaseStudies/>
+      <OurValues data={aboutData[0].values}/>
+      {/* <FeaturesProject/> */}
+      <Journey data={aboutData[0].journey}/>
+      <Newsletter/>
+    </div>
+  )
+}
+
+export default AboutPage
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/Hero.jsx
new file mode 100644
index 0000000..80f7520
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/Hero.jsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight, Briefcase, Users, Award } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import careerData from '../config/jobsData.json';
+
+// Map icon strings to actual components
+const iconComponents = {
+  Briefcase: Briefcase,
+  Users: Users,
+  Award: Award
+};
+
+const Hero = () => {
+  const { hero } = careerData;
+
+  return (
+    <div className="bg-white py-20 overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="lg:grid lg:grid-cols-12 lg:gap-8">
+          {/* Left content - Text */}
+          <motion.div 
+            className="lg:col-span-6 flex flex-col justify-center"
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6 }}
+          >
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+            >
+              <span className="inline-block px-4 py-1.5 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-6">
+                {hero.badge}
+              </span>
+            </motion.div>
+            
+            <motion.h1
+              className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+            >
+              {hero.title} <br />
+              <span className="text-blue-600">{hero.titleHighlight}</span>
+            </motion.h1>
+            
+            <motion.p
+              className="text-lg text-gray-600 mb-8 max-w-lg"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.4 }}
+            >
+              {hero.description}
+            </motion.p>
+
+            <motion.div
+              className="flex flex-col sm:flex-row gap-4"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5 }}
+            >
+              <Link
+                to={hero.ctaLink}
+                className="inline-flex items-center justify-center gap-2 bg-blue-600 text-white font-medium py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors duration-300 shadow-sm"
+              >
+                {hero.ctaText}
+                <ArrowRight className="w-4 h-4" />
+              </Link>
+            </motion.div>
+          </motion.div>
+          
+          {/* Right content - Image or illustration */}
+          <motion.div 
+            className="lg:col-span-6 mt-10 lg:mt-0"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+          >
+            <div className="relative h-full flex items-center justify-center">
+              <img 
+                src={hero.image} 
+                alt={hero.imageAlt} 
+                className="rounded-2xl shadow-lg object-cover h-[400px] w-full"
+              />
+              
+              {/* Floating card elements */}
+              {hero.cards.map((card, index) => {
+                const IconComponent = iconComponents[card.icon];
+                const positionClass = card.position === "bottom-left" 
+                  ? "-bottom-6 -left-6" 
+                  : "-top-6 -right-6";
+                
+                return (
+                  <motion.div 
+                    key={index}
+                    className={`absolute ${positionClass} bg-white p-4 rounded-lg shadow-lg max-w-[200px]`}
+                    initial={{ opacity: 0, y: card.position === "bottom-left" ? 20 : -20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ delay: 0.6 + (index * 0.1) }}
+                  >
+                    <div className="flex items-center gap-3 mb-2">
+                      <div className={`bg-${card.iconColor}-100 p-2 rounded-full`}>
+                        <IconComponent className={`w-5 h-5 text-${card.iconColor}-600`} />
+                      </div>
+                      <h3 className="font-semibold text-gray-900">{card.title}</h3>
+                    </div>
+                    <p className="text-sm text-gray-600">{card.description}</p>
+                  </motion.div>
+                );
+              })}
+            </div>
+          </motion.div>
+        </div>
+      </div>
+      
+      {/* Values section */}
+      <div className="max-w-7xl mx-auto mt-20 px-4 sm:px-6 lg:px-8">
+        <motion.div 
+          className="grid grid-cols-1 md:grid-cols-3 gap-8"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.8 }}
+        >
+          {hero.values.map((value, index) => {
+            const IconComponent = iconComponents[value.icon];
+            return (
+              <div key={index} className="bg-gray-50 p-8 rounded-xl">
+                <div className={`bg-${value.iconColor}-100 p-3 rounded-full w-fit mb-4`}>
+                  <IconComponent className={`w-6 h-6 text-${value.iconColor}-600`} />
+                </div>
+                <h3 className="text-xl font-semibold text-gray-900 mb-3">{value.title}</h3>
+                <p className="text-gray-600">{value.description}</p>
+              </div>
+            );
+          })}
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/NewsletterSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/NewsletterSection.jsx
new file mode 100644
index 0000000..a03a56e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/NewsletterSection.jsx
@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import careerData from '../config/jobsData.json';
+import { notification } from 'antd';
+import { Link } from 'react-router-dom';
+import { subscribeToNewsletter, validateEmail } from '../../../utils/newsletterApi';
+
+const NewsletterSection = () => {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { newsletter } = careerData;
+  const located = "Careers Page Newsletter";
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    // Email validation
+    if (!validateEmail(email)) {
+      setError('Please enter a valid email address');
+      return;
+    }
+    
+    setError('');
+    setLoading(true);
+    
+    const success = await subscribeToNewsletter(email, located);
+    
+    if (success) {
+      setEmail('');
+    }
+    
+    setLoading(false);
+  };
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="bg-gray-100 rounded-lg p-8 md:p-12"
+      >
+        <div className="flex flex-col md:flex-row md:items-center md:justify-between">
+          <div className="mb-6 md:mb-0 md:mr-8">
+            <div className="uppercase text-sm font-medium text-indigo-600 mb-2">{newsletter.tagline}</div>
+            <h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-3">
+              {newsletter.title}
+            </h2>
+            <p className="text-gray-600 text-sm md:text-base">
+              {newsletter.description}
+            </p>
+          </div>
+          
+          <div className="w-full md:w-auto">
+            <div className="text-sm font-medium text-gray-700 mb-2">{newsletter.formLabel}</div>
+            <form onSubmit={handleSubmit} className="flex flex-col space-y-3">
+              <input
+                type="email"
+                placeholder={newsletter.placeholder}
+                className="px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full md:w-96 text-sm"
+                value={email}
+                onChange={(e) => {
+                  setEmail(e.target.value);
+                  if (error) setError('');
+                }}
+                required
+                disabled={loading}
+              />
+              {error && (
+                <p className="text-red-500 text-sm">{error}</p>
+              )}
+              <button
+                type="submit"
+                className={`bg-indigo-600 text-white font-medium py-3 px-4 rounded-full hover:bg-indigo-700 transition-colors duration-300 w-full ${loading ? 'opacity-70 cursor-not-allowed' : ''}`}
+                disabled={loading}
+              >
+                {loading ? 'Subscribing...' : newsletter.buttonText}
+              </button>
+              <p className="text-sm text-gray-500">
+                By subscribing, you agree to our{' '}
+                <Link to="/privacy-policy" className="text-indigo-600 hover:text-indigo-700 font-medium underline decoration-2 underline-offset-2">
+                  Privacy Policy
+                </Link>
+              </p>
+            </form>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default NewsletterSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/StatsSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/StatsSection.jsx
new file mode 100644
index 0000000..f437234
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/StatsSection.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Users, FileCheck, Building, Package } from 'lucide-react';
+import careerData from '../config/jobsData.json';
+
+// Map icon strings to actual components
+const iconComponents = {
+  Users: Users,
+  FileCheck: FileCheck,
+  Building: Building,
+  Package: Package
+};
+
+const StatsSection = () => {
+  const { stats } = careerData;
+
+  return (
+    <div className="py-10">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="mb-12"
+        >
+          <h2 className="text-3xl font-bold text-gray-900 mb-4">{stats.title}</h2>
+          <p className="text-gray-600 max-w-3xl">
+            {stats.description}
+          </p>
+        </motion.div>
+
+        <div className="mb-12">
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="flex items-center gap-2"
+          >
+            <div className="flex -space-x-2">
+              {stats.teamMembers.map((src, index) => (
+                <img 
+                  key={index}
+                  src={src} 
+                  alt="Team member" 
+                  className="w-8 h-8 rounded-full border-2 border-white" 
+                />
+              ))}
+            </div>
+            <span className="text-gray-700 text-sm font-medium">{stats.activeUsers}</span>
+          </motion.div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {stats.metrics.map((metric, index) => {
+            const IconComponent = iconComponents[metric.icon];
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.3 + (index * 0.1) }}
+                className={`bg-${metric.color}-50 rounded-lg p-6`}
+              >
+                <div className="mb-4">
+                  <IconComponent className={`w-6 h-6 text-${metric.color}-500`} />
+                </div>
+                <div className="text-3xl font-bold text-gray-900 mb-2">{metric.value}</div>
+                <div className={`text-${metric.color}-500 font-medium mb-2`}>{metric.label}</div>
+                <p className="text-gray-600 text-sm">
+                  {metric.description}
+                </p>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatsSection; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/common/ShareButton.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/common/ShareButton.jsx
new file mode 100644
index 0000000..64cc3b4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/common/ShareButton.jsx
@@ -0,0 +1,152 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Share2, X, Link as LinkIcon, Copy } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { getSocialShareLinks, copyJobToClipboard } from '../../utils/socialSharing';
+
+const ShareButton = ({ job, className = '' }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const menuRef = useRef(null);
+
+  // Close the dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const shareLinks = getSocialShareLinks(job);
+
+  const handleShare = (platform) => {
+    window.open(shareLinks[platform], '_blank', 'width=600,height=400');
+    setIsOpen(false);
+  };
+
+  const handleCopyLink = () => {
+    copyJobToClipboard(job);
+    setCopySuccess(true);
+    setTimeout(() => setCopySuccess(false), 2000);
+  };
+
+  return (
+    <div className={`relative ${className} z-20`} ref={menuRef}>
+      <button 
+        onClick={() => setIsOpen(!isOpen)}
+        className="p-2 rounded-full hover:bg-gray-100 transition-colors focus:outline-none"
+        aria-label="Share job"
+      >
+        <Share2 size={18} className="text-gray-600" />
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div 
+            initial={{ opacity: 0, y: -5 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -5 }}
+            transition={{ duration: 0.2 }}
+            className="absolute z-30 right-0 mt-2 bg-white rounded-lg shadow-xl border border-gray-200 w-[90vw] sm:w-80 max-w-[320px] overflow-hidden"
+            style={{ 
+              filter: 'drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1))',
+              right: window.innerWidth <= 425 ? '-60%' : '0',
+            }}
+          >
+            <div className="relative bg-gradient-to-r from-blue-600 to-blue-700 py-3 px-4">
+              <div className="flex justify-between items-center">
+                <h3 className="text-sm font-semibold text-white">Share this job</h3>
+                <button 
+                  onClick={() => setIsOpen(false)}
+                  className="text-white/80 hover:text-white focus:outline-none"
+                >
+                  <X size={16} />
+                </button>
+              </div>
+            </div>
+            
+            <div className="p-4">
+              {/* Social Media Buttons in a grid for better mobile layout */}
+              <div className="grid grid-cols-3 sm:grid-cols-5 gap-4 sm:gap-2">
+                {/* Facebook */}
+                <div className="flex flex-col items-center">
+                  <button 
+                    onClick={() => handleShare('facebook')}
+                    className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full hover:bg-blue-200 transition-colors mb-1"
+                    title="Share on Facebook"
+                  >
+                    <svg className="w-6 h-6 text-blue-600" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.407.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24h-1.918c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116c.73 0 1.323-.593 1.323-1.325V1.325C24 .593 23.407 0 22.675 0z"/>
+                    </svg>
+                  </button>
+                  <span className="text-xs text-gray-600">Facebook</span>
+                </div>
+                
+                {/* Twitter */}
+                <div className="flex flex-col items-center">
+                  <button 
+                    onClick={() => handleShare('twitter')}
+                    className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full hover:bg-blue-200 transition-colors mb-1"
+                    title="Share on Twitter"
+                  >
+                    <img src="/images/icons/twitter_icons.png" alt="Twitter" className="w-7 h-7" />
+                  </button>
+                  <span className="text-xs text-gray-600">Twitter</span>
+                </div>
+                
+                {/* LinkedIn */}
+                <div className="flex flex-col items-center">
+                  <button 
+                    onClick={() => handleShare('linkedin')}
+                    className="flex items-center justify-center w-12 h-12 bg-blue-100 rounded-full hover:bg-blue-200 transition-colors mb-1"
+                    title="Share on LinkedIn"
+                  >
+                    <svg className="w-6 h-6 text-blue-700" viewBox="0 0 24 24" fill="currentColor">
+                      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                    </svg>
+                  </button>
+                  <span className="text-xs text-gray-600">LinkedIn</span>
+                </div>
+                
+                {/* WhatsApp */}
+                <div className="flex flex-col items-center sm:mt-0 mt-4">
+                  <button 
+                    onClick={() => handleShare('whatsapp')}
+                    className="flex items-center justify-center w-12 h-12 bg-green-100 rounded-full hover:bg-green-200 transition-colors mb-1"
+                    title="Share on WhatsApp"
+                  >
+                    <img src="/images/icons/whatsapp-icons.png" alt="WhatsApp" className="w-7 h-7" />
+                  </button>
+                  <span className="text-xs text-gray-600">WhatsApp</span>
+                </div>
+
+                {/* Copy Link */}
+                <div className="flex flex-col items-center sm:mt-0 mt-4">
+                  <button 
+                    onClick={handleCopyLink}
+                    className="flex items-center justify-center w-12 h-12 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors mb-1"
+                    title="Copy link"
+                  >
+                    {copySuccess ? (
+                      <Copy className="w-6 h-6 text-green-500" />
+                    ) : (
+                      <LinkIcon className="w-6 h-6 text-gray-500" />
+                    )}
+                  </button>
+                  <span className="text-xs text-gray-600">{copySuccess ? 'Copied!' : 'Copy'}</span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+export default ShareButton; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/common/Toast.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/common/Toast.jsx
new file mode 100644
index 0000000..dad7f34
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/common/Toast.jsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Check, X } from 'lucide-react';
+
+const Toast = ({ message, type = 'success', onClose, duration = 3000 }) => {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(false);
+      setTimeout(onClose, 300); // Give time for exit animation
+    }, duration);
+
+    return () => clearTimeout(timer);
+  }, [duration, onClose]);
+
+  return (
+    <AnimatePresence>
+      {visible && (
+        <motion.div
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 50 }}
+          transition={{ duration: 0.3 }}
+          className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50"
+        >
+          <div className={`flex items-center px-4 py-3 rounded-lg shadow-lg min-w-64 max-w-md ${
+            type === 'success' 
+              ? 'bg-green-50 border border-green-100' 
+              : type === 'error' 
+                ? 'bg-red-50 border border-red-100' 
+                : 'bg-blue-50 border border-blue-100'
+          }`}>
+            <div className={`mr-3 rounded-full p-1 ${
+              type === 'success' ? 'bg-green-100' : type === 'error' ? 'bg-red-100' : 'bg-blue-100'
+            }`}>
+              {type === 'success' ? (
+                <Check className="w-4 h-4 text-green-600" />
+              ) : type === 'error' ? (
+                <X className="w-4 h-4 text-red-600" />
+              ) : (
+                <Check className="w-4 h-4 text-blue-600" />
+              )}
+            </div>
+            <p className={`text-sm font-medium ${
+              type === 'success' ? 'text-green-700' : type === 'error' ? 'text-red-700' : 'text-blue-700'
+            }`}>
+              {message}
+            </p>
+            <button 
+              onClick={() => {
+                setVisible(false);
+                setTimeout(onClose, 300);
+              }} 
+              className="ml-auto p-1 transition-colors rounded-full hover:bg-gray-200"
+            >
+              <X className="w-4 h-4 text-gray-500" />
+            </button>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default Toast; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/CategoryFilter.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/CategoryFilter.jsx
new file mode 100644
index 0000000..afedbb9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/CategoryFilter.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+// Updated to match exactly with the API's category values
+const categories = ['All Positions', 'Engineering', 'Marketing', 'Customer Success', 'Finance'];
+
+const CategoryFilter = ({ activeCategory, setActiveCategory }) => {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: 0.2, ease: "easeOut" }}
+      className="mb-14 flex flex-wrap justify-center gap-3"
+    >
+      {categories.map((category) => (
+        <button 
+          key={category}
+          onClick={() => setActiveCategory(category)}
+          className={`px-6 py-3 rounded-full text-sm font-medium transition-all duration-300 ${
+            category === activeCategory 
+              ? 'bg-blue-600 text-white shadow-lg hover:shadow-blue-100' 
+              : 'bg-white text-gray-700 hover:bg-gray-100 hover:text-blue-600 border border-gray-200'
+          }`}
+        >
+          {category}
+        </button>
+      ))}
+    </motion.div>
+  );
+};
+
+export default CategoryFilter;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/EmptyJobsMessage.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/EmptyJobsMessage.jsx
new file mode 100644
index 0000000..6bab54e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/EmptyJobsMessage.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const EmptyJobsMessage = ({ activeCategory, setActiveCategory }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+      className="bg-white rounded-xl shadow-sm border border-gray-100 p-12 text-center"
+    >
+      <div className="max-w-md mx-auto">
+        <h3 className="text-xl font-bold text-gray-900 mb-3">No openings in {activeCategory} right now</h3>
+        <p className="text-gray-600 mb-6">
+          We don't have any open positions in this category at the moment. Please check back later or subscribe to get notified when new opportunities become available.
+        </p>
+        <button
+          onClick={() => setActiveCategory('All Positions')}
+          className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-300 text-sm hover:shadow-md"
+        >
+          View all positions
+        </button>
+      </div>
+    </motion.div>
+  );
+};
+
+export default EmptyJobsMessage;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobCards.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobCards.jsx
new file mode 100644
index 0000000..68ce011
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobCards.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight, MapPin, Users } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import ShareButton from '../common/ShareButton';
+
+const JobCard = ({ job, index }) => {
+  return (
+    <motion.div
+      key={job.id}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: 0.1 * index, ease: "easeOut" }}
+      whileHover={{ y: -4 }}
+      className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-all duration-300"
+    >
+      <div className="p-8">
+        <div className="flex justify-between items-start mb-3">
+          <h3 className="text-xl font-bold text-gray-900">
+            {job.title}
+          </h3>
+          <ShareButton job={job} />
+        </div>
+        
+        <p className="text-gray-600 mb-4 leading-relaxed">
+          {job.description}
+        </p>
+        
+        {/* Skills Section */}
+        <div className="mb-2">
+          <div className="text-sm font-medium text-gray-700 mb-2">Required Skills:</div>
+          <div className="flex flex-wrap gap-2">
+            {job.skills && job.skills.map((skill, i) => (
+              <span key={i} className="px-3 py-1 bg-gray-100 text-gray-700 text-xs font-medium rounded-full">
+                {skill}
+              </span>
+            ))}
+          </div>
+        </div>
+        
+        <div className="flex flex-wrap items-center justify-between">
+          <div className="flex items-center gap-4 flex-wrap">
+            <span className="px-4 py-1.5 bg-green-50 text-green-600 text-xs font-medium rounded-full">
+              {job.type}
+            </span>
+            <span className="px-4 py-1.5 bg-blue-50 text-blue-600 text-xs font-medium rounded-full">
+              {job.level}
+            </span>
+            <span className="px-4 py-1.5 bg-purple-50 text-purple-600 text-xs font-medium rounded-full">
+              {job.experience}
+            </span>
+            <span className="text-gray-500 text-sm flex items-center gap-1.5">
+              <MapPin size={14} className="text-gray-400" />
+              Bangalore
+            </span>
+            {job.Numbersofpositions && (
+              <span className="text-gray-700 text-sm flex items-center gap-1.5 bg-gray-100 px-4 py-1.5 rounded-full">
+                <Users size={16} className="text-gray-600" />
+                {job.Numbersofpositions} {job.Numbersofpositions === 1 ? 'Position' : 'Positions'}
+              </span>
+            )}
+          </div>
+          
+          <Link
+            to={`/careers/${job.jobSlug || job.id}`}
+            className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-300 text-sm mt-2 md:mt-0 hover:shadow-md group"
+          >
+            Apply Now
+            <ArrowRight size={16} className="group-hover:translate-x-1 transition-transform" />
+          </Link>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default JobCard;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobListings.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobListings.jsx
new file mode 100644
index 0000000..6cd8a9e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobListings.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import useJobFiltering from '../../hooks/useJobFiltering';
+import JobCard from './JobCards';
+import EmptyJobsMessage from './EmptyJobsMessage';
+import JobPagination from './JobPagination';
+import CategoryFilter from './CategoryFilter';
+import LoadingState from '@/components/common/LoadingFallback';
+
+const JobListings = () => {
+  const {
+    activeCategory,
+    setActiveCategory,
+    currentPage,
+    totalPages,
+    currentJobs,
+    filteredJobs,
+    goToNextPage,
+    goToPreviousPage,
+    goToPage,
+    pageNumbers,
+    loading,
+    error
+  } = useJobFiltering();
+
+  return (
+    <div className="bg-gray-50 py-10">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          id="team-section"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+          className="text-center mb-20"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 tracking-tight">Join our team</h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
+            We're looking for passionate individuals to help us build the future. Explore our open positions below.
+          </p>
+        </motion.div>
+
+        {/* Categories */}
+        <CategoryFilter 
+          activeCategory={activeCategory} 
+          setActiveCategory={setActiveCategory} 
+        />
+
+        {/* Job Listings */}
+        <div className="space-y-6 mb-10">
+          {loading ? (
+            <LoadingState />
+          ) : error ? (
+            <div className="text-center p-8 bg-white rounded-xl shadow-sm">
+              <p className="text-red-500">{error}</p>
+              <button 
+                onClick={() => window.location.reload()} 
+                className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+              >
+                Try Again
+              </button>
+            </div>
+          ) : currentJobs.length > 0 ? (
+            currentJobs.map((job, index) => (
+              <JobCard key={job.id} job={job} index={index} />
+            ))
+          ) : (
+            <EmptyJobsMessage 
+              activeCategory={activeCategory} 
+              setActiveCategory={setActiveCategory} 
+            />
+          )}
+        </div>
+
+        {/* Pagination */}
+        {filteredJobs.length > 4 && (
+          <JobPagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            pageNumbers={pageNumbers}
+            goToPreviousPage={goToPreviousPage}
+            goToNextPage={goToNextPage}
+            goToPage={goToPage}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default JobListings;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobPagination.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobPagination.jsx
new file mode 100644
index 0000000..abb7a7a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/components/jobListings/JobPagination.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+const JobPagination = ({ 
+  currentPage, 
+  totalPages, 
+  pageNumbers, 
+  goToPreviousPage, 
+  goToNextPage, 
+  goToPage 
+}) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      className="flex justify-center items-center space-x-2 mb-20"
+    >
+      <button
+        onClick={goToPreviousPage}
+        disabled={currentPage === 1}
+        className={`p-2 rounded-md flex items-center justify-center ${
+          currentPage === 1 
+            ? 'text-gray-400 cursor-not-allowed' 
+            : 'text-gray-700 hover:bg-gray-100'
+        }`}
+      >
+        <ChevronLeft size={20} />
+      </button>
+      
+      {pageNumbers.map(number => (
+        <button
+          key={number}
+          onClick={() => goToPage(number)}
+          className={`w-10 h-10 rounded-md flex items-center justify-center text-sm font-medium transition-colors ${
+            currentPage === number
+              ? 'bg-blue-600 text-white'
+              : 'text-gray-700 hover:bg-gray-100'
+          }`}
+        >
+          {number}
+        </button>
+      ))}
+      
+      <button
+        onClick={goToNextPage}
+        disabled={currentPage === totalPages}
+        className={`p-2 rounded-md flex items-center justify-center ${
+          currentPage === totalPages
+            ? 'text-gray-400 cursor-not-allowed'
+            : 'text-gray-700 hover:bg-gray-100'
+        }`}
+      >
+        <ChevronRight size={20} />
+      </button>
+    </motion.div>
+  );
+};
+
+export default JobPagination;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/config/jobsData.json b/Tech4biz-Version01/Tech4biz/src/pages/careers/config/jobsData.json
new file mode 100644
index 0000000..e878d16
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/config/jobsData.json
@@ -0,0 +1,97 @@
+{
+  "stats": {
+    "title": "Our Journey in Figures",
+    "description": "Our journey in figures reflects our growth and milestones over the years. Each number tells a story of our dedication, innovation, and the impact we've made.",
+    "activeUsers": "2k+ Active User",
+    "teamMembers": [
+      "https://randomuser.me/api/portraits/women/63.jpg",
+      "https://randomuser.me/api/portraits/men/92.jpg",
+      "https://randomuser.me/api/portraits/women/28.jpg",
+      "https://randomuser.me/api/portraits/men/53.jpg"
+    ],
+    "metrics": [
+      {
+        "icon": "Users",
+        "value": "99+",
+        "label": "Expert Consultants",
+        "description": "Expert consultants delivering impactful solutions.",
+        "color": "red"
+      },
+      {
+        "icon": "FileCheck",
+        "value": "80+",
+        "label": "Projects Delivered",
+        "description": "Successfully delivered projects that drive lasting impact.",
+        "color": "yellow"
+      },
+      {
+        "icon": "Building",
+        "value": "130+",
+        "label": "Active Clients",
+        "description": "Supporting a growing network of active clients worldwide.",
+        "color": "purple"
+      },
+      {
+        "icon": "Package",
+        "value": "64+",
+        "label": "Orders in Queue",
+        "description": "Current orders in queue, ready for prompt delivery.",
+        "color": "orange"
+      }
+    ]
+  },
+  "newsletter": {
+    "tagline": "OUR FUTURE",
+    "title": "Get professional advice for your portfolio growth.",
+    "description": "Join our community of subscribers and receive regular updates delivered straight to your inbox. It's quick, easy, and free",
+    "formLabel": "Get started free",
+    "buttonText": "Send",
+    "placeholder": "Email Address"
+  },
+  "hero": {
+    "badge": "Join Our Team",
+    "title": "Build Your Future",
+    "titleHighlight": "With Us",
+    "description": "Join a team of innovators and problem-solvers dedicated to creating technology solutions that transform businesses worldwide.",
+    "ctaText": "Contact Recruiting",
+    "ctaLink": "/contact",
+    "image": "/images/careers/Careerhero.webp",
+    "imageAlt": "Team collaboration",
+    "cards": [
+      {
+        "icon": "Users",
+        "iconColor": "blue",
+        "title": "Collaborative Culture",
+        "description": "Work with talented professionals who value teamwork",
+        "position": "bottom-left"
+      },
+      {
+        "icon": "Award",
+        "iconColor": "green",
+        "title": "Growth Opportunities",
+        "description": "Develop your skills with continuous learning",
+        "position": "top-right"
+      }
+    ],
+    "values": [
+      {
+        "icon": "Briefcase",
+        "iconColor": "blue",
+        "title": "Meaningful Work",
+        "description": "Create solutions that make a real impact on businesses and communities worldwide."
+      },
+      {
+        "icon": "Users",
+        "iconColor": "blue",
+        "title": "Inclusive Environment",
+        "description": "Join a diverse team where every voice is heard and unique perspectives are valued."
+      },
+      {
+        "icon": "Award",
+        "iconColor": "blue",
+        "title": "Work-Life Balance",
+        "description": "Enjoy flexible work arrangements that respect your personal time and wellbeing."
+      }
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/hooks/useJobFiltering.js b/Tech4biz-Version01/Tech4biz/src/pages/careers/hooks/useJobFiltering.js
new file mode 100644
index 0000000..545e86a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/hooks/useJobFiltering.js
@@ -0,0 +1,98 @@
+import { useState, useEffect } from 'react';
+import { fetchJobs } from '../utils/jobsApi';
+
+const useJobFiltering = (jobsPerPage = 4) => {
+  const [jobs, setJobs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [activeCategory, setActiveCategory] = useState('All Positions');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Fetch jobs from API
+  useEffect(() => {
+    const getJobs = async () => {
+      setLoading(true);
+      try {
+        const jobsData = await fetchJobs();
+        setJobs(jobsData);
+        setError(null);
+      } catch (err) {
+        console.error('Error fetching jobs:', err);
+        setError('Failed to load jobs. Please try again later.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getJobs();
+  }, []);
+
+  // Filter jobs by category - now using the category field directly
+  const filteredJobs = activeCategory === 'All Positions' 
+    ? jobs 
+    : jobs.filter(job => job.category === activeCategory);
+
+  // Calculate total pages
+  const totalPages = Math.ceil(filteredJobs.length / jobsPerPage);
+  
+  // Get current jobs
+  const indexOfLastJob = currentPage * jobsPerPage;
+  const indexOfFirstJob = indexOfLastJob - jobsPerPage;
+  const currentJobs = filteredJobs.slice(indexOfFirstJob, indexOfLastJob);
+
+  // Reset to page 1 when category changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [activeCategory]);
+
+  // Scroll to the team section instead of the top
+  const scrollToTeamSection = () => {
+    const teamSection = document.getElementById('team-section');
+    if (teamSection) {
+      teamSection.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  // Pagination controls
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+      scrollToTeamSection();
+    }
+  };
+
+  const goToPreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+      scrollToTeamSection();
+    }
+  };
+
+  const goToPage = (pageNumber) => {
+    setCurrentPage(pageNumber);
+    scrollToTeamSection();
+  };
+
+  // Generate page numbers
+  const pageNumbers = [];
+  for (let i = 1; i <= totalPages; i++) {
+    pageNumbers.push(i);
+  }
+
+  return {
+    activeCategory,
+    setActiveCategory,
+    currentPage,
+    totalPages,
+    currentJobs,
+    filteredJobs,
+    goToNextPage,
+    goToPreviousPage,
+    goToPage,
+    pageNumbers,
+    loading,
+    error
+  };
+};
+
+export default useJobFiltering; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/careers/index.jsx
new file mode 100644
index 0000000..916e042
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/index.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Hero from './components/Hero';
+import StatsSection from './components/StatsSection';
+import JobListings from './components/jobListings/JobListings';
+import NewsletterSection from './components/NewsletterSection';
+import ScrollToTop from '@/components/common/scroll/ScrollToTop';
+import ScrollToTopButton from '@/components/common/scroll/ScrollToTopButton';
+
+const CareersPage = () => {
+  return (
+    <div className="bg-gray-50">
+      <ScrollToTop />
+      <ScrollToTopButton />
+      <Hero />
+      <JobListings />
+      <StatsSection />
+      <NewsletterSection />
+      {/* We'll add more components as we build them */}
+    </div>
+  );
+};
+
+export default CareersPage; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/utils/jobsApi.js b/Tech4biz-Version01/Tech4biz/src/pages/careers/utils/jobsApi.js
new file mode 100644
index 0000000..79b9c82
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/utils/jobsApi.js
@@ -0,0 +1,73 @@
+/**
+ * API utility for fetching job data from Strapi backend
+ */
+
+const API_URL = import.meta.env.PROD 
+  ? 'https://career.tech4bizsolutions.com/api'
+  : '/api';
+
+/**
+ * Fetch all jobs from the Strapi API
+ * @returns {Promise<Array>} Array of job objects
+ */
+export const fetchJobs = async () => {
+  try {
+    const response = await fetch(`${API_URL}/job?populate=*`);
+    
+    if (!response.ok) {
+      throw new Error(`API request failed with status ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    // Transform the API response to match the expected format
+    if (data && data.data && data.data.jobs) {
+      return data.data.jobs.map(job => {
+        return {
+          ...job,
+          // Parse skills from string to array
+          skills: parseSkills(job.skills)
+        };
+      });
+    }
+    
+    return [];
+  } catch (error) {
+    console.error('Error fetching jobs:', error);
+    return [];
+  }
+};
+
+/**
+ * Fetch a specific job by slug
+ * @param {string} slug - The job slug
+ * @returns {Promise<Object|null>} Job object or null if not found
+ */
+export const fetchJobBySlug = async (slug) => {
+  try {
+    const jobs = await fetchJobs();
+    return jobs.find(job => job.jobSlug === slug) || null;
+  } catch (error) {
+    console.error('Error fetching job by slug:', error);
+    return null;
+  }
+};
+
+/**
+ * Parse skills string from API to array
+ * @param {string} skillsString - Skills as a string (e.g. "\"React\", \"Node.js\"")
+ * @returns {Array} Array of skills
+ */
+const parseSkills = (skillsString) => {
+  if (!skillsString) return [];
+  
+  try {
+    // Remove quotes and split by comma
+    return skillsString
+      .split(',')
+      .map(skill => skill.trim().replace(/^"|"$/g, ''));
+  } catch (error) {
+    console.error('Error parsing skills:', error);
+    return [];
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/careers/utils/socialSharing.js b/Tech4biz-Version01/Tech4biz/src/pages/careers/utils/socialSharing.js
new file mode 100644
index 0000000..5203226
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/careers/utils/socialSharing.js
@@ -0,0 +1,131 @@
+/**
+ * Utility functions for social sharing
+ */
+
+/**
+ * Creates shareable URLs for various social media platforms
+ * @param {Object} job - The job object
+ * @returns {Object} Object containing social media share URLs
+ */
+export const getSocialShareLinks = (job) => {
+  const baseURL = window.location.origin;
+  const jobURL = job.jobSlug 
+    ? `${baseURL}/careers/${job.jobSlug}` 
+    : `${baseURL}/careers/${job.id}`;
+  
+  // Create a well-formatted share text with hashtags
+  const shareText = createShareText(job);
+  const hashTags = createHashTags(job);
+  
+  return {
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(jobURL)}&quote=${encodeURIComponent(shareText + ' ' + hashTags)}`,
+    twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(jobURL)}&text=${encodeURIComponent(shareText + ' ' + hashTags)}`,
+    whatsapp: `https://api.whatsapp.com/send?text=${encodeURIComponent(shareText + ' ' + hashTags + ' ' + jobURL)}`,
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(jobURL)}&title=${encodeURIComponent(job.title)}&summary=${encodeURIComponent(shareText + ' ' + hashTags)}`
+  };
+};
+
+/**
+ * Creates a formatted share text for the job
+ * @param {Object} job - The job object
+ * @returns {string} Formatted share text
+ */
+export const createShareText = (job) => {
+  let companyName = "Tech4biz";
+  let shareText = `Exciting career opportunity at ${companyName}! 🚀\n\n`;
+  shareText += `📋 Position: ${job.title}\n`;
+  
+  if (job.experience) {
+    shareText += `👩‍💻 Experience: ${job.experience}\n`;
+  }
+  
+  if (job.type) {
+    shareText += `⏰ Type: ${job.type}\n`;
+  }
+  
+  if (job.location) {
+    shareText += `📍 Location: ${job.location || 'Bangalore'}\n`;
+  }
+  
+  if (job.skills && job.skills.length > 0) {
+    shareText += `🛠️ Key Skills: ${job.skills.slice(0, 3).join(', ')}${job.skills.length > 3 ? '...' : ''}\n`;
+  }
+  
+  if (job.Numbersofpositions && job.Numbersofpositions > 0) {
+    shareText += `👥 Openings: ${job.Numbersofpositions}\n`;
+  }
+
+  if (job.description) {
+    const shortDescription = job.description.length > 100 
+      ? job.description.substring(0, 100) + '...' 
+      : job.description;
+    shareText += `\n${shortDescription}\n`;
+  }
+  
+  shareText += `\nInterested? Click the link to apply now and join our team! 💼`;
+  
+  return shareText;
+};
+
+/**
+ * Create relevant hashtags based on the job
+ * @param {Object} job - The job object
+ * @returns {string} String with hashtags
+ */
+export const createHashTags = (job) => {
+  const tags = ['Tech4biz', 'JobOpening', 'CareerOpportunity'];
+  
+  // Add job title based hashtag
+  if (job.title) {
+    // Get only the first word of the title if it contains multiple words
+    const titleWords = job.title.split(' ');
+    if (titleWords.length > 0) {
+      const titleTag = titleWords[0].replace(/[^a-zA-Z0-9]/g, '');
+      tags.push(titleTag);
+    }
+  }
+  
+  // Add department/category if available
+  if (job.category && job.category !== 'All Positions') {
+    const categoryTag = job.category.replace(/\s+/g, '');
+    tags.push(categoryTag);
+  }
+  
+  // Add location tag
+  if (job.location) {
+    const locationTag = job.location.replace(/\s+/g, '');
+    tags.push('Jobs' + locationTag);
+  } else {
+    tags.push('JobsBangalore');
+  }
+  
+  // Add experience level tag
+  if (job.level) {
+    tags.push(job.level.replace(/\s+/g, ''));
+  }
+  
+  // Add first skill as hashtag if available
+  if (job.skills && job.skills.length > 0) {
+    const skillTag = job.skills[0].replace(/\s+/g, '');
+    tags.push(skillTag);
+  }
+  
+  // Format hashtags
+  return tags.map(tag => `#${tag}`).join(' ');
+};
+
+/**
+ * Copy job details to clipboard
+ * @param {Object} job - The job object
+ */
+export const copyJobToClipboard = (job) => {
+  const baseURL = window.location.origin;
+  const jobURL = job.jobSlug 
+    ? `${baseURL}/careers/${job.jobSlug}` 
+    : `${baseURL}/careers/${job.id}`;
+  
+  const shareText = createShareText(job);
+  const hashTags = createHashTags(job);
+  
+  navigator.clipboard.writeText(`${shareText}\n\n${hashTags}\n\n${jobURL}`);
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/ContactWays.jsx b/Tech4biz-Version01/Tech4biz/src/pages/contact/ContactWays.jsx
new file mode 100644
index 0000000..2b39063
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/ContactWays.jsx
@@ -0,0 +1,326 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { FaEnvelope, FaMapMarkerAlt, FaPhone, FaClock, FaFacebookF, FaTwitter, FaLinkedinIn, FaYoutube, FaDribbble } from 'react-icons/fa';
+import { notification } from 'antd';
+import contactContent from './config/contactContent.json';
+import { useContactForm } from './hooks/useContactForm';
+import { containerVariants, itemVariants, textVariants } from './animations/variants';
+import axios from 'axios';
+
+const ContactWays = () => {
+  const { contactWays } = contactContent;
+  const { aboutSection, contactInfo, form } = contactWays;
+
+  // Mapping for channel icons (using react-icons/fa)
+  const channelIconMapping = {
+    FaPhone: FaPhone,
+    FaEnvelope: FaEnvelope,
+    FaClock: FaClock,
+    FaMapMarkerAlt: FaMapMarkerAlt,
+  };
+
+  // Mapping for social media icons based on platform names in JSON
+  const socialIconMapping = {
+    Facebook: FaFacebookF,
+    Twitter: FaTwitter,
+    LinkedIn: FaLinkedinIn,
+    YouTube: FaYoutube,
+    Email: FaEnvelope, // fallback icon for email if needed
+  };
+
+  const {
+    formData,
+    handleInputChange,
+    handleCheckboxChange,
+  } = useContactForm(form);
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.05,
+        duration: 0.3
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { y: 10, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.3
+      }
+    }
+  };
+
+  const textVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
+  };
+
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [projectDetail, setProjectDetail] = useState('');
+  const [selectedServices, setSelectedServices] = useState([]);
+  const [successMessage, setSuccessMessage] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+
+  // Define available services
+  const services = [
+    'Digital Media and Branding',
+    'Cloud and Infrastructure Solutions',
+    'Advanced Technologies and R&D',
+    'Software and Application Development',
+    'Immersive and Interactive Experiences',
+    'Hardware Design and Manufacturing',
+  ];
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    // Gather form data
+    const formData = {
+      Name: name,
+      Email: email,
+      ProjectDetail: projectDetail,
+      services_needed: selectedServices
+    };
+
+    try {
+      const response = await axios.post('/api/contact-forms', {
+        data: formData
+      }, {
+        headers: {
+          'Authorization': `Bearer 15a707d348bdc9778e963498f9733158999ddc2c848cc89a55056deca8a00156c0afb96d4bddffb4af2af734b8f92196fce7f537253241e9987967492cb02a47663279fd3577aa91f0a3ba9ca9b340cdf17edc9f8a1e5d7e11801245f0e47885ac7f659327955545eb9fd478c548cbbf1f0374fc9bcb532e8692a0d3adb758e5`,
+          'Content-Type': 'application/json'
+        }
+      });
+      
+      // Show success notification
+      notification.success({
+        message: 'Success',
+        description: 'Thank you for contacting us! We will get back to you soon.',
+        placement: 'topRight',
+      });
+      
+      // Reset form
+      setName('');
+      setEmail('');
+      setProjectDetail('');
+      setSelectedServices([]);
+    } catch (error) {
+      // Show error notification
+      notification.error({
+        message: 'Error',
+        description: 'Failed to submit form. Please try again later.',
+        placement: 'topRight',
+      });
+    }
+  };
+
+  const handleServiceSelection = (service) => {
+    setSelectedServices(prev => {
+      if (prev.includes(service)) {
+        return prev.filter(item => item !== service);
+      } else {
+        return [...prev, service];
+      }
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 flex flex-col items-center justify-center py-8 px-4 sm:px-6 lg:px-8">
+      {/* About Section */}
+      <motion.section
+        className="max-w-4xl mx-auto text-center mb-8 lg:mb-12"
+        initial="hidden"
+        animate="visible"
+        variants={textVariants}
+      >
+        <h1 className="text-[32px] md:text-[40px] font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent mb-6">
+          {aboutSection.title}
+        </h1>
+        <p className="text-[16px] md:text-[20px] text-gray-600 max-w-2xl mx-auto">
+          {aboutSection.description}
+        </p>
+      </motion.section>
+
+      {/* Contact and Form Section */}
+      <div className="max-w-5xl w-full bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col lg:flex-row mx-4 backdrop-blur-lg backdrop-filter">
+        {/* Contact Info Side */}
+        <div className="lg:w-2/5 bg-gradient-to-br from-blue-600 to-blue-800 p-5 lg:p-8">
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.6 }}
+            className="flex flex-col justify-between h-full"
+          >
+            <div>
+              <h2 className="text-2xl lg:text-3xl font-bold text-white mb-3">
+                {contactInfo.heading}
+              </h2>
+              <p className="text-sm text-blue-50 opacity-90 mb-6">
+                {contactInfo.description}
+              </p>
+              
+              <div className="space-y-4 hidden sm:block">
+                {contactInfo.channels.map((item, index) => {
+                  const IconComponent = channelIconMapping[item.icon] || FaPhone;
+                  return (
+                    <motion.div 
+                      key={index}
+                      variants={itemVariants} 
+                      className="flex items-center space-x-3 group"
+                    >
+                      <div className="bg-white/10 p-2 rounded-lg group-hover:bg-white/20 transition-all duration-300">
+                        <IconComponent className="text-white text-base" />
+                      </div>
+                      <div>
+                        <h3 className="text-sm font-medium text-white">{item.title}</h3>
+                        <p className="text-xs text-blue-50">{item.content}</p>
+                      </div>
+                    </motion.div>
+                  );
+                })}
+              </div>
+            </div>
+
+            <div className="mt-6 lg:mt-8 border-t border-white/20 pt-4">
+              <p className="text-sm text-blue-50 mb-3">Follow us on social media</p>
+              <div className="flex space-x-3">
+                {contactInfo.socialMedia.map((social, index) => {
+                  const SocialIcon = socialIconMapping[social.platform] || FaFacebookF;
+                  return (
+                    <motion.a
+                      key={index}
+                      href={social.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      whileHover={{ scale: 1.1 }}
+                      whileTap={{ scale: 0.95 }}
+                      className="bg-white/10 p-2 rounded-lg cursor-pointer hover:bg-white/20 transition-all duration-300"
+                    >
+                      <SocialIcon className="text-white text-sm" />
+                    </motion.a>
+                  );
+                })}
+              </div>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Form Side */}
+        <div className="lg:w-3/5 p-5 lg:p-8 bg-white">
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.4 }}
+            className="max-w-2xl mx-auto"
+          >
+            <h2 className="text-[24px] md:text-[32px] font-bold text-gray-900 mb-2">
+              {form.heading}
+            </h2>
+            <p className="text-[16px] md:text-[20px] text-gray-600 mb-6">
+              {form.subheading}
+            </p>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <motion.div
+                className="space-y-3"
+                variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
+                initial="hidden"
+                animate="visible"
+                viewport={{ once: true }}
+              >
+                {/* Form inputs */}
+                <motion.div className="space-y-1">
+                  <label className="text-[12px] md:text-[14px] font-medium text-gray-700">
+                    {form.fields.name}
+                  </label>
+                  <input
+                    type="text"
+                    name="name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    placeholder="Your Name"
+                    required
+                    className="w-full px-3 py-2 rounded-lg border border-gray-200 focus:ring-1 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-[14px] md:text-[16px]"
+                  />
+                </motion.div>
+
+                <motion.div className="space-y-2">
+                  <label className="text-[12px] md:text-[14px] font-medium text-gray-700">
+                    {form.fields.email}
+                  </label>
+                  <input
+                    type="email"
+                    name="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="Your Email"
+                    required
+                    className="w-full px-3 py-2 rounded-lg border border-gray-200 focus:ring-1 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-[14px] md:text-[16px]"
+                  />
+                </motion.div>
+
+                <motion.div className="space-y-2">
+                  <label className="text-[12px] md:text-[14px] font-medium text-gray-700">
+                    {form.fields.projectDetails}
+                  </label>
+                  <textarea
+                    name="projectDetails"
+                    value={projectDetail}
+                    onChange={(e) => setProjectDetail(e.target.value)}
+                    placeholder="Tell us about your project"
+                    rows="4"
+                    required
+                    className="w-full px-3 py-2 rounded-lg border border-gray-200 focus:ring-1 focus:ring-blue-500 focus:border-transparent transition-all duration-300 text-[14px] md:text-[16px]"
+                  ></textarea>
+                </motion.div>
+
+                <motion.div className="space-y-2">
+                  <label className="text-[12px] md:text-[14px] font-medium text-gray-700">
+                    {form.fields.servicesNeeded}
+                  </label>
+                  <div className="grid grid-cols-2 gap-2">
+                    {services.map((service, index) => (
+                      <label
+                        key={index}
+                        className="flex items-center space-x-2 p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors cursor-pointer"
+                      >
+                        <input
+                          type="checkbox"
+                          name={service}
+                          checked={selectedServices.includes(service)}
+                          onChange={() => handleServiceSelection(service)}
+                          className="w-3 h-3 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
+                        />
+                        <span className="text-[12px] md:text-[14px] text-gray-700">
+                          {service}
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                </motion.div>
+
+                <motion.button
+                  type="submit"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white py-3 rounded-lg text-sm font-medium hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-md hover:shadow-lg"
+                >
+                  {form.submitButton}
+                </motion.button>
+              </motion.div>
+            </form>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContactWays;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/Faq.jsx b/Tech4biz-Version01/Tech4biz/src/pages/contact/Faq.jsx
new file mode 100644
index 0000000..b56a6c8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/Faq.jsx
@@ -0,0 +1,121 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { useState } from 'react';
+import { ChevronDown } from 'lucide-react';
+import contactContent from './config/contactContent.json';
+
+// Import the required icons from lucide-react
+import {
+  Building2,
+  Brain,
+  Fingerprint,
+  Sparkles,
+  LineChart,
+  Shield,
+  PhoneCall,
+  Lightbulb,
+  CheckCircle,
+  DollarSign,
+  Wrench as WrenchIcon
+} from 'lucide-react';
+
+// Create a mapping from the JSON icon strings to the actual components
+const iconMapping = {
+  Building2: Building2,
+  Brain: Brain,
+  Fingerprint: Fingerprint,
+  Sparkles: Sparkles,
+  LineChart: LineChart,
+  Shield: Shield,
+  PhoneCall: PhoneCall,
+  Lightbulb: Lightbulb,
+  CheckCircle: CheckCircle,
+  DollarSign: DollarSign,
+  WrenchIcon: WrenchIcon,
+};
+
+import { useFAQ } from './hooks/useFAQ';
+import { itemVariants } from './animations/variants';
+
+export default function FAQ() {
+  const { faq } = contactContent;
+  const { activeIndex, showAll, toggleFAQ, toggleShowAll } = useFAQ();
+
+  const displayedFaqs = showAll ? faq.faqs : faq.faqs.slice(0, 6);
+
+  return (
+    <section className="py-20 px-4 bg-gray-50">
+      <div className="max-w-7xl mx-auto">
+        <motion.h2
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-[32px] md:text-[40px] font-semibold text-center mb-12"
+        >
+          {faq.heading}
+        </motion.h2>
+
+        <div className="grid md:grid-cols-2 gap-6 mb-8">
+          {displayedFaqs.map((faqItem, index) => {
+            // Get the proper icon component based on the icon key
+            const IconComponent = iconMapping[faqItem.icon];
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: index * 0.1 }}
+                className="group"
+              >
+                <button
+                  onClick={() => toggleFAQ(index)}
+                  className="w-full flex items-start gap-4 text-left p-4 rounded-lg hover:bg-gray-100 transition-colors"
+                >
+                  <div className="w-6 h-6 text-gray-500 mt-1">
+                    {/* If a matching icon component is found, render it; otherwise, display the text */}
+                    {IconComponent ? <IconComponent /> : faqItem.icon}
+                  </div>
+                  <div className="flex-1">
+                    <h3 className="text-[16px] md:text-[20px] font-medium mb-2">
+                      {faqItem.question}
+                    </h3>
+                    <AnimatePresence>
+                      {activeIndex === index && (
+                        <motion.p
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: 'auto', opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          transition={{ duration: 0.2 }}
+                          className="text-[14px] md:text-[16px] text-gray-500"
+                        >
+                          {faqItem.answer}
+                        </motion.p>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                  <ChevronDown
+                    className={`w-5 h-5 text-gray-500 transition-transform ${
+                      activeIndex === index ? 'rotate-180' : ''
+                    }`}
+                  />
+                </button>
+              </motion.div>
+            );
+          })}
+        </div>
+
+        {!showAll && (
+          <div className="text-center">
+            <button
+              onClick={toggleShowAll}
+              className="text-gray-500 hover:text-gray-700 font-medium"
+            >
+              {faq.loadMore}
+            </button>
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/contact/Hero.jsx
new file mode 100644
index 0000000..ac5b6c4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/Hero.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight, Star, Zap, Box, Sparkles, Globe } from 'lucide-react';
+import { MessageSquare } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import contactContent from './config/contactContent.json';
+
+const Hero = () => {
+  const { hero } = contactContent;
+
+  return (
+    <div className="min-h-[70vh] bg-gradient-to-br from-[#1d1d1d] to-[#2d2d2d] relative overflow-hidden">
+      {[...Array(20)].map((_, i) => (
+        <motion.div
+          key={i}
+          className="absolute rounded-full border border-white/10"
+          style={{
+            width: `${(i + 1) * 10}%`,
+            height: `${(i + 1) * 10}%`,
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          }}
+          animate={{
+            rotate: 360,
+            scale: [1, 1.1, 1],
+          }}
+          transition={{
+            duration: 20 + i,
+            repeat: Infinity,
+            ease: "linear",
+          }}
+        />
+      ))}
+
+<div className="max-w-6xl mx-auto my-20 relative">
+        {/* Hero Content */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center max-w-3xl mx-auto"
+        >
+          <motion.span
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.2 }}
+            className="inline-block px-4 py-1.5 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full text-white text-sm font-medium mb-6"
+          >
+            {hero.tagline}
+          </motion.span>
+          
+          <motion.h1
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.3 }}
+            className="text-4xl md:text-6xl font-bold text-white mb-6"
+          >
+            {hero.title}
+          </motion.h1>
+          
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 }}
+            className="text-[#fff] text-lg md:text-xl mb-12"
+          >
+            {hero.description}
+          </motion.p>
+
+          {/* CTA Buttons */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.5 }}
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+          >
+            <Link
+              to={hero.cta.href}
+              className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-3 px-8 rounded-full hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-md hover:shadow-lg"
+            >
+              {hero.cta.text}
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </motion.div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+export default Hero
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/Presense.jsx b/Tech4biz-Version01/Tech4biz/src/pages/contact/Presense.jsx
new file mode 100644
index 0000000..14bef76
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/Presense.jsx
@@ -0,0 +1,83 @@
+// import { motion } from 'framer-motion';
+// import { Copy, MessageCircle, MapPin, Phone } from 'lucide-react';
+// import contactContent from './config/contactContent.json';
+// import { usePresence } from './hooks/usePresence';
+
+// // Create a mapping from the JSON icon strings to their corresponding components
+// const iconMapping = {
+//   MessageCircle: MessageCircle,
+//   MapPin: MapPin,
+//   Phone: Phone,
+// };
+
+// export default function GlobalPresence() {
+//   const { presence } = contactContent;
+//   const { handleCopy } = usePresence();
+
+//   const handleMapClick = (e) => {
+//     e.preventDefault();
+//     window.open('https://maps.app.goo.gl/9tzQs4XTm5wazHa6A', '_blank', 'noopener,noreferrer');
+//   };
+
+//   return (
+//     <section className="py-20 px-4 bg-white">
+//       {/* <div className="max-w-7xl mx-auto"> */}
+//         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+//           {presence.cards.map((card, index) => {
+//             const IconComponent = iconMapping[card.icon];
+//             return (
+//               <motion.div
+//                 key={index}
+//                 initial={{ opacity: 0, y: 20 }}
+//                 whileInView={{ opacity: 1, y: 0 }}
+//                 transition={{ delay: index * 0.1 }}
+//                 viewport={{ once: true }}
+//                 className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 hover:shadow-md transition-shadow"
+//               >
+//                 <div className="flex flex-col gap-4">
+//                   {/* Render the mapped icon component; fallback to plain text if not found */}
+//                   <div className="w-6 h-6 text-gray-500">
+//                     {IconComponent ? <IconComponent /> : card.icon}
+//                   </div>
+//                   <div>
+//                     <h3 className="text-[20px] md:text-[24px] font-semibold text-gray-900 mb-1">
+//                       {card.title}
+//                     </h3>
+//                     <p className="text-[14px] md:text-[16px] text-gray-500 mb-4">
+//                       {card.description}
+//                     </p>
+//                   </div>
+//                   <div className="relative group">
+//                     {card.type === "email" ? (
+//                       <button
+//                         onClick={() => handleCopy(card.action)}
+//                         className="text-[14px] md:text-[16px] text-blue-600 bg-blue-50 px-3 py-2 rounded-lg w-full text-left flex items-center justify-between group-hover:bg-blue-100 transition-colors"
+//                       >
+//                         {card.action}
+//                         <Copy className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
+//                       </button>
+//                     ) : card.type === "link" ? (
+//                       <a
+//                         href="https://maps.app.goo.gl/9tzQs4XTm5wazHa6A"
+//                         onClick={handleMapClick}
+//                         rel="nofollow noopener noreferrer"
+//                         className="text-[14px] md:text-[16px] text-blue-600 bg-blue-50 px-3 py-2 rounded-lg block hover:bg-blue-100 transition-colors"
+//                       >
+//                         {card.action}
+//                       </a>
+//                     ) : (
+//                       <div className="text-[14px] md:text-[16px] text-blue-600 bg-blue-50 px-3 py-2 rounded-lg">
+//                         {card.action}
+//                       </div>
+//                     )}
+//                   </div>
+//                 </div>
+//               </motion.div>
+//             );
+//           })}
+//         </div>
+//       </div>
+//     </section>
+//   );
+// }
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/animations/variants.js b/Tech4biz-Version01/Tech4biz/src/pages/contact/animations/variants.js
new file mode 100644
index 0000000..5d1247f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/animations/variants.js
@@ -0,0 +1,52 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.05,
+      duration: 0.3
+    }
+  }
+};
+
+export const itemVariants = {
+  hidden: { y: 10, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: { duration: 0.3 }
+  }
+};
+
+export const textVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { 
+    opacity: 1, 
+    y: 0, 
+    transition: { duration: 0.6 } 
+  }
+};
+
+export const heroVariants = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.6 }
+};
+
+export const circleVariants = {
+  animate: {
+    rotate: 360,
+    scale: [1, 1.1, 1],
+  },
+  transition: (i) => ({
+    duration: 20 + i,
+    repeat: Infinity,
+    ease: "linear",
+  })
+};
+
+export const presenceCardVariants = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/config/contactContent.json b/Tech4biz-Version01/Tech4biz/src/pages/contact/config/contactContent.json
new file mode 100644
index 0000000..bac139e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/config/contactContent.json
@@ -0,0 +1,156 @@
+{
+    "hero": {
+      "tagline": "Get in Touch",
+      "title": "Let's together create something exceptional",
+      "description": "Do you have inquiries regarding our services, price, or just want to engage in conversation? We are available to assist and welcome your feedback.",
+      "cta": {
+        "text": "Explore Our Services",
+        "href": "/services"
+      }
+    },
+    "contactWays": {
+      "aboutSection": {
+        "title": "Shaping the Future with Innovative Solutions",
+        "description": "If you look for AI, develop new software, or enhance your infrastructure, we offer expert support throughout the process. Let us transform your vision into reality."
+      },
+      "contactInfo": {
+        "heading": "Let's Connect",
+        "description": "Ready to transform your ideas into reality? Reach out through any of these channels.",
+        "channels": [
+          { "icon": "FaPhone", "title": "Phone", "content": "+1 415-870-3091" },
+          { "icon": "FaEnvelope", "title": "Email", "content": "contact@tech4biz.io" },
+          { "icon": "FaClock", "title": "Hours", "content": "Mon-Fri: 9AM-6PM" },
+          { "icon": "FaMapMarkerAlt", "title": "Location", "content": "Bengaluru, India" }
+        ],
+        "socialMedia": [
+          { "platform": "Facebook", "link": "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr" },
+          { "platform": "Twitter", "link": "https://x.com/Tech4bizContact" },
+          { "platform": "LinkedIn", "link": "https://www.linkedin.com/company/tech4biz-solutions-private-limited" },
+          { "platform": "YouTube", "link": "https://www.youtube.com/@Tech4bizz" },
+          { "platform": "Email", "link": "mailto:contact@tech4biz.io" }
+        ]
+      },
+      "form": {
+        "heading": "Start Your Project",
+        "subheading": "Share your vision with us, and let's create something extraordinary together.",
+        "fields": {
+          "name": "Name",
+          "email": "Email",
+          "projectDetails": "Project Details",
+          "servicesNeeded": "Services Needed"
+        },
+        "checkboxOptions": [
+          { "name": "digitalMedia", "label": "Digital Media and Branding" },
+          { "name": "cloudInfra", "label": "Cloud and Infrastructure Solutions" },
+          { "name": "advancedTech", "label": "Advanced Technologies and R&D" },
+          { "name": "softwareDev", "label": "Software and Application Development" },
+          { "name": "immersiveExp", "label": "Immersive and Interactive Experiences" },
+          { "name": "hardwareDesign", "label": "Hardware Design and Manufacturing" }
+        ],
+        "submitButton": "Submit Your Project",
+        "notifications": {
+          "success": {
+            "message": "Form Submitted Successfully",
+            "description": "Thank you for submitting your project!"
+          },
+          "error": {
+            "message": "Failed to submit form",
+            "description": "Please try again later."
+          }
+        }
+      }
+    },
+    "faq": {
+      "heading": "Frequently asked questions",
+      "loadMore": "Load more",
+      "faqs": [
+        {
+          "icon": "Building2",
+          "question": "Which industries does Tech4Biz Solutions serve?",
+          "answer": "We provide tailored solutions for Technology, Healthcare, Finance, Retail, Education, Manufacturing, and more, leveraging AI and tech innovations to drive efficiency and growth."
+        },
+        {
+          "icon": "Brain",
+          "question": "How does Tech4Biz leverage Generative AI?",
+          "answer": "We use Generative AI for automated content creation, personalized user experiences, smart automation, and enhanced data processing across various industries."
+        },
+        {
+          "icon": "Fingerprint",
+          "question": "What makes Tech4Biz Solutions different?",
+          "answer": "We integrate tech solutions with business strategies, offering end-to-end services, industry-specific expertise, and a client-centric approach focused on collaboration and success."
+        },
+        {
+          "icon": "Sparkles",
+          "question": "How can Tech4Biz help with AI-driven innovation?",
+          "answer": "We enhance customer experiences, streamline operations, and enable data-driven decisions with AI solutions tailored to your industry's needs."
+        },
+        {
+          "icon": "LineChart",
+          "question": "Can Tech4Biz assist small businesses with AI?",
+          "answer": "Yes, we offer scalable, cost-effective AI solutions to automate tasks, extract insights, and improve customer engagement for small and medium businesses."
+        },
+        {
+          "icon": "Shield",
+          "question": "How does Tech4Biz ensure security?",
+          "answer": "We prioritize security with data encryption, vulnerability detection, and compliance with local and international regulations to protect your solutions."
+        },
+        {
+          "icon": "PhoneCall",
+          "question": "How do I get started with Tech4Biz?",
+          "answer": "Contact us via our website to schedule a consultation. We'll create a customized roadmap to address your business goals and challenges."
+        },
+        {
+          "icon": "Lightbulb",
+          "question": "Can you help with idea validation and prototyping?",
+          "answer": "Yes, we assist in validating ideas, assessing feasibility, and building prototypes to test functionalities before full-scale development."
+        },
+        {
+          "icon": "CheckCircle",
+          "question": "How do you ensure quality in your projects?",
+          "answer": "We maintain quality with rigorous testing, continuous monitoring, and an experienced team of 80+ experts to deliver reliable results."
+        },
+        {
+          "icon": "DollarSign",
+          "question": "What are the costs of your services?",
+          "answer": "Costs depend on project scope, technology stack, and timelines. We provide cost-effective, customized quotes after a detailed consultation."
+        },
+        {
+          "icon": "WrenchIcon",
+          "question": "Do you provide support after delivery?",
+          "answer": "Yes, we offer maintenance, updates, and training to ensure your solution remains effective and your team is equipped to use it efficiently."
+        }
+      ]
+    },
+    "presence": {
+      "cards": [
+        {
+          "icon": "MessageCircle",
+          "title": "Chat to sales",
+          "description": "Speak to our friendly team.",
+          "action": "sales@tech4bizsolutions.com",
+          "type": "email"
+        },
+        {
+          "icon": "MessageCircle",
+          "title": "Chat to support",
+          "description": "We're here to help.",
+          "action": "contact@tech4biz.io",
+          "type": "email"
+        },
+        {
+          "icon": "MapPin",
+          "title": "Visit us",
+          "description": "Visit our office HQ.",
+          "action": "View on Google Maps",
+          "type": "link"
+        },
+        {
+          "icon": "Phone",
+          "title": "Call us",
+          "description": "Mon-Fri from 9am to 6pm.",
+          "action": "+1-415-870-3091",
+          "type": "phone"
+        }
+      ]
+    }
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/config/contactSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/contact/config/contactSchema.json
new file mode 100644
index 0000000..6a4dd02
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/config/contactSchema.json
@@ -0,0 +1,122 @@
+{
+  "@context": "https://schema.org",
+  "@type": "ContactPage",
+  "name": "Contact Us | Tech4Biz Solutions",
+  "url": "https://tech4bizsolutions.com/contact",
+  "description": "Connect with Tech4Biz Solutions for innovative technology solutions. Reach out for AI, GenAI, hardware, and cloud infrastructure expertise.",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Tech4biz Solutions Private Limited",
+    "url": "https://tech4bizsolutions.com",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+      "width": "180",
+      "height": "36"
+    },
+    "sameAs": [
+      "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+      "https://x.com/Tech4bizContact",
+      "https://www.youtube.com/@Tech4bizz",
+      "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+    ]
+  },
+  "breadcrumb": {
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Home",
+        "item": "https://tech4bizsolutions.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Contact",
+        "item": "https://tech4bizsolutions.com/contact"
+      }
+    ]
+  },
+  "mainEntity": {
+    "@type": "ContactPoint",
+    "telephone": "+1-415-870-3091",
+    "email": "contact@tech4biz.io",
+    "contactType": "Customer Service",
+    "areaServed": "IN",
+    "availableLanguage": ["English", "Hindi", "Kannada"],
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout",
+      "addressLocality": "Bangalore",
+      "addressRegion": "Karnataka",
+      "postalCode": "560102",
+      "addressCountry": "IN"
+    }
+  },
+  "hasPart": [
+    {
+      "@type": "WebPageElement",
+      "name": "Contact Hero",
+      "description": "Let's together create something exceptional",
+      "potentialAction": {
+        "@type": "Action",
+        "name": "Explore Our Services",
+        "target": "https://tech4bizsolutions.com/services"
+      }
+    },
+    {
+      "@type": "WebPageElement",
+      "name": "Contact Ways",
+      "description": "Multiple channels to connect with Tech4Biz",
+      "hasPart": [
+        {
+          "@type": "ContactPoint",
+          "contactType": "Sales",
+          "email": "sales@tech4bizsolutions.com",
+          "description": "Speak to our friendly team"
+        },
+        {
+          "@type": "ContactPoint",
+          "contactType": "Support",
+          "email": "contact@tech4biz.io",
+          "description": "We're here to help"
+        },
+        {
+          "@type": "ContactPoint",
+          "contactType": "Office",
+          "description": "Visit our office HQ",
+          "address": {
+            "@type": "PostalAddress",
+            "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout",
+            "addressLocality": "Bangalore",
+            "addressRegion": "Karnataka",
+            "postalCode": "560102",
+            "addressCountry": "IN"
+          }
+        }
+      ]
+    },
+    {
+      "@type": "FAQPage",
+      "mainEntity": [
+        {
+          "@type": "Question",
+          "name": "Which industries does Tech4Biz Solutions serve?",
+          "acceptedAnswer": {
+            "@type": "Answer",
+            "text": "We provide tailored solutions for Technology, Healthcare, Finance, Retail, Education, Manufacturing, and more, leveraging AI and tech innovations to drive efficiency and growth."
+          }
+        },
+        {
+          "@type": "Question",
+          "name": "How does Tech4Biz leverage Generative AI?",
+          "acceptedAnswer": {
+            "@type": "Answer",
+            "text": "We use Generative AI for automated content creation, personalized user experiences, smart automation, and enhanced data processing across various industries."
+          }
+        }
+      ]
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/useContactForm.js b/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/useContactForm.js
new file mode 100644
index 0000000..72b4d7a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/useContactForm.js
@@ -0,0 +1,97 @@
+import { useState } from 'react';
+import { notification } from 'antd';
+
+export const useContactForm = (form) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    projectDetails: '',
+    services: {
+      digitalMedia: false,
+      cloudInfra: false,
+      advancedTech: false,
+      softwareDev: false,
+      immersiveExp: false,
+      hardwareDesign: false,
+    },
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleCheckboxChange = (e) => {
+    const { name, checked } = e.target;
+    setFormData({
+      ...formData,
+      services: { ...formData.services, [name]: checked },
+    });
+  };
+
+  const resetForm = () => {
+    setFormData({
+      name: '',
+      email: '',
+      projectDetails: '',
+      services: {
+        digitalMedia: false,
+        cloudInfra: false,
+        advancedTech: false,
+        softwareDev: false,
+        immersiveExp: false,
+        hardwareDesign: false,
+      },
+    });
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    const payload = {
+      name: formData.name,
+      email: formData.email,
+      project_details: formData.projectDetails,
+      services_needed: Object.entries(formData.services)
+        .filter(([, value]) => value)
+        .map(([key]) => key)
+        .join(', '),
+      updated_at: new Date().toISOString(),
+      created_at: new Date().toISOString(),
+      id: null,
+    };
+
+    try {
+      const response = await fetch('http://160.187.166.186/api/devcontacts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+
+      if (response.ok) {
+        notification.success({
+          message: form.notifications.success.message,
+          description: form.notifications.success.description,
+          duration: 3,
+        });
+        resetForm();
+      } else {
+        throw new Error(response.statusText);
+      }
+    } catch (error) {
+      console.error('Error:', error);
+      notification.error({
+        message: form.notifications.error.message,
+        description: form.notifications.error.description,
+        duration: 3,
+      });
+    }
+  };
+
+  return {
+    formData,
+    handleInputChange,
+    handleCheckboxChange,
+    handleSubmit,
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/useFAQ.js b/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/useFAQ.js
new file mode 100644
index 0000000..9b2fdf3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/useFAQ.js
@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+export const useFAQ = () => {
+  const [activeIndex, setActiveIndex] = useState(null);
+  const [showAll, setShowAll] = useState(false);
+
+  const toggleFAQ = (index) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  const toggleShowAll = () => {
+    setShowAll(!showAll);
+  };
+
+  return {
+    activeIndex,
+    showAll,
+    toggleFAQ,
+    toggleShowAll,
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/usePresence.js b/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/usePresence.js
new file mode 100644
index 0000000..90a4c1b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/hooks/usePresence.js
@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+
+export const usePresence = () => {
+  const handleCopy = useCallback((text) => {
+    navigator.clipboard.writeText(text);
+  }, []);
+
+  return { handleCopy };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/contact/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/contact/index.jsx
new file mode 100644
index 0000000..aa96687
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/contact/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { Helmet } from 'react-helmet-async';
+import ContactBanner from './Hero'
+import ContactWays from './ContactWays'
+import Faq from './Faq'
+import ScrollToTop from '@/components/common/scroll/ScrollToTop'
+import ScrollToTopButton from '@/components/common/scroll/ScrollToTopButton'
+import contactSchema from './config/contactSchema.json'
+
+const Contact = () => {
+  return (
+    <div>
+      <Helmet>
+        <title>Connect with Us | Tech4Biz Solutions - Ready to Transform Your Business</title>
+        <meta name="description" content="Connect with Tech4Biz Solutions for innovative technology solutions. Reach out for AI, GenAI, hardware, and cloud infrastructure expertise." />
+        <script type="application/ld+json">
+          {JSON.stringify(contactSchema)}
+        </script>
+      </Helmet>
+      <ScrollToTop/>
+      <ScrollToTopButton />
+      <ContactBanner/>
+      <ContactWays/>
+      <Faq/>
+    </div>
+  )
+}
+
+export default Contact
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceContent.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceContent.jsx
new file mode 100644
index 0000000..6521ea3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceContent.jsx
@@ -0,0 +1,76 @@
+import React, { useState, useCallback, memo, useRef } from 'react';
+import { motion } from 'framer-motion';
+import services from '../config/offeredServiceContent.json';
+import { useMediaQuery } from '../hooks/useMediaQuery';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
+import { ANIMATION_VARIANTS } from '../config/animation';
+import { BREAKPOINTS } from '../utils/constants';
+import ServiceItem from './ServiceItem';
+import ServiceDetails from './ServiceDetails';
+import styles from '../styles/Service.module.css'; 
+
+const ServiceContent = () => {
+  const isMobile = useMediaQuery(BREAKPOINTS.MOBILE);
+  const [activeService, setActiveService] = useState(services[0]);
+  const activeIndex = services.findIndex(s => s.title === activeService.title);
+  const containerRef = useRef(null);
+  
+  const [titleRef, isTitleVisible] = useIntersectionObserver({ triggerOnce: true });
+  const [serviceListRef, isServiceListVisible] = useIntersectionObserver({ 
+    threshold: 0.2,
+    triggerOnce: true 
+  });
+
+  const handleProgressComplete = useCallback(() => {
+    const nextIndex = (activeIndex + 1) % services.length;
+    setActiveService(services[nextIndex]);
+  }, [activeIndex, services]);
+
+  const handleServiceSelect = useCallback((service) => {
+    setActiveService(service);
+  }, []);
+
+  return (
+    <div className={styles.container} ref={containerRef}>
+      <div className={styles.sidebar}>
+        <motion.div
+          ref={titleRef}
+          variants={ANIMATION_VARIANTS.container}
+          initial="hidden"
+          animate={isTitleVisible ? "visible" : "hidden"}
+        >
+          <h1 className={styles.heroTitle}>
+            Transforming Ideas into Digital Excellence
+          </h1>
+        </motion.div>
+
+        <ul 
+          ref={serviceListRef}
+          className={styles.serviceList}
+          role="listbox"
+          aria-label="Services list"
+        >
+          {services.map((service) => (
+            <ServiceItem
+              key={service.title}
+              service={service}
+              isActive={activeService.title === service.title}
+              onSelect={() => handleServiceSelect(service)}
+              isMobile={isMobile}
+              onProgressComplete={handleProgressComplete}
+            />
+          ))}
+        </ul>
+      </div>
+      
+      {!isMobile && (
+        <ServiceDetails 
+          service={activeService}
+          variants={ANIMATION_VARIANTS.item}
+        />
+      )}
+    </div>
+  );
+};
+
+export default memo(ServiceContent);
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceDetails.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceDetails.jsx
new file mode 100644
index 0000000..8b6fb25
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceDetails.jsx
@@ -0,0 +1,69 @@
+import React, { memo, useState } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { getServicePath } from '../../DigitalSolutionsDetailPage/utils/helpers';
+import { ANIMATION_VARIANTS } from '../config/animation';
+import styles from '../styles/Service.module.css';
+
+const ServiceDetails = memo(({ service, variants }) => {
+  const navigate = useNavigate();
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  return (
+    <div className={styles.content}>
+      <motion.div
+        key={service.title}
+        variants={variants}
+        initial="hidden"
+        animate="visible"
+        className={styles.serviceContent}
+      >
+        <div className={styles.serviceDetails}>
+          <motion.h2 
+            className={styles.serviceTitle}
+            variants={ANIMATION_VARIANTS.item}
+          >
+            {service.title}
+          </motion.h2>
+
+          <motion.div
+            className={styles.imageContainer}
+            variants={ANIMATION_VARIANTS.item}
+          >
+            <img
+              src={service.image}
+              alt={`Illustration for ${service.title}`}
+              className={`${styles.serviceImage} ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+              width={800}
+              height={450}
+              loading="lazy"
+              onLoad={() => setImageLoaded(true)}
+            />
+          </motion.div>
+
+          <motion.p 
+            className={styles.serviceDescription}
+            variants={ANIMATION_VARIANTS.item}
+          >
+            {service.description}
+          </motion.p>
+
+          <motion.button 
+            className={styles.readMoreButton}
+            onClick={() => navigate(getServicePath(service.title))}
+            variants={ANIMATION_VARIANTS.item}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <span>Explore Service</span>
+            <ChevronRight size={20} />
+          </motion.button>
+        </div>
+      </motion.div>
+    </div>
+  );
+});
+
+ServiceDetails.displayName = 'ServiceDetails';
+export default ServiceDetails;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceItem.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceItem.jsx
new file mode 100644
index 0000000..d31e342
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/components/ServiceItem.jsx
@@ -0,0 +1,93 @@
+import React, { memo, useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { generateServiceSlug } from '../../DigitalSolutionsDetailPage/utils/helpers';
+import { ANIMATION_TIMING } from '../utils/constants';
+import styles from '../styles/Service.module.css';
+
+const ServiceItem = memo(({ 
+  service, 
+  isActive, 
+  onSelect, 
+  isMobile, 
+  onProgressComplete 
+}) => {
+  const [progress, setProgress] = useState(false);
+  const navigate = useNavigate();
+
+  const handleReadMore = (e) => {
+    e.stopPropagation();
+    const serviceSlug = generateServiceSlug(service.title);
+    navigate(`/services/${serviceSlug}`);
+  };
+
+  useEffect(() => {
+    if (!isActive || !isMobile) return;
+
+    const timers = {
+      start: setTimeout(() => setProgress(true), ANIMATION_TIMING.PROGRESS_START),
+      complete: setTimeout(onProgressComplete, ANIMATION_TIMING.PROGRESS_COMPLETE)
+    };
+
+    return () => {
+      Object.values(timers).forEach(clearTimeout);
+      setProgress(false);
+    };
+  }, [isActive, isMobile, onProgressComplete]);
+
+  return (
+    <li 
+      className={styles.serviceItemContainer}
+      role="option"
+      aria-selected={isActive}
+    >
+      <button
+        className={`${styles.serviceItem} ${isActive ? styles.activeItem : ''}`}
+        onClick={() => onSelect(service)}
+        onKeyDown={(e) => e.key === 'Enter' && onSelect(service)}
+        aria-label={`Select ${service.title} service`}
+      >
+        <span className={styles.serviceDot} aria-hidden="true" />
+        <span>{service.title}</span>
+      </button>
+
+      <AnimatePresence>
+        {isMobile && isActive && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className={styles.mobileServiceContent}
+          >
+            <p className={styles.serviceDescription}>{service.description}</p>
+            <button 
+              className={styles.readMoreButton}
+              onClick={handleReadMore}
+              aria-label={`Read more about ${service.title}`}
+            >
+              <span className='font-semibold'>Read more</span>
+              <ChevronRight className={styles.buttonIcon} size={16} />
+            </button>
+            <div 
+              className={styles.progressBar}
+              role="progressbar"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow={progress ? 100 : 0}
+            >
+              <div 
+                className={`${styles.progressFill} ${progress ? styles.progressComplete : ''}`}
+                key={service.title}
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </li>
+  );
+});
+
+ServiceItem.displayName = 'ServiceItem';
+export default ServiceItem;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/animation.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/animation.js
new file mode 100644
index 0000000..d5cc0b8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/animation.js
@@ -0,0 +1,33 @@
+export const ANIMATION_VARIANTS = {
+    container: {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: 0.15,
+          delayChildren: 0.2
+        }
+      }
+    },
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 0.6,
+          ease: [0.22, 1, 0.36, 1]
+        }
+      }
+    },
+    list: {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: 0.1,
+          delayChildren: 0.3
+        }
+      }
+    }
+  };
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json
new file mode 100644
index 0000000..e9f2f99
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json
@@ -0,0 +1,98 @@
+[
+  { 
+    "title": "3D Animation & Character Designing",
+    "description": "Tech4Biz Services provides excellent 3D animation and character design, including different animations, advanced modeling, rigging, and rendering to bring your idea to life.",
+    "image": "/images/services/services/threed.webp",
+    "slug": "3d-animation-and-character-designing"
+  },
+  { 
+    "title": "3D Designing & Printing",
+    "description": "Tech4Biz Services offers 3D design and printing services to help you transform your ideas. We focus on rapid prototyping, specialized manufacturing, and high-precision 3D printing.",
+    "image": "/images/services/services/threed-design.webp",
+    "slug": "3d-designing-and-printing"
+  },
+  {
+    "title": "Brand Building & Marketing Services",
+    "description": "Tech4Biz Services creates bespoke brand strategy, executes digital marketing campaigns, and uses content marketing to generate engagement and business success.",
+    "image": "/images/services/services/brand.webp",
+    "slug": "brand-building-and-marketing-services"
+  },
+  {
+    "title": "Cloud Infrastructure Deployments",
+    "description": "Tech4Biz Services offers experienced cloud infrastructure setups using AWS, Azure, and Google Cloud. We provide public, hybrid, and private cloud solutions that are scalable, secure, and efficient.",
+    "image": "/images/services/services/cloud.webp",
+    "slug": "cloud-infrastructure-deployments"
+  },
+  {
+    "title": "Cyber security solutions",
+    "description": "Tech4Biz Services provides tailored cybersecurity solutions including network security, cloud protection, and penetration testing. Safeguard your business against evolving cyber threats.",
+    "image": "/images/services/services/cyber.webp",
+    "slug": "cyber-security-solutions"
+  },
+  {
+    "title": "Distributed Ledger Technologies",
+    "description": "Tech4Biz Services specializes in Distributed Ledger Technologies (DLT), providing blockchain development, smart contract integration, and safe, transparent solutions for enterprises.",
+    "image": "/images/services/services/dlt.webp",
+    "slug": "distributed-ledger-technologies"
+  },
+  {
+    "title": "Hardware Design Development",
+    "description": "Tech4Biz provides expert custom hardware solutions, including PCB, embedded systems, FPGA, and ASIC design, with a focus on performance, reliability, and efficiency.",
+    "image": "/images/services/services/hardware.webp",
+    "slug": "hardware-design-development"
+  },
+  {
+    "title": "Immersive Technology",
+    "description": "Tech4biz's created immersive technology solutions can help you realize the full potential of AR, VR, and XR for more efficient and engaging business interactions.",
+    "image": "/images/services/services/impressive.webp",
+    "slug": "immersive-technology"
+  },
+  {
+    "title": "Internet of things",
+    "description": "Transform your organization with IoT solutions from Tech4biz Services, which offers expertise in device integration, data analytics, and cloud-based services.",
+    "image": "/images/services/services/iot.webp",
+    "slug": "internet-of-things"
+  },
+  {
+    "title": "PCBA & PCB Manufacturing",
+    "description": "Tech4biz Services provides high-quality PCB design, fabrication, and assembly services to meet your electronic manufacturing needs.",
+    "image": "/images/services/services/pcb.webp",
+    "slug": "pcba-and-pcb-manufacturing"
+  },
+  {
+    "title": "Quantum computing",
+    "description": "Transform your business with customized quantum computing solutions, such as algorithm creation, quantum hardware optimization, and quantum machine learning.",
+    "image": "/images/services/services/quantam.webp",
+    "slug": "quantum-computing"
+  },
+  {
+    "title": "R&D Solutions",
+    "description": "Tech4biz Services provides customized R&D solutions, such as AI, IoT, machine learning, and blockchain, to promote innovation and corporate growth.",
+    "image": "/images/services/services/r-and-d.webp",
+    "slug": "r-and-d-solutions"
+  },
+  {
+    "title": "Software Development",
+    "description": "Tech4biz Services provides custom software development with an emphasis on machine learning, IoT, blockchain, and agile methodologies to solve challenging industry challenges.",
+    "image": "/images/services/services/software-engineer.webp",
+    "slug": "software-development"
+  },
+  {
+    "title": "Software Designing Services",
+    "description": "Improve your business with Tech4biz's software design services, which include online and mobile app development, UX/UI design, and cloud-based solutions for seamless expansion.",
+    "image": "/images/services/services/software-design.webp",
+    "slug": "software-designing-services"
+  },
+  {
+    "title": "Social Media Designing Services",
+    "description": "Improve your social media presence with Tech4biz's design services, which include amazing visuals, animations, and specialized content strategies to captivate your target audience.",
+    "image": "/images/services/services/social.webp",
+    "slug": "social-media-designing-services"
+  },
+  {
+    "title": "VLSI Design",
+    "description": "Tech4Biz provides end-to-end VLSI and FPGA design solutions, from RTL design to tape-out, ensuring high-performance and cost-effective results.",
+    "image": "/images/services/services/vlsi.webp",
+    "slug": "vlsi-design"
+  }
+] 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/servicePageSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/servicePageSchema.json
new file mode 100644
index 0000000..d922f9f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/config/servicePageSchema.json
@@ -0,0 +1,43 @@
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Tech4biz Solutions Private Limited",
+  "url": "https://tech4bizsolutions.com",
+  "logo": {
+    "@type": "ImageObject",
+    "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+    "width": "180",
+    "height": "36"
+  },
+  "sameAs": [
+    "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+    "https://x.com/Tech4bizContact",
+    "https://www.youtube.com/@Tech4bizz",
+    "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+  ],
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "Tech4biz Professional Services",
+    "itemListElement": []
+  },
+  "mainEntity": {
+    "@type": "ContactPoint",
+    "telephone": "+1-415-870-3091",
+    "email": "contact@tech4biz.io",
+    "contactType": "Customer Service",
+    "areaServed": "Worldwide",
+    "availableLanguage": [
+      "English",
+      "Hindi",
+      "Kannada"
+    ],
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout",
+      "addressLocality": "Bangalore",
+      "addressRegion": "Karnataka",
+      "postalCode": "560102",
+      "addressCountry": "IN"
+    }
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/hooks/useIntersectionObserver.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/hooks/useIntersectionObserver.js
new file mode 100644
index 0000000..72026b8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/hooks/useIntersectionObserver.js
@@ -0,0 +1,11 @@
+import { useInView } from 'react-intersection-observer';
+
+export const useIntersectionObserver = (options = {}) => {
+  const [ref, inView] = useInView({
+    threshold: 0.1,
+    triggerOnce: false,
+    ...options
+  });
+
+  return [ref, inView];
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/hooks/useMediaQuery.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/hooks/useMediaQuery.js
new file mode 100644
index 0000000..87cf15f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/hooks/useMediaQuery.js
@@ -0,0 +1,38 @@
+import { useState, useEffect, useMemo } from 'react';
+
+// Debounce function to limit how often a function can run
+const debounce = (fn, ms = 300) => {
+  let timeoutId;
+  return function(...args) {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => fn.apply(this, args), ms);
+  };
+};
+
+export const useMediaQuery = (query) => {
+  // Memoize the media query to prevent recreating it on each render
+  const mediaQuery = useMemo(() => window.matchMedia(query), [query]);
+  
+  // Lazy initialize the state based on the current match
+  const [matches, setMatches] = useState(() => mediaQuery.matches);
+
+  useEffect(() => {
+    // Update matches if query changes
+    setMatches(mediaQuery.matches);
+    
+    // Create a debounced listener to prevent excessive updates
+    const debouncedListener = debounce((e) => {
+      setMatches(e.matches);
+    }, 100);
+    
+    // Use the debounced listener for the 'change' event
+    mediaQuery.addEventListener('change', debouncedListener);
+    
+    // Clean up
+    return () => {
+      mediaQuery.removeEventListener('change', debouncedListener);
+    };
+  }, [mediaQuery]);
+
+  return matches;
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/index.jsx
new file mode 100644
index 0000000..3f244db
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/index.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import ErrorBoundary from '@components/common/error/ErrorBoundary';
+import { Helmet } from 'react-helmet-async';
+import { getServicePageSchema, getServiceMetaTags } from './utils/schema';
+import ScrollToTop from '@components/common/scroll/ScrollToTop';
+import ScrollToTopButton from '@components/common/scroll/ScrollToTopButton';
+import ServiceContent from './components/ServiceContent';
+
+const ServicePage = () => {
+  const schema = getServicePageSchema();
+  const metaTags = getServiceMetaTags();
+
+  return (
+    <ErrorBoundary>
+      <ScrollToTop/> 
+      <ScrollToTopButton />
+
+      <Helmet>
+        <title>Professional Digital Solutions & Technology Services - Tech4biz</title>
+        
+        {/* Basic meta tags */}
+        <meta name="description" content="Comprehensive technology services by Tech4biz including software development, cloud infrastructure, cybersecurity, IoT, blockchain, and more." />
+        <meta name="keywords" content="Tech4biz, digital solutions, technology services, software development, cloud infrastructure, cybersecurity" />
+        
+        {/* Open Graph meta tags */}
+        <meta property="og:title" content="Professional Digital Solutions & Technology Services - Tech4biz" />
+        <meta property="og:description" content="Transform your business with our comprehensive suite of digital solutions including software development, cloud infrastructure, cybersecurity, and innovative technologies." />
+        <meta property="og:type" content="website" />
+        <meta property="og:site_name" content="Tech4biz Solutions" />
+        
+        {/* JSON-LD Schema */}
+        <script type="application/ld+json">
+          {JSON.stringify(schema)}
+        </script>
+        
+        {/* Additional meta tags from the utility function */}
+        {metaTags.map((meta, index) => (
+          <meta key={index} {...meta} />
+        ))}
+      </Helmet>
+      
+      <main className="main-content">
+        <ServiceContent />
+      </main>
+    </ErrorBoundary>
+  );
+};
+
+export default ServicePage;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/styles/Service.module.css b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/styles/Service.module.css
new file mode 100644
index 0000000..6570d94
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/styles/Service.module.css
@@ -0,0 +1,171 @@
+.container {
+  @apply grid grid-cols-1 md:grid-cols-12 bg-black text-white;
+  @apply min-h-screen;
+  @apply max-w-full mx-auto;
+  font-family: 'Poppins', sans-serif;
+}
+
+.sidebar {
+  @apply col-span-1 md:col-span-4 lg:col-span-3;
+  @apply sticky top-0 h-fit max-h-screen overflow-y-auto;
+  @apply p-4 md:p-6 lg:p-8;
+  scrollbar-width: thin;
+  scrollbar-color: #2563EB #1a1a1a;
+}
+
+.content {
+  @apply col-span-1 md:col-span-8 lg:col-span-9;
+  @apply p-4 md:p-6 lg:p-8;
+  @apply flex flex-col items-center;
+}
+
+.serviceList {
+  @apply grid grid-cols-1 gap-2;
+  @apply mt-6 md:mt-8;
+}
+
+.serviceContent {
+  @apply flex flex-col gap-8;
+  @apply w-full max-w-[1000px];
+  @apply mx-auto md:mx-0;
+  @apply transition-all duration-300;
+}
+
+.serviceDetails {
+  @apply flex flex-col gap-6;
+  @apply w-full;
+  margin-left: 0;
+}
+
+.imageContainer {
+  @apply w-full max-w-[800px];
+  @apply mb-6;
+  margin-left: 0;
+}
+
+.serviceImage {
+  @apply rounded-xl overflow-hidden;
+  @apply aspect-video object-cover w-full;
+  @apply transition-transform duration-500;
+  @apply hover:scale-105;
+}
+
+.heroTitle {
+  @apply text-2xl md:text-3xl lg:text-4xl font-bold;
+  @apply bg-gradient-to-r from-blue-500 to-purple-500;
+  @apply bg-clip-text text-transparent;
+  @apply animate-gradient;
+}
+
+@keyframes gradient {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.animate-gradient {
+  @apply bg-[length:200%_200%];
+  animation: gradient 8s ease infinite;
+}
+
+.serviceItem {
+  @apply cursor-pointer flex items-center relative;
+  @apply py-2 pl-10 pr-4;
+  @apply transition-all duration-300;
+  font-family: 'Poppins', sans-serif;
+}
+
+.serviceItem span {
+  @apply text-[18px] text-start md:text-[22px] font-medium;
+  @apply transition-all duration-300;
+  color: #828282;
+}
+
+.serviceItem:hover span {
+  @apply translate-x-4 text-white;
+}
+
+.activeItem {
+  @apply border-[#2563EB];
+  @apply bg-[#2563EB] bg-opacity-5;
+}
+
+.activeItem span {
+  color: #2563EB;
+}
+
+.serviceDot {
+  @apply w-0 h-0 absolute left-4 opacity-0;
+  @apply bg-[#2563EB];
+  @apply transition-all duration-300;
+  @apply rounded-sm;
+}
+
+.serviceItem:hover .serviceDot {
+  @apply w-2 h-2;
+  @apply opacity-100;
+}
+
+.serviceTitle {
+  @apply text-[24px] md:text-[36px] font-bold mb-2;
+  @apply text-left w-full;
+  font-family: 'Poppins', sans-serif;
+}
+
+.serviceDescription {
+  @apply text-[16px] md:text-[18px] mb-6;
+  @apply text-gray-300;
+  @apply max-w-[800px];
+  margin-left: 0;
+  font-family: 'Poppins', sans-serif;
+  line-height: 1.6;
+}
+
+.readMoreButton {
+  @apply mb-4 text-[16px] md:text-[18px] font-medium self-start;
+  @apply flex items-center gap-1;
+  @apply transition-all duration-300;
+  @apply hover:text-[#2563EB];
+  font-family: 'Poppins', sans-serif;
+}
+
+.buttonIcon {
+  @apply transition-transform duration-300;
+  @apply text-white;
+  transform: translateX(0);
+}
+
+.readMoreButton:hover .buttonIcon {
+  @apply text-[#2563EB];
+  transform: translateX(8px);
+}
+
+.serviceItemContainer {
+  @apply w-full flex flex-col;
+}
+
+.mobileServiceContent {
+  @apply md:hidden px-10 py-4 overflow-hidden;
+  background: rgba(37, 99, 235, 0.03);
+}
+
+.progressBar {
+  @apply w-full h-1 bg-white/10 mt-1 rounded-full;
+  @apply relative overflow-hidden;
+}
+
+.progressFill {
+  @apply absolute left-0 top-0 h-full bg-[#2563EB];
+  @apply transition-[width] duration-[5000ms] ease-linear;
+  @apply transform-gpu;
+  width: 0%;
+}
+
+.progressComplete {
+  width: 100%;
+}
+
+.loadingSpinner {
+  @apply text-white text-xl font-medium;
+  @apply animate-pulse;
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/utils/constants.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/utils/constants.js
new file mode 100644
index 0000000..f1326f9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/utils/constants.js
@@ -0,0 +1,9 @@
+export const BREAKPOINTS = {
+  MOBILE: '(max-width: 768px)',
+  TABLET: '(max-width: 1024px)'
+};
+
+export const ANIMATION_TIMING = {
+  PROGRESS_START: 300,
+  PROGRESS_COMPLETE: 5300
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/utils/schema.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/utils/schema.js
new file mode 100644
index 0000000..dd1cf72
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutions/utils/schema.js
@@ -0,0 +1,143 @@
+import services from '../config/offeredServiceContent.json';
+import baseSchema from '../config/servicePageSchema.json';
+
+export const getServicePageSchema = () => {
+  // Create a deep copy of the base schema
+  const schema = JSON.parse(JSON.stringify(baseSchema));
+  
+  // Map services to schema format with enhanced details
+  const serviceItems = services.map(service => ({
+    "@type": "Service",
+    "name": service.title,
+    "description": service.description,
+    "provider": {
+      "@type": "Organization",
+      "name": "Tech4biz Solutions Private Limited",
+      "url": "https://tech4bizsolutions.com"
+    },
+    "serviceType": getServiceType(service.title),
+    "audience": {
+      "@type": "Audience",
+      "audienceType": "Businesses",
+      "geographicArea": {
+        "@type": "AdministrativeArea",
+        "name": "Worldwide"
+      }
+    },
+    "potentialAction": {
+      "@type": "ViewAction",
+      "target": `https://tech4bizsolutions.com/services/${service.slug}`
+    },
+    "mainEntityOfPage": {
+      "@type": "WebPage",
+      "url": `https://tech4bizsolutions.com/services/${service.slug}`
+    },
+    "image": {
+      "@type": "ImageObject",
+      "url": service.image,
+      "width": "800",
+      "height": "450"
+    },
+    "keywords": getServiceKeywords(service.title)
+  }));
+  
+  // Add services to the schema
+  schema.hasOfferCatalog.itemListElement = serviceItems;
+  
+  // Add additional organization details
+  schema.description = "Tech4biz Solutions Private Limited provides cutting-edge digital solutions including software development, cloud infrastructure, cybersecurity, and innovative technologies like IoT, blockchain, and quantum computing.";
+  schema.foundingDate = "2018";
+  schema.numberOfEmployees = {
+    "@type": "QuantitativeValue",
+    "value": "50+"
+  };
+  schema.award = "Top Tech Innovator 2023";
+  
+  return schema;
+};
+
+// Enhanced helper function to categorize services
+const getServiceType = (title) => {
+  if (title.includes('3D Animation') || title.includes('3D Designing')) return 'Design and Animation Services';
+  if (title.includes('Software Development')) return 'Custom Software Development';
+  if (title.includes('Software Designing')) return 'Software Design and Architecture';
+  if (title.includes('Cloud')) return 'Cloud Computing and Infrastructure';
+  if (title.includes('Cyber')) return 'Cybersecurity and Information Security';
+  if (title.includes('Brand') || title.includes('Social Media')) return 'Digital Marketing and Brand Management';
+  if (title.includes('PCB') || title.includes('Hardware')) return 'Hardware Engineering and Manufacturing';
+  if (title.includes('R&D')) return 'Research and Development';
+  if (title.includes('Distributed Ledger')) return 'Blockchain and DLT Solutions';
+  if (title.includes('Immersive')) return 'AR/VR/XR Technology';
+  if (title.includes('Internet of things')) return 'IoT Solutions';
+  if (title.includes('Quantum')) return 'Quantum Computing';
+  if (title.includes('VLSI')) return 'VLSI Design and Engineering';
+  return 'Technology Consulting';
+};
+
+// New helper function to generate relevant keywords for each service
+const getServiceKeywords = (title) => {
+  const baseKeywords = "Tech4biz, technology solutions, digital transformation";
+  
+  if (title.includes('3D Animation')) 
+    return `${baseKeywords}, 3D animation, character design, 3D modeling, rigging, rendering`;
+  if (title.includes('3D Designing')) 
+    return `${baseKeywords}, 3D design, 3D printing, rapid prototyping, specialized manufacturing`;
+  if (title.includes('Brand Building')) 
+    return `${baseKeywords}, brand strategy, digital marketing, content marketing, brand development`;
+  if (title.includes('Cloud')) 
+    return `${baseKeywords}, cloud infrastructure, AWS, Azure, Google Cloud, hybrid cloud, private cloud`;
+  if (title.includes('Cyber')) 
+    return `${baseKeywords}, cybersecurity, network security, cloud protection, penetration testing`;
+  if (title.includes('Distributed Ledger')) 
+    return `${baseKeywords}, blockchain, DLT, smart contracts, distributed systems`;
+  if (title.includes('Hardware')) 
+    return `${baseKeywords}, hardware design, PCB, embedded systems, FPGA, ASIC design`;
+  if (title.includes('Immersive')) 
+    return `${baseKeywords}, AR, VR, XR, immersive technology, augmented reality, virtual reality`;
+  if (title.includes('Internet of things')) 
+    return `${baseKeywords}, IoT, device integration, data analytics, cloud-based IoT`;
+  if (title.includes('PCBA')) 
+    return `${baseKeywords}, PCB design, PCB fabrication, PCB assembly, electronic manufacturing`;
+  if (title.includes('Quantum')) 
+    return `${baseKeywords}, quantum computing, quantum algorithms, quantum hardware, quantum machine learning`;
+  if (title.includes('R&D')) 
+    return `${baseKeywords}, research and development, innovation, AI, IoT, machine learning, blockchain`;
+  if (title.includes('Software Development')) 
+    return `${baseKeywords}, custom software, machine learning, IoT integration, blockchain development`;
+  if (title.includes('Software Designing')) 
+    return `${baseKeywords}, software design, web development, mobile app development, UX/UI design`;
+  if (title.includes('Social Media')) 
+    return `${baseKeywords}, social media design, visual content, animations, content strategy`;
+  if (title.includes('VLSI')) 
+    return `${baseKeywords}, VLSI design, FPGA design, RTL design, tape-out, semiconductor`;
+  
+  return baseKeywords;
+};
+
+export const getServiceMetaTags = () => {
+  const serviceTypes = services.map(service => service.title).join(', ');
+  
+  return [
+    {
+      name: "description",
+      content: `Explore Tech4biz's comprehensive technology services including ${serviceTypes.substring(0, 150)}...`
+    },
+    {
+      name: "keywords",
+      content: "Tech4biz, digital solutions, technology services, " + 
+        services.map(s => s.title.toLowerCase().replace(/&/g, 'and')).join(', ')
+    },
+    {
+      property: "og:title",
+      content: "Professional Digital Solutions & Technology Services - Tech4biz"
+    },
+    {
+      property: "og:type",
+      content: "website"
+    },
+    {
+      property: "og:description",
+      content: "Comprehensive technology services by Tech4biz including software development, cloud infrastructure, cybersecurity, IoT, blockchain, and more."
+    }
+  ];
+};
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/ApproachSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/ApproachSection.jsx
new file mode 100644
index 0000000..ff85f15
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/ApproachSection.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useServiceDetails } from '../hooks/useServiceDetails';
+import styles from '../styles/ServiceDetails.module.css';
+
+const ApproachSection = () => {
+  const { serviceDetails } = useServiceDetails();
+  const { approaches } = serviceDetails || {};
+
+  return (
+    <div className={styles.approachContainer}>
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="max-w-7xl mx-auto"
+      >
+        <h3 className={styles.approachTitle}>
+          OUR APPROACH
+        </h3>
+
+        <div className={styles.approachGrid}>
+          {approaches?.map((approach, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
+              className={styles.approachItem}
+            >
+              <div className={styles.iconWrapper}>
+                <img 
+                  src={approach.icon} 
+                  alt={approach.title} 
+                  className={styles.approachIcon}
+                  loading="lazy"
+                />
+              </div>
+              <p className={styles.approachItemTitle}>
+                {approach.title}
+              </p>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default ApproachSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/HeroSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/HeroSection.jsx
new file mode 100644
index 0000000..4a8dea7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/HeroSection.jsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { Play, Pause } from 'lucide-react';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+import { useServiceDetails } from '../hooks/useServiceDetails';
+import styles from '../styles/ServiceDetails.module.css';
+
+const HeroSection = () => {
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+  const { serviceDetails } = useServiceDetails();
+  const videoRef = useRef(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      videoRef.current.play().catch(error => {
+        console.log("Autoplay prevented:", error);
+        setIsPlaying(false);
+      });
+    }
+  }, []);
+
+  const togglePlay = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handleVideoLoaded = () => {
+    setIsLoading(false);
+  };
+
+  return (
+    <div className={styles.heroContainer}>
+      <div className="absolute inset-0">
+        {isLoading && (
+          <div className="w-full h-full">
+            <Skeleton
+              height="100%"
+              width="100%"
+              baseColor="#202020"
+              highlightColor="#444"
+            />
+          </div>
+        )}
+        <video
+          ref={videoRef}
+          id="serviceVideo"
+          className="w-full h-full object-cover"
+          loop
+          muted
+          playsInline
+          autoPlay
+          onLoadedData={handleVideoLoaded}
+          style={{ display: isLoading ? 'none' : 'block' }}
+        >
+          <source src={serviceDetails?.video} type="video/mp4" />
+        </video>
+        <div className={styles.heroOverlay} />
+      </div>
+
+      <div className={styles.heroContent}>
+        <motion.nav 
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className={styles.heroNav}
+        >
+          SERVICES / {serviceDetails?.title?.toUpperCase()}
+        </motion.nav>
+
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.3 }}
+        >
+          <h1 className={styles.heroTitle}>
+            {serviceDetails?.heroTitle}
+          </h1>
+          <p className={styles.heroDescription}>
+            {serviceDetails?.description}
+          </p>
+
+          <motion.button
+            onClick={togglePlay}
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+            className={styles.playButton}
+          >
+            {isPlaying ? (
+              <>
+                <Pause className={styles.playIcon} />
+                Pause Video
+              </>
+            ) : (
+              <>
+                <Play className={styles.playIcon} />
+                Play Video
+              </>
+            )}
+          </motion.button>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/IndustriesSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/IndustriesSection.jsx
new file mode 100644
index 0000000..e34d791
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/IndustriesSection.jsx
@@ -0,0 +1,122 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useServiceDetails } from '../hooks/useServiceDetails';
+import styles from '../styles/ServiceDetails.module.css';
+
+const QuoteIcon = () => (
+  <svg 
+    viewBox="0 0 24 24" 
+    className={styles.quoteIcon}
+    fill="currentColor"
+  >
+    <path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179zm10 0C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311 1.804.167 3.226 1.648 3.226 3.489a3.5 3.5 0 01-3.5 3.5c-1.073 0-2.099-.49-2.748-1.179z"/>
+  </svg>
+);
+
+const IndustriesSection = () => {
+  const { serviceDetails } = useServiceDetails();
+  const { industries } = serviceDetails || {};
+  const [selectedIndustry, setSelectedIndustry] = useState(
+    industries?.items?.[0]?.id
+  );
+
+  if (!industries?.items?.length) return null;
+
+  return (
+    <>
+      <div className={styles.industriesContainer}>
+        <div className={styles.innerContainer}>
+          <motion.div 
+            className={styles.headerSection}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            viewport={{ once: true }}
+          >
+            <h2 className={styles.mainTitle}>{industries.title}</h2>
+            <div className={styles.titleAccent} />
+          </motion.div>
+
+          <div className={styles.navigationWrapper}>
+            <nav className={styles.navigationContainer}>
+              {industries.items.map((industry, index) => (
+                <motion.button
+                  key={industry.id}
+                  onClick={() => setSelectedIndustry(industry.id)}
+                  className={`${styles.navButton} ${
+                    selectedIndustry === industry.id ? styles.activeNavButton : ''
+                  }`}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ 
+                    duration: 0.5,
+                    delay: index * 0.1,
+                    ease: [0.645, 0.045, 0.355, 1.000]
+                  }}
+                >
+                  {industry.title}
+                  {selectedIndustry === industry.id && (
+                    <motion.div
+                      className={styles.activeIndicator}
+                      layoutId="activeIndicator"
+                      transition={{ 
+                        type: "spring", 
+                        stiffness: 500, 
+                        damping: 40 
+                      }}
+                    />
+                  )}
+                </motion.button>
+              ))}
+            </nav>
+          </div>
+
+          <div className={styles.contentGrid}>
+            <AnimatePresence mode="wait">
+              {industries.items.map((industry) => (
+                industry.id === selectedIndustry && (
+                  <React.Fragment key={industry.id}>
+                    <motion.div
+                      className={styles.imageContainer}
+                      initial={{ opacity: 0, scale: 0.95 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      transition={{ 
+                        duration: 0.4,
+                        ease: [0.645, 0.045, 0.355, 1.000]
+                      }}
+                    >
+                      <img
+                        src={industry.image}
+                        alt={industry.title}
+                        className={styles.industryImage}
+                        loading="lazy"
+                      />
+                      <div className={styles.imageOverlay} />
+                    </motion.div>
+                    <motion.div
+                      className={styles.textContent}
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -20 }}
+                      transition={{ 
+                        duration: 0.4,
+                        delay: 0.1,
+                        ease: [0.645, 0.045, 0.355, 1.000]
+                      }}
+                    >
+                      <h3 className={styles.industryHeading}>{industry.heading}</h3>
+                      <p className={styles.industryDescription}>{industry.description}</p>
+                    </motion.div>
+                  </React.Fragment>
+                )
+              ))}
+            </AnimatePresence>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default IndustriesSection; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/ServicesSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/ServicesSection.jsx
new file mode 100644
index 0000000..dd97c38
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/ServicesSection.jsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Plus } from 'lucide-react';
+import { useServiceDetails } from '../hooks/useServiceDetails';
+import styles from '../styles/ServiceDetails.module.css';
+
+const ServiceItem = ({ service, index, isExpanded, onToggle }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5, delay: index * 0.1 }}
+      viewport={{ once: true }}
+      className={`${styles.serviceItem} ${isExpanded ? styles.expanded : ''}`}
+    >
+      <motion.button
+        className={styles.serviceButton}
+        onClick={onToggle}
+        whilehover={{ backgroundColor: 'rgba(59, 130, 246, 0.05)' }}
+        transition={{ duration: 0.2 }}
+      >
+        <div className={styles.serviceButtonContent}>
+          <span className={styles.serviceNumber}>0{index + 1}</span>
+          <span className={styles.serviceTitle}>{service.title}</span>
+        </div>
+        <motion.div
+          animate={{ rotate: isExpanded ? 45 : 0 }}
+          transition={{ duration: 0.3, ease: "easeInOut" }}
+          className={styles.serviceIcon}
+        >
+          <Plus className="w-6 h-6" />
+        </motion.div>
+      </motion.button>
+
+      <AnimatePresence initial={false}>
+        {isExpanded && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3, ease: "easeInOut" }}
+            className={styles.serviceContent}
+          >
+            <div className={styles.serviceContentInner}>
+              <p>{service.content}</p>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </motion.div>
+  );
+};
+
+const ServicesSection = () => {
+  const { serviceDetails } = useServiceDetails();
+  const { services, servicesHeaderTitle, servicesIntroText } = serviceDetails || {};
+
+  if (!services) return null;
+
+  const [expandedIndex, setExpandedIndex] = useState(null);
+
+  return (
+    <section className={styles.servicesContainer}>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className={styles.servicesHeader}
+        >
+          <h3 className={styles.servicesTitle}>
+            {servicesHeaderTitle}
+          </h3>
+
+          <div className={styles.servicesIntro}>
+            <h2>
+              {servicesIntroText}
+            </h2>
+          </div>
+        </motion.div>
+
+        <div className={styles.servicesList}>
+          {services.map((service, index) => (
+            <ServiceItem
+              key={index}
+              service={service}
+              index={index}
+              isExpanded={expandedIndex === index}
+              onToggle={() => setExpandedIndex(expandedIndex === index ? null : index)}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default React.memo(ServicesSection); 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/StatNumber.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/StatNumber.jsx
new file mode 100644
index 0000000..11ac3c4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/StatNumber.jsx
@@ -0,0 +1,68 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { motion, useInView } from 'framer-motion';
+
+const StatNumber = ({ value, description }) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true, margin: "-100px" });
+  const [count, setCount] = useState(0);
+  
+  // Extract the numeric value without any symbols
+  const numericValue = parseInt(value.replace(/[^0-9]/g, ''));
+
+  useEffect(() => {
+    if (isInView) {
+      let start = 0;
+      const end = numericValue;
+      const duration = 2000;
+      const increment = (end / duration) * 16;
+
+      const timer = setInterval(() => {
+        start += increment;
+        if (start >= end) {
+          setCount(end);
+          clearInterval(timer);
+        } else {
+          setCount(Math.floor(start));
+        }
+      }, 16);
+
+      return () => clearInterval(timer);
+    }
+  }, [isInView, numericValue]);
+
+  // Function to determine the suffix (% or +)
+  const getSuffix = () => {
+    if (value.includes('+')) return '+';
+    if (value.includes('%')) return '%';
+    return '';
+  };
+
+  return (
+    <motion.div
+      ref={ref}
+      initial={{ opacity: 0, y: 20 }}
+      animate={isInView ? { opacity: 1, y: 0 } : {}}
+      transition={{ duration: 0.6, delay: 0.2 }}
+      className="group"
+    >
+      <div className="bg-white rounded-xl p-8 shadow-lg transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
+        <div className="relative">
+          <span className="block text-5xl font-light mb-4 bg-gradient-to-r from-[#2d2d2d] to-[#2d2d2d] bg-clip-text text-transparent font-syne">
+            {count}{getSuffix()}
+          </span>
+          <motion.div 
+            className="w-12 h-1 bg-[#2d2d2d] mb-6"
+            initial={{ width: 0 }}
+            animate={isInView ? { width: 48 } : {}}
+            transition={{ duration: 0.8, delay: 0.5 }}
+          />
+          <p className="text-gray-600 text-sm leading-relaxed font-poppins">
+            {description}
+          </p>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default React.memo(StatNumber);
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/StatsSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/StatsSection.jsx
new file mode 100644
index 0000000..843f966
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/StatsSection.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useServiceDetails } from '../hooks/useServiceDetails';
+import StatNumber from './StatNumber';
+import styles from '../styles/ServiceDetails.module.css';
+
+const StatsSection = () => {
+  const { serviceDetails } = useServiceDetails();
+  const { statsSection } = serviceDetails || {};
+
+  if (!statsSection) return null;
+
+  return (
+    <div className={styles.statsContainer}>
+      <motion.div
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        transition={{ duration: 0.8 }}
+        viewport={{ once: true }}
+        className="max-w-7xl mx-auto"
+      >
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <h2 className={styles.statsTitle}>
+            {statsSection.title}
+          </h2>
+          
+          <p className={styles.statsSubtitle}>
+            {statsSection.description}
+          </p>
+
+          <motion.div
+            initial={{ width: 0 }}
+            whileInView={{ width: "100px" }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="h-1 bg-[#2d2d2d] mx-auto mt-8"
+          />
+        </motion.div>
+
+        <div className={styles.statsGrid}>
+          {statsSection.stats.map((stat, index) => (
+            <StatNumber
+              key={index}
+              value={stat.percentage}
+              description={stat.description}
+            />
+          ))}
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default StatsSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/TransformationSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/TransformationSection.jsx
new file mode 100644
index 0000000..8aef737
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/components/TransformationSection.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useServiceDetails } from '../hooks/useServiceDetails';
+import styles from '../styles/ServiceDetails.module.css';
+
+const TransformationSection = () => {
+  const { serviceDetails } = useServiceDetails();
+  const { transformation } = serviceDetails || {};
+
+  if (!transformation) return null;
+
+  return (
+    <div className={styles.transformationWrapper}>
+      <div className={styles.transformationContainer}>
+        <motion.div 
+          className={styles.transformBox}
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+        >
+          <div className={styles.transformContent}>
+            <motion.div 
+              className={styles.imageSection}
+              initial={{ x: -50 }}
+              whileInView={{ x: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              <div className={styles.imageWrapper}>
+                <img
+                  src={transformation.image}
+                  alt="Digital Transformation"
+                  className={styles.transformImage}
+                  loading="lazy"
+                />
+                <div className={styles.glowEffect} />
+              </div>
+            </motion.div>
+
+            <motion.div 
+              className={styles.textSection}
+              initial={{ x: 50 }}
+              whileInView={{ x: 0 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+            >
+              <span className={styles.label}>{transformation.label}</span>
+              <h2 className={styles.title}>{transformation.title}</h2>
+              <p className={styles.description}>
+                {transformation.description}
+              </p>
+              <motion.a 
+                href={transformation.buttonLink}
+                className={styles.ctaButton}
+                whilehover={{ scale: 1.02, backgroundColor: '#2563eb' }}
+                whileTap={{ scale: 0.98 }}
+              >
+                {transformation.buttonText}
+              </motion.a>
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default TransformationSection; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/3d-animation-and-character-designing.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/3d-animation-and-character-designing.json
new file mode 100644
index 0000000..25baa29
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/3d-animation-and-character-designing.json
@@ -0,0 +1,105 @@
+{
+  "title": "3D Animation & Character Designing",
+  "heroTitle": "Unleashing Creativity Through Innovation in 3D Animation",
+  "description": "Tech4Biz creates stunning 3D animations and character designs that captivate audiences, using cutting-edge technology and artistry for video games, films, and ads.",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/video.webm",
+  "servicesHeaderTitle": "OUR 3D ANIMATION EXPERTISE",
+  "servicesIntroText": "From custom character design to seamless integration, we provide comprehensive animation services tailored to your specific needs.",
+  "statsSection": {
+    "title": "Transform Concepts into Visual Masterpieces",
+    "description": "With over 15 years of experience and 500+ completed projects across gaming, entertainment, and education industries, our state-of-the-art tools and techniques deliver award-winning animations that captivate audiences.",
+    "subtitle": "OUR IMPACT IN NUMBERS",
+    "stats": [
+      {
+        "percentage": "100%",
+        "description": "Client satisfaction with our unique, collaborative approach"
+      },
+      {
+        "percentage": "500+",
+        "description": "projects executed effectively across multiple industries, demonstrating our adaptability"
+      },
+      {
+        "percentage": "15+",
+        "description": "Years of experience making award-winning animations that fascinate and inspire audiences"
+      },
+      {
+        "percentage": "90%",
+        "description": "Clients remark increased engagement with our animations"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore Our Award-Winning Portfolio",
+      "url": "#portfolio"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/threed-animation/custom-character.svg",
+      "title": "Custom Character Design"
+    },
+    {
+      "icon": "/images/services/threed-animation/high-quality.svg",
+      "title": "High-Quality Animation"
+    },
+    {
+      "icon": "/images/services/threed-animation/visual-effects.svg",
+      "title": "Visual Effects & Rendering"
+    },
+    {
+      "icon": "/images/services/threed-animation/audio.svg",
+      "title": "Audio & Integration"
+    }
+  ],
+  "services": [
+    {
+      "title": "Character Design",
+      "content": "includes creating custom characters for games, films, and ads. Designs are created to represent personality, culture, and storyline."
+    },
+    {
+      "title": "Animation Services",
+      "content": "Provide high-quality animations for multiple platforms, including 2D/3D games and virtual reality experiences. Use seamless motion graphics to enhance storytelling."
+    },
+    {
+      "title": "Rendering and lighting effects",
+      "content": "Achieve amazing visuals with photorealistic rendering. Expert lighting design enhances mood and realism."
+    },
+    {
+      "title": "Audio & Integration",
+      "content": "Includes custom soundtracks and effects to enhance images. Provide immersive audio experiences for interactive media."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "entertainment",
+        "title": "Entertainment & Gaming",
+        "heading": "Immersive Entertainment",
+        "description": "Elevate gaming and film experiences through expertly crafted character designs and dynamic animations. Our creative solutions deliver compelling storytelling and engaging visual experiences for diverse entertainment platforms.",
+        "image": "/images/services/threed-animation/entertainment-media.webp"
+      },
+      {
+        "id": "education",
+        "title": "Education & Training",
+        "heading": "Interactive Learning",
+        "description": "Transform educational content with interactive 3D models and engaging simulations. Our innovative solutions enhance learning experiences through dynamic visualizations and immersive training environments.",
+        "image": "/images/services/threed-animation/education-training.webp"
+      },
+      {
+        "id": "advertising",
+        "title": "Marketing & Advertising",
+        "heading": "Visual Storytelling",
+        "description": "Revolutionize brand messaging with compelling visual narratives and dynamic product presentations. Our creative solutions help businesses capture audience attention and drive engagement through powerful storytelling.",
+        "image": "/images/services/threed-animation/advertising-marketing.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Let's shape the future of storytelling together",
+    "description": "Contact us for a consultation and discover how Tech4Biz can bring your imagination to life with expert 3D animation and character design services.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/3d-designing-and-printing.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/3d-designing-and-printing.json
new file mode 100644
index 0000000..4bed692
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/3d-designing-and-printing.json
@@ -0,0 +1,110 @@
+{
+  "title": "3D Designing & Printing",
+  "heroTitle": "Revolutionize your business with 3D design and printing services.",
+  "description": "Tech4Biz offers cutting-edge design and 3D printing services to bring your ideas to life. Whether you're prototyping, customizing products or ramping up production, our experience has you covered accuracy, speed and cost efficiency.",
+  "heroImage": "/images/services/threed-design/3d-rendering-industry-40.webp",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/design.webm",
+  "servicesHeaderTitle": "OUR 3D DESIGN EXPERTISE",
+  "servicesIntroText": "From rapid prototyping to custom manufacturing, we provide comprehensive 3D design and printing services tailored to your specific needs.",
+  "statsSection": {
+    "title": "Why 3D Design and Printing Matter in Today's World",
+    "description": "Our innovative approach combines cutting-edge technology with industry expertise to deliver solutions that drive business growth and innovation.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "75%",
+        "description": "of companies achieve significant cost reduction by integrating 3D printing technology into their manufacturing processes"
+      },
+      {
+        "percentage": "60%",
+        "description": "of manufacturers implement 3D printing solutions to accelerate prototyping and enable efficient small-scale production"
+      },
+      {
+        "percentage": "80%",
+        "description": "of businesses leverage 3D printing capabilities to deliver enhanced customization options that meet specific end-user needs"
+      },
+      {
+        "percentage": "90%",
+        "description": "of organizations utilizing on-demand 3D manufacturing report substantial improvements in their time-to-market metrics"
+      }
+    ],
+    "ctaLink": {
+      "text": "Discover How 3D Design Can Transform Your Business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/threed-design/prototype-first-methodology.webp",
+      "title": "Prototype-based Methodology"
+    },
+    {
+      "icon": "/images/services/threed-design/custom-design-capabilities.webp",
+      "title": "Custom Design Capabilities"
+    },
+    {
+      "icon": "/images/services/threed-design/simulation-analysis.webp",
+      "title": "Sustainability-driven Manufacturing"
+    },
+    {
+      "icon": "/images/services/threed-design/flexible-on-demand-production.webp",
+      "title": "Flexible On-demand Manufacturing"
+    }
+  ],
+  "services": [
+    {
+      "title": "Prototyping Services",
+      "content": "Accelerate your innovation cycle by using high-precision prototypes to evaluate designs, functions and user experience. Our advanced prototyping solutions ensure rapid validation of your concepts."
+    },
+    {
+      "title": "Low-Volume Production",
+      "content": "Effortlessly move from prototyping to small-batch production, ideal for market testing and limited product releases. Our flexible approach ensures quality at every production scale."
+    },
+    {
+      "title": "Personalization & Customization",
+      "content": "Increase customer satisfaction by offering customized designs, branding, and product features. Our advanced capabilities deliver unique solutions tailored to your specific needs."
+    },
+    {
+      "title": "On-Demand Manufacturing",
+      "content": "On-demand manufacturing saves you money and allows you to be more flexible by reducing overhead and inventory costs. Scale production based on real-time market demands."
+    },
+    {
+      "title": "Simulation & Analysis",
+      "content": "Use advanced simulations to optimize designs for performance, robustness, and profitability before physical production. Ensure success through comprehensive virtual testing."
+    }
+  ],
+  "industries": {
+    "title": "Our Core Industries",
+    "items": [
+      {
+        "id": "healthcare",
+        "title": "Healthcare",
+        "heading": "Precision Medical Solutions",
+        "description": "Deliver advanced patient care through custom prosthetics, detailed surgical models, and precision medical device components. Our healthcare solutions combine innovative design with high-accuracy manufacturing to enhance medical outcomes and patient experiences.",
+        "image": "/images/services/threed-design/healthcare.webp"
+      },
+      {
+        "id": "automotive",
+        "title": "Automotive",
+        "heading": "Automotive Excellence",
+        "description": "Transform vehicle production with precision parts, specialized tools, and rapid prototyping solutions. Our automotive expertise enables streamlined manufacturing processes, innovative design validation, and efficient production optimization.",
+        "image": "/images/services/threed-design/automotive-excellence.webp"
+      },
+      {
+        "id": "manufacturing",
+        "title": "Manufacturing",
+        "heading": "Industrial Innovation",
+        "description": "Optimize industrial operations with custom-designed functional parts, precision molds, and specialized assembly tools. Our manufacturing solutions enhance operational efficiency while maintaining superior quality and production standards.",
+        "image": "/images/services/threed-design/healthcare.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to revolutionize your manufacturing process?",
+    "description": "Let's discuss how our advanced 3D design and printing services can transform your ideas into reality. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/brand-building-and-marketing-services.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/brand-building-and-marketing-services.json
new file mode 100644
index 0000000..cd133eb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/brand-building-and-marketing-services.json
@@ -0,0 +1,110 @@
+{
+  "title": "Brand Building & Marketing Services",
+  "heroTitle": "Transform Your Brand Presence with Strategic Marketing",
+  "description": "Tech4Biz delivers comprehensive brand building and marketing services that help businesses establish strong market presence, engage target audiences, and drive sustainable growth through data-driven strategies.",
+  "heroImage": "https://placehold.co/1920x1080",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/marketing.webm",
+  "servicesHeaderTitle": "OUR MARKETING EXPERTISE",
+  "servicesIntroText": "From brand strategy development to digital marketing campaigns, we provide end-to-end marketing solutions tailored to your business objectives.",
+  "statsSection": {
+    "title": "Impact-Based Marketing Solutions",
+    "description": "Our strategic approach combines creative excellence with data analytics to deliver measurable results and sustainable growth for your business.",
+    "subtitle": "OUR IMPACT IN NUMBERS",
+    "stats": [
+      {
+        "percentage": "72%",
+        "description": "of businesses report that consistent brand presentation helps build stronger customer trust and market credibility"
+      },
+      {
+        "percentage": "88%",
+        "description": "of marketing experts confirm that strategic brand development drives long-term success and business sustainability"
+      },
+      {
+        "percentage": "65%",
+        "description": "of companies investing in professional marketing services achieve significant improvements in revenue growth"
+      },
+      {
+        "percentage": "80%",
+        "description": "of business leaders prefer to establish partnerships with organizations that maintain strong digital presence"
+      }
+    ],
+    "ctaLink": {
+      "text": "Discover our marketing success stories",
+      "url": "#success"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/marketing/holistic-brand-strategy.webp",
+      "title": "Holistic Brand Strategy"
+    },
+    {
+      "icon": "/images/services/marketing/customer-centric-marketing.webp",
+      "title": "Customer-Centric Marketing"
+    },
+    {
+      "icon": "/images/services/marketing/sustainability.webp",
+      "title": "Sustainable Growth"
+    },
+    {
+      "icon": "/images/services/marketing/cutting-edge-digital-solutions.webp",
+      "title": "Latest Digital Solutions"
+    }
+  ],
+  "services": [
+    {
+      "title": "Brand Strategy Development",
+      "content": "We create a clear and actionable roadmap to define your brand's values, mission, and vision. This foundation ensures consistency and alignment across all branding and marketing initiatives."
+    },
+    {
+      "title": "Logo Design",
+      "content": "Your logo is the face of your brand. Our experienced designers create unique, memorable and versatile logos that reflect your company's identity and values."
+    },
+    {
+      "title": "Website Development",
+      "content": "A modern and user-friendly website is the foundation of any digital strategy. Our team creates responsive and visually appealing websites that captivate visitors and convert them into loyal customers."
+    },
+    {
+      "title": "Marketing Materials",
+      "content": "We design high-quality materials, from brochures to business cards, that showcase your brand and create a lasting impression."
+    },
+    {
+      "title": "Social Media Management",
+      "content": "We help you create and maintain a strong presence on the platforms where your audience spends their time. Our services include content creation, community management and execution of advertising campaigns."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "startups",
+        "title": "Start-ups & Small Businesses",
+        "heading": "Start-up Growth Solutions",
+        "description": "Empowering start-ups and small businesses with strategic brand identity and targeted marketing approaches to establish strong market presence and drive sustainable growth.",
+        "image": "/images/services/marketing/brand-building.webp"
+      },
+      {
+        "id": "ecommerce",
+        "title": "E-commerce & Retail",
+        "heading": "Retail Excellence",
+        "description": "Delivering comprehensive solutions for retailers including website design, brand identity development, and strategic marketing campaigns to enhance customer experience.",
+        "image": "/images/services/marketing/e-commerce-and-retail.webp"
+      },
+      {
+        "id": "professional-services",
+        "title": "Professional Services",
+        "heading": "Professional Brand Solutions",
+        "description": "Creating distinguished online presence and lasting brand identity for consultants, law firms, and service providers to build credibility and expand client base.",
+        "image": "/images/services/marketing/professional-services.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to transform your brand presence?",
+    "description": "Let's discuss how our strategic marketing services can help you achieve your business growth objectives. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/cloud-infrastructure-deployments.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/cloud-infrastructure-deployments.json
new file mode 100644
index 0000000..af311a9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/cloud-infrastructure-deployments.json
@@ -0,0 +1,105 @@
+{
+  "title": "Cloud Infrastructure Deployments",
+  "heroTitle": "Empower Your Business with Cloud Infrastructure Deployments",
+  "description": "Tech4Biz specializes in designing and deploying cloud infrastructure tailored to your business needs. Whether you're transitioning to a private, public, or hybrid cloud, we ensure seamless integration, robust security, and enhanced scalability to future-proof your business operations.",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/cloud-infrastructure-deployments.webm",
+  "servicesHeaderTitle": "OUR CLOUD EXPERTISE",
+  "servicesIntroText": "From public to private and hybrid solutions, we provide comprehensive cloud infrastructure services tailored to your specific business requirements.",
+  "statsSection": {
+    "title": "Why Cloud Infrastructure Matters in Today's World",
+    "description": "Our innovative approach combines the latest technologies with industry experience to deliver cloud solutions that drive business growth and innovation.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "businesses achieve enhanced operational efficiency through cloud migration solutions"
+      },
+      {
+        "percentage": "70%",
+        "description": "organizations experience substantial cost reductions with cloud infrastructure systems"
+      },
+      {
+        "percentage": "95%",
+        "description": "businesses gain improved scalability and flexibility with cloud-based technologies"
+      },
+      {
+        "percentage": "80%",
+        "description": "companies report strengthened security measures with managed cloud environments"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore How Cloud Infrastructure Can Transform Your Business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/cloud/discovery-assessment.svg",
+      "title": "Discovery & Assessment"
+    },
+    {
+      "icon": "/images/services/cloud/custom-solution-design.svg",
+      "title": "Custom Solution Design"
+    },
+    {
+      "icon": "/images/services/cloud/deployment-integration.svg",
+      "title": "Deployment & Integration"
+    },
+    {
+      "icon": "/images/services/cloud/optimization-support.svg",
+      "title": "Optimization & Support"
+    }
+  ],
+  "services": [
+    {
+      "title": "Cloud Migration Services",
+      "content": "Seamlessly transition your existing infrastructure to the cloud with our expert migration services. We ensure data integrity, minimal downtime, and optimal performance throughout the process."
+    },
+    {
+      "title": "Hybrid Cloud Solutions",
+      "content": "Create the perfect balance between public and private cloud environments. Our hybrid cloud solutions offer flexibility, security, and cost optimization for your specific needs."
+    },
+    {
+      "title": "Cloud Security & Compliance",
+      "content": "Protect your cloud infrastructure with enterprise-grade security measures and ensure compliance with industry regulations through our comprehensive security services."
+    },
+    {
+      "title": "24/7 Cloud Management",
+      "content": "Keep your cloud infrastructure running smoothly with our round-the-clock monitoring, maintenance, and support services. We handle updates, optimization, and issue resolution."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "education",
+        "title": "Education",
+        "heading": "Education & E-Learning Solutions",
+        "description": "Deliver seamless digital learning experiences with cloud-based platforms that connect students and educators while ensuring secure and scalable educational resource management.",
+        "image": "/images/services/cloud/education-and-e-learning.webp"
+      },
+      {
+        "id": "nonprofit",
+        "title": "Non profit",
+        "heading": "Nonprofit & Community Platforms",
+        "description": "Enable mission-driven organizations with powerful cloud solutions that streamline donor management, volunteer coordination, and community engagement initiatives.",
+        "image": "/images/services/cloud/nonprofits-community-organizations.webp"
+      },
+      {
+        "id": "realestate",
+        "title": "Real Estate",
+        "heading": "Real Estate & Construction Excellence",
+        "description": "Transform property management and construction operations with integrated cloud systems that enhance project visibility, client communication, and resource allocation.",
+        "image": "/images/services/cloud/real-estate-construction.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to transform your business with cloud infrastructure?",
+    "description": "Let's discuss how our advanced cloud deployment services can revolutionize your operations. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/cyber-security-solutions.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/cyber-security-solutions.json
new file mode 100644
index 0000000..cfba4fa
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/cyber-security-solutions.json
@@ -0,0 +1,118 @@
+{
+  "title": "Cybersecurity Solutions",
+  "heroTitle": "Cybersecurity Solutions for the Digital Age",
+  "description": "Tech4Biz provides comprehensive cybersecurity solutions tailored to protect your digital assets, prevent vulnerabilities, and mitigate risks. With state-of-the-art technologies and a team of certified experts, we empower you to safeguard your operations while enabling secure growth.",
+  "heroImage": "https://placehold.co/1920x1080",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/cyber-solutions.webm",
+  "servicesHeaderTitle": "OUR CYBERSECURITY EXPERTISE",
+  "servicesIntroText": "From threat detection to incident response, we provide comprehensive cybersecurity services tailored to your specific security needs.",
+  "statsSection": {
+    "title": "Why Cyber Security Matters in Today's World",
+    "description": "Our innovative approach combines the latest technology with industry expertise to deliver solutions that protect businesses from ever-evolving cyber threats.",
+    "subtitle": "UNLOCK YOUR SECURITY POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "Organizations face increased cyber threats during their digital transformation journey"
+      },
+      {
+        "percentage": "60%",
+        "description": "Companies reduce security incident costs through implementation of proactive measures"
+      },
+      {
+        "percentage": "44%",
+        "description": "Businesses achieve better threat detection rates using our advanced security systems"
+      },
+      {
+        "percentage": "75%",
+        "description": "Organizations improve incident response speed with our managed security solutions"
+      }
+    ],
+    "ctaLink": {
+      "text": "Discover how cybersecurity can protect your business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/cybersecurity/customized-strategies.svg",
+      "title": "Customized Strategies"
+    },
+    {
+      "icon": "/images/services/cybersecurity/risk-management.svg",
+      "title": "Proactive Risk Mitigation"
+    },
+    {
+      "icon": "/images/services/cybersecurity/advanced-technology-stack.svg",
+      "title": "Advanced Technology Staff"
+    },
+    {
+      "icon": "/images/services/cybersecurity/customized-strategies.svg",
+      "title": "Continuous Monitoring"
+    }
+  ],
+  "services": [
+    {
+      "title": "Cyber Security Strategy and Consulting",
+      "content": "Partner with our expert consultants to develop and implement a comprehensive cybersecurity strategy that aligns with your business goals while ensuring compliance with industry regulations."
+    },
+    {
+      "title": "Threat Detection and Response",
+      "content": "Deploy cutting-edge systems for real-time threat detection, analysis, and response capabilities, minimizing potential damage through continuous monitoring and rapid incident management."
+    },
+    {
+      "title": "Vulnerability Assessment and Penetration Testing",
+      "content": "Conduct thorough security assessments to identify system vulnerabilities and evaluate your infrastructure's resilience through sophisticated simulated cyber attack scenarios."
+    },
+    {
+      "title": "Network Security",
+      "content": "Implement robust network protection through advanced firewalls, intrusion detection/prevention systems (IDS/IPS), and secure VPN solutions to prevent unauthorized access attempts."
+    },
+    {
+      "title": "Endpoint Security",
+      "content": "Safeguard all endpoints, including IoT devices and systems, with comprehensive protection against sophisticated malware, ransomware, and evolving phishing threats."
+    },
+    {
+      "title": "Cloud Security",
+      "content": "Protect cloud environments with advanced solutions for identity management, data encryption, and continuous compliance monitoring to ensure secure cloud operations."
+    },
+    {
+      "title": "Security Information and Event Management",
+      "content": "Leverage powerful SIEM tools to collect, analyze, and respond to security events in real-time, providing comprehensive visibility into your security landscape."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "finance",
+        "title": "Financial and Banking Services",
+        "heading": "Financial Security Excellence",
+        "description": "Protect financial institutions from cybercriminals targeting sensitive data and transaction systems. Our solutions help banks and fintechs maintain regulatory compliance while ensuring robust security for customer information.",
+        "image": "/images/services/cybersecurity/financial-security-3d-render.webp"
+      },
+      {
+        "id": "healthcare",
+        "title": "Healthcare & Life Sciences",
+        "heading": "Healthcare Security Solutions",
+        "description": "Safeguard electronic health records (EMRs), medical devices, and healthcare infrastructure from cyber threats. Our solutions ensure patient privacy and protect critical medical systems from ransomware attacks.",
+        "image": "/images/services/cybersecurity/healthcare-security.webp"
+      },
+      {
+        "id": "retail",
+        "title": "Retail & e-commerce",
+        "heading": "Retail Security Innovation",
+        "description": "Defend against payment fraud and data breaches in retail environments. Our comprehensive solutions secure customer data, enhance payment security, and protect against sophisticated supply chain cyber risks.",
+        "image": "/images/services/cybersecurity/retail-security-innovation.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to strengthen your cybersecurity posture?",
+    "description": "Let's discuss how our advanced cybersecurity solutions can protect your business from evolving threats. Contact us today to schedule a security assessment.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/distributed-ledger-technologies.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/distributed-ledger-technologies.json
new file mode 100644
index 0000000..20c3618
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/distributed-ledger-technologies.json
@@ -0,0 +1,110 @@
+{
+    "title": "Distributed Ledger Technologies",
+    "heroTitle": "Harness the Power of Distributed Ledger Technologies",
+    "description": "Transform your business operations with secure, transparent, and efficient DLT solutions. Tech4Biz specializes in crafting tailored distributed ledger solutions that help businesses unlock efficiency, trust, and innovation across their operations.",
+    "heroImage": "https://placehold.co/1920x1080",
+    "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/dlt.webm",
+    "servicesHeaderTitle": "OUR DLT EXPERTISE",
+    "servicesIntroText": "From blockchain implementation to smart contract development, we provide comprehensive DLT services tailored to your specific business needs.",
+    "statsSection": {
+      "title": "Why Distributed Ledger Technologies Matter in Today's World",
+      "description": "Transform your business operations with secure, transparent, and efficient DLT solutions. Tech4Biz specializes in building custom distributed ledger solutions that help businesses unlock efficiency, trust, and innovation.",
+      "subtitle": "UNLOCK YOUR POTENTIAL",
+      "stats": [
+        {
+          "percentage": "85%",
+          "description": "organizations achieve improved transparency and trust through DLT implementation"
+        },
+        {
+          "percentage": "70%",
+          "description": "reduction in operational costs and manual processes through smart contracts"
+        },
+        {
+          "percentage": "90%",
+          "description": "improvement in data security and information integrity with blockchain systems"
+        },
+        {
+          "percentage": "65%",
+          "description": "increase in transaction processing speed and efficiency with DLT solutions"
+        }
+      ],
+      "ctaLink": {
+        "text": "Explore How DLT Can Transform Your Business",
+        "url": "#insights"
+      }
+    },
+    "approaches": [
+      {
+        "icon": "/images/services/dlt/strategic-planning.svg",
+        "title": "Strategic Planning"
+      },
+      {
+        "icon": "/images/services/dlt/cutting-edge-technology.svg",
+        "title": "Cutting-edge Technology"
+      },
+      {
+        "icon": "/images/services/dlt/end-to-end-execution.svg",
+        "title": "End-to-End Execution"
+      },
+      {
+        "icon": "/images/services/dlt/seamless-integration.svg",
+        "title": "Seamless Integration"
+      }
+    ],
+    "services": [
+      {
+        "title": "DLT Strategy and Consulting",
+        "content": "Work with our experts to create a DLT roadmap that addresses your business challenges, meets regulatory requirements and identifies the best use cases for your industry."
+      },
+      {
+        "title": "End-to-End DLT Development",
+        "content": "From prototype to deployment, we design and implement fully customized solutions tailored to your needs, including blockchain networks and decentralized applications (DApps)."
+      },
+      {
+        "title": "Smart Contract Development",
+        "content": "Leverage the power of smart contracts to automate complex transactions, reduce manual intervention and eliminate errors while ensuring secure operations."
+      },
+      {
+        "title": "Integration Services",
+        "content": "Seamlessly integrate DLT with your existing systems, providing enhanced functionality and compatibility with APIs, cloud platforms and other enterprise technologies."
+      },
+      {
+        "title": "Implementing Advanced Security",
+        "content": "Protect your DLT solutions with robust cryptographic techniques, powerful consensus algorithms and comprehensive compliance with industry security standards."
+      }
+    ],
+    "industries": {
+      "title": "Industries We Serve",
+      "items": [
+        {
+          "id": "finance",
+          "title": "Financial Services & Banking",
+          "heading": "Financial Innovation",
+          "description": "The financial sector leads DLT adoption, leveraging blockchain for secure transactions and fraud prevention. We deliver custom DLT solutions that help financial institutions modernize their operations and enhance efficiency.",
+          "image": "/images/services/dlt/financial-innovation.webp"
+        },
+        {
+          "id": "supply-chain",
+          "title": "Supply Chain & Logistics",
+          "heading": "Supply Chain Excellence",
+          "description": "Transform your supply chain with advanced DLT solutions that provide end-to-end visibility and traceability. Our blockchain systems enable real-time tracking and create immutable records for seamless operations.",
+          "image": "/images/services/dlt/supply-chain.webp"
+        },
+        {
+          "id": "healthcare",
+          "title": "Healthcare & Pharmaceuticals",
+          "heading": "Healthcare Innovation",
+          "description": "Revolutionize healthcare operations with secure DLT solutions for managing patient data and pharmaceutical supply chains. Our blockchain systems ensure regulatory compliance and protected information sharing.",
+          "image": "/images/services/dlt/healthcare-pharmaceuticals.webp"
+        }
+      ]
+    },
+    "transformation": {
+      "label": "START YOUR JOURNEY",
+      "title": "Ready to transform your business with DLT?",
+      "description": "Let's discuss how our advanced distributed ledger solutions can revolutionize your operations. Contact us today to schedule a consultation.",
+      "image": "/images/services/threed-animation/get-started.webp",
+      "buttonText": "Get Started Now",
+      "buttonLink": "/contact"
+    }
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/hardware-design-development.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/hardware-design-development.json
new file mode 100644
index 0000000..ef65f8f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/hardware-design-development.json
@@ -0,0 +1,105 @@
+{
+    "title": "Hardware Design Development",
+    "heroTitle": "Innovate with Hardware Design Development Services",
+    "description": "Tech4Biz delivers cutting-edge hardware design development services that empower businesses to stay ahead. From concept to production, our custom solutions drive performance, reliability, and innovation while meeting the highest industry standards.",
+    "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/hardware.webm",
+    "servicesHeaderTitle": "OUR HARDWARE DESIGN EXPERTISE",
+    "servicesIntroText": "From custom PCB design to FPGA programming, we provide comprehensive hardware development services tailored to your specific needs.",
+    "statsSection": {
+      "title": "Why Hardware Design Matters in Today's World",
+      "description": "Our innovative approach combines the latest technology with industry expertise to deliver hardware solutions that drive business growth and innovation.",
+      "subtitle": "UNLOCK YOUR POTENTIAL",
+      "stats": [
+        {
+          "percentage": "80%",
+          "description": "Reduced development time through optimized workflows and efficient design processes"
+        },
+        {
+          "percentage": "65%",
+          "description": "Significant cost reduction achieved through streamlined development methodologies"
+        },
+        {
+          "percentage": "70%",
+          "description": "Enhanced system performance delivered through innovative design optimizations"
+        },
+        {
+          "percentage": "95%",
+          "description": "Consistent client satisfaction achieved with our custom hardware solutions"
+        }
+      ],
+      "ctaLink": {
+        "text": "Explore How Hardware Design Can Transform Your Business",
+        "url": "#insights"
+      }
+    },
+    "approaches": [
+      {
+        "icon": "/images/services/hardware/innovation-driven.svg",
+        "title": "Innovation Driven"
+      },
+      {
+        "icon": "/images/services/hardware/custom-solutions.svg",
+        "title": "Custom Solutions"
+      },
+      {
+        "icon": "/images/services/hardware/end-to-end-support.svg",
+        "title": "End-to-End Support"
+      },
+      {
+        "icon": "/images/services/hardware/sustainability.svg",
+        "title": "Sustainability"
+      }
+    ],
+    "services": [
+      {
+        "title": "Custom PCB Design",
+        "content": "Design and develop custom PCBs optimized for performance and reliability, leveraging cutting-edge technologies to meet your specific requirements and industry standards."
+      },
+      {
+        "title": "FPGA Programming",
+        "content": "Expert FPGA selection and programming services to implement robust and scalable designs that ensure optimal performance for your specific applications."
+      },
+      {
+        "title": "Hardware Testing",
+        "content": "Comprehensive testing services to validate performance, reliability, and compliance with industry standards before moving to production."
+      },
+      {
+        "title": "Manufacturing Support",
+        "content": "End-to-end guidance through the manufacturing process, ensuring quality standards and helping select the right production partners."
+      }
+    ],
+    "industries": {
+      "title": "Industries We Serve",
+      "items": [
+        {
+          "id": "automotive",
+          "title": "Automotive",
+          "heading": "Automotive Innovation",
+          "description": "Pioneering advanced control systems and electronic components for next-generation vehicles with focus on reliability and performance.",
+          "image": "/images/services/hardware/automotive-components.webp"
+        },
+        {
+          "id": "consumer-electronics",
+          "title": "Consumer Electronics",
+          "heading": "Consumer Innovation",
+          "description": "Developing innovative consumer devices that combine sophisticated functionality with intuitive design for enhanced user experience.",
+          "image": "/images/services/hardware/consumer-electronics.webp"
+        },
+        {
+          "id": "aerospace",
+          "title": "Aerospace",
+          "heading": "Aerospace Excellence",
+          "description": "Engineering high-performance hardware solutions that meet rigorous aerospace standards while ensuring maximum safety and precision.",
+          "image": "/images/services/hardware/aerospace.webp"
+        }
+      ]
+    },
+    "transformation": {
+      "label": "START YOUR JOURNEY",
+      "title": "Ready to revolutionize your hardware solutions?",
+      "description": "Let's discuss how our advanced hardware design services can transform your ideas into reality. Contact us today to schedule a consultation.",
+      "image": "/images/services/threed-animation/get-started.webp",
+      "buttonText": "Get Started Now",
+      "buttonLink": "/contact"
+    }
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/immersive-technology.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/immersive-technology.json
new file mode 100644
index 0000000..c896275
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/immersive-technology.json
@@ -0,0 +1,120 @@
+{
+    "title": "Immersive Technology",
+    "heroTitle": "Reimagine Possibilities with Immersive Technology Solutions",
+    "description": "Tech4Biz specializes in delivering innovative AR, VR, and XR solutions that transform business interactions and user experiences. From retail and gaming to healthcare and education, our cutting-edge services unlock new dimensions of creativity and efficiency.",
+    "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/immersive.webm",
+    "servicesHeaderTitle": "OUR IMMERSIVE TECHNOLOGY EXPERTISE",
+    "servicesIntroText": "From augmented reality to virtual environments, we provide comprehensive immersive technology solutions tailored to your specific business needs.",
+    "statsSection": {
+      "title": "Why Immersive Technology Matters in Today's World",
+      "description": "Our innovative approach combines the latest AR, VR and XR technologies with industry expertise to deliver solutions that drive engagement and innovation.",
+      "subtitle": "UNLOCK YOUR POTENTIAL",
+      "stats": [
+        {
+          "percentage": "85%",
+          "description": "boost in user engagement through immersive digital experiences"
+        },
+        {
+          "percentage": "70%",
+          "description": "increase in training effectiveness with virtual solutions"
+        },
+        {
+          "percentage": "90%",
+          "description": "enhancement in learning outcomes using mixed reality tools"
+        },
+        {
+          "percentage": "54%",
+          "description": "reduction in workflow errors with augmented assistance"
+        }
+      ],
+      "ctaLink": {
+        "text": "Discover How Immersive Technology Can Transform Your Business",
+        "url": "#insights"
+      }
+    },
+    "approaches": [
+      {
+        "icon": "/images/services/immersive/consultant.svg",
+        "title": "Strategic Consulting"
+      },
+      {
+        "icon": "/images/services/immersive/advanced-development.svg",
+        "title": "Advanced Development"
+      },
+      {
+        "icon": "/images/services/immersive/seamless-integration.svg",
+        "title": "Seamless Integration"
+      },
+      {
+        "icon": "/images/services/immersive/continuous-support.svg",
+        "title": "Continuous Support"
+      }
+    ],
+    "services": [
+      {
+        "title": "Augmented Reality (AR)",
+        "content": "Design AR applications that enhance real-world environments with interactive digital overlays. Platforms include ARKit (iOS), ARCore (Android), and Vuforia."
+      },
+      {
+        "title": "Virtual Reality (VR)",
+        "content": "Develop virtual reality experiences that transport users into fully immersive digital environments. Compatible with Oculus, HTC Vive, and PlayStation VR."
+      },
+      {
+        "title": "Extended Reality (XR)",
+        "content": "Combines augmented reality and virtual reality to create complete XR experiences, seamlessly connecting the physical and virtual worlds."
+      },
+      {
+        "title": "3D Modeling & Animation",
+        "content": "Create realistic 3D models and animations with tools like Blender, Autodesk Maya, and Cinema 4D."
+      },
+      {
+        "title": "Spatial Computing",
+        "content": "Uses SLAM (simultaneous localization and mapping), depth sensing, and LIDAR technologies for accurate environment design."
+      },
+      {
+        "title": "User Interaction Design",
+        "content": "Integrate gesture recognition, voice control, and eye tracking capabilities for intuitive interactions with immersive environments."
+      }
+    ],
+    "industries": {
+      "title": "Industries We Serve",
+      "items": [
+        {
+          "id": "education",
+          "title": "E-learning and Education",
+          "heading": "Educational Innovation",
+          "description": "Transform traditional learning through interactive AR/VR environments, enabling immersive experiences that make complex concepts easier to understand and retain while fostering engagement.",
+          "image": "/images/services/immersive/educational-innovation.webp"
+        },
+        {
+          "id": "manufacturing",
+          "title": "Industrial and Manufacturing",
+          "heading": "Manufacturing Excellence",
+          "description": "Enhance workforce training and safety protocols through virtual simulations and AR-guided operations, enabling risk-free practice and improving operational efficiency.",
+          "image": "/images/services/immersive/retail-innovation.webp"
+        },
+        {
+          "id": "healthcare",
+          "title": "Healthcare",
+          "heading": "Healthcare Excellence",
+          "description": "Revolutionize medical training and patient care with AR-assisted procedures, VR therapy sessions, and immersive medical simulations.",
+          "image": "/images/services/immersive/healthcare-excellence.webp"
+        },
+        {
+          "id": "retail",
+          "title": "Retail",
+          "heading": "Retail Innovation",
+          "description": "Transform shopping experiences with virtual try-ons, immersive showrooms, and AR-guided shopping experiences that enhance customer engagement.",
+          "image": "/images/services/immersive/retail-innovation.webp"
+        }
+      ]
+    },
+    "transformation": {
+      "label": "START YOUR JOURNEY",
+      "title": "Ready to transform your business with immersive technology?",
+      "description": "Let's discuss how our advanced AR, VR, and XR solutions can revolutionize your operations and user experiences. Contact us today to schedule a consultation.",
+      "image": "/images/services/threed-animation/get-started.webp",
+      "buttonText": "Get Started Now",
+      "buttonLink": "/contact"
+    }
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/index.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/index.js
new file mode 100644
index 0000000..82ade64
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/index.js
@@ -0,0 +1,35 @@
+import service3DAnimation from './3d-animation-and-character-designing.json';
+import service3DPrinting from './3d-designing-and-printing.json';
+import serviceBrandMarketing from './brand-building-and-marketing-services.json';
+import serviceCloudInfrastructure from './cloud-infrastructure-deployments.json';
+import serviceCyberSecurity from './cyber-security-solutions.json';
+import serviceDistributedLedger from './distributed-ledger-technologies.json';
+import serviceHardwareDesign from './hardware-design-development.json';
+import serviceImmersiveTechnology from './immersive-technology.json';
+import serviceInternetOfThings from './internet-of-things.json';
+import servicePcbManufacturing from './pcba-&-pcb-manufacturing.json';
+import serviceQuantumComputing from './quantum-computing.json';
+import serviceRDSolutions from './r-and-d-solutions.json';
+import serviceSoftwareDevelopment from './software-development.json';
+import serviceSoftwareDesigning from './software-designing-services.json';
+import serviceSocialMediaDesigning from './social-media-designing-services.json';
+import serviceVLSIDesign from './vlsi-design.json';
+
+export const serviceDetailsConfig = {
+  '3d-animation-and-character-designing': service3DAnimation,
+  '3d-designing-and-printing': service3DPrinting,
+  'brand-building-and-marketing-services': serviceBrandMarketing,
+  'cloud-infrastructure-deployments': serviceCloudInfrastructure,
+  'cyber-security-solutions': serviceCyberSecurity,
+  'distributed-ledger-technologies': serviceDistributedLedger,
+  'hardware-design-development': serviceHardwareDesign,
+  'immersive-technology': serviceImmersiveTechnology,
+  'internet-of-things': serviceInternetOfThings,
+  'pcba-and-pcb-manufacturing': servicePcbManufacturing,
+  'quantum-computing': serviceQuantumComputing,
+  'r-and-d-solutions': serviceRDSolutions,
+  'software-development': serviceSoftwareDevelopment,
+  'software-designing-services': serviceSoftwareDesigning,
+  'social-media-designing-services': serviceSocialMediaDesigning,
+  'vlsi-design': serviceVLSIDesign,
+};
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/internet-of-things.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/internet-of-things.json
new file mode 100644
index 0000000..471e0d4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/internet-of-things.json
@@ -0,0 +1,114 @@
+{
+  "title": "Internet of Things",
+  "heroTitle": "Internet of Things Solutions",
+  "description": "Transform your business with cutting-edge IoT solutions that connect, monitor, and optimize your operations for enhanced efficiency and growth.",
+  "heroImage": "/images/services/threed-animation/get-started.webp",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/iot.webm",
+  "servicesHeaderTitle": "OUR IOT EXPERTISE",
+  "servicesIntroText": "From device integration to data analytics, we provide comprehensive IoT solutions tailored to your specific requirements.",
+  "statsSection": {
+    "title": "Why IoT Matters in Today's World",
+    "description": "Our innovative approach combines cutting-edge IoT technology with industry expertise to deliver solutions that drive business growth and innovation.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "Businesses improve daily operations with IoT technologies"
+      },
+      {
+        "percentage": "70%",
+        "description": "Companies reduce maintenance costs with IoT data analysis"
+      },
+      {
+        "percentage": "90%",
+        "description": "Organizations gain real-time insights from IoT platforms"
+      },
+      {
+        "percentage": "65%",
+        "description": "Enterprises achieve energy savings through IoT monitoring"
+      }
+    ],
+    "ctaLink": {
+      "text": "Find out how IoT can transform your business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/iot/strategic-consultation.svg",
+      "title": "Strategic Consultation"
+    },
+    {
+      "icon": "/images/services/iot/custom-solutions-iot.svg",
+      "title": "Custom Solutions"
+    },
+    {
+      "icon": "/images/services/iot/seamless-integration.svg",
+      "title": "Seamless Integration"
+    },
+    {
+      "icon": "/images/services/iot/ongoing-support.svg",
+      "title": "Ongoing Support"
+    }
+  ],
+  "services": [
+    {
+      "title": "Smart Device Integration",
+      "content": "Connect and control devices through unified IoT platforms for seamless operations and monitoring."
+    },
+    {
+      "title": "IoT Data Analytics",
+      "content": "Leverage advanced analytical tools to gain insights from IoT data, enabling predictive maintenance and operational optimization."
+    },
+    {
+      "title": "Industrial IoT (IIoT)",
+      "content": "Enable smart manufacturing with sensors, robotics, and real-time monitoring of production lines and supply chains."
+    },
+    {
+      "title": "IoT Security",
+      "content": "Implement strong security measures, including encrypted communications and identity management, to protect IoT systems from cyber threats."
+    },
+    {
+      "title": "IoT in Sustainability",
+      "content": "Monitor energy consumption, optimize resources, and reduce environmental impact with IoT solutions."
+    },
+    {
+      "title": "Cloud and Edge Compute",
+      "content": "Combine the scalability of the cloud with the speed of edge computing for efficient data processing and minimal latency."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "energy",
+        "title": "Energy & Utilities",
+        "heading": "Smart Energy Solutions",
+        "description": "Transform energy operations with IoT-enabled solutions that enable real-time monitoring, predictive maintenance, and optimize resource consumption while ensuring sustainable operations across the grid network.",
+        "image": "/images/services/iot/smart-energy-solutions.webp"
+      },
+      {
+        "id": "agriculture",
+        "title": "Agriculture & Livestock",
+        "heading": "Smart Agriculture",
+        "description": "Revolutionize farming practices with IoT systems that monitor soil conditions, track crop health, and automate irrigation processes, enabling data-driven decisions for improved yields and resource efficiency.",
+        "image": "/images/services/iot/agriculture-farming.webp"
+      },
+      {
+        "id": "transport",
+        "title": "Transport and Logistics",
+        "heading": "Connected Logistics",
+        "description": "Enhance supply chain operations with IoT solutions that provide real-time fleet tracking, optimize delivery routes, and streamline warehouse management for improved operational efficiency and customer satisfaction.",
+        "image": "/images/services/iot/transportation-logistics.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to Transform Your Business with IoT?",
+    "description": "Let's discuss how our IoT solutions can help you achieve your business objectives.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/pcba-&-pcb-manufacturing.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/pcba-&-pcb-manufacturing.json
new file mode 100644
index 0000000..fa435ab
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/pcba-&-pcb-manufacturing.json
@@ -0,0 +1,106 @@
+{
+  "title": "PCBA & PCB Manufacturing",
+  "heroTitle": "Top-Notch PCBA & PCB Manufacturing Services",
+  "description": "Tech4Biz specializes in delivering high-quality PCB manufacturing and PCBA services tailored to meet the unique needs of businesses across industries. From simple single-layer boards to complex multi-layer designs, we provide comprehensive solutions that ensure performance, reliability, and quality.",
+  "heroImage": "/images/services/threed-animation/get-started.webp",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/pcba.webm",
+  "servicesHeaderTitle": "OUR PCB EXPERTISE",
+  "servicesIntroText": "From design and prototyping to assembly and testing, we provide comprehensive PCB manufacturing services tailored to your specific requirements.",
+  "statsSection": {
+    "title": "Why PCB Manufacturing Matters in Today's World",
+    "description": "Our innovative approach combines the latest technology with industry experience to deliver printed circuit board solutions that drive business growth and innovation.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "99%",
+        "description": "quality assurance rate in PCB manufacturing and assembly"
+      },
+      {
+        "percentage": "75%",
+        "description": "faster time to market due to our simple manufacturing process"
+      },
+      {
+        "percentage": "85%",
+        "description": "cost savings through optimized manufacturing techniques"
+      },
+      {
+        "percentage": "95%",
+        "description": "client satisfaction rate with our PCB solutions"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore How PCB Manufacturing Can Transform Your Products",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/pcb/end-to-end-services-pcba-pcb-manufacturing.svg",
+      "title": "End-to-End Services"
+    },
+    {
+      "icon": "/images/services/pcb/customization-pcba-pcb-manufacturing.svg",
+      "title": "Customization"
+    },
+    {
+      "icon": "/images/services/pcb/sustainability.svg",
+      "title": "Sustainability"
+    },
+    {
+      "icon": "/images/services/pcb/continuous-support.svg",
+      "title": "Continuous Support"
+    }
+  ],
+  "services": [
+    {
+      "title": "OEM & ODM Services",
+      "content": "Comprehensive manufacturing solutions covering both OEM and ODM services, managing every stage from initial concept to final delivery, ensuring a seamless production experience."
+    },
+    {
+      "title": "Advanced Manufacturing",
+      "content": "State-of-the-art production facilities equipped with automated assembly lines and precision soldering technology, delivering high-quality PCBs with exceptional accuracy."
+    },
+    {
+      "title": "PCB Types & Solutions",
+      "content": "Expert manufacturing of diverse PCB types including single-sided, double-sided, multilayer, and flexible PCBs, tailored to meet specific application requirements."
+    },
+    {
+      "title": "Assembly & Quality Control",
+      "content": "Professional assembly services with rigorous quality control processes, including component placement, soldering, and comprehensive functional testing for optimal performance."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "consumer",
+        "title": "Consumer Electronics",
+        "heading": "Consumer Electronics Excellence",
+        "description": "Advanced PCB solutions for smart devices, wearable technology, and home appliances, delivering optimal performance and reliability for everyday consumer products.",
+        "image": "/images/services/pcb/consumer-electronics-excellence.webp"
+      },
+      {
+        "id": "automotive",
+        "title": "Automotive",
+        "heading": "Automotive Innovation",
+        "description": "High-performance circuit boards engineered for electric vehicles and advanced driver-assistance systems, ensuring durability and precision in automotive applications.",
+        "image": "/images/services/pcb/automotive-innovation.webp"
+      },
+      {
+        "id": "industrial",
+        "title": "Industrial",
+        "heading": "Industrial Solutions",
+        "description": "Heavy-duty PCB solutions designed for industrial machinery and automation systems, providing exceptional reliability in demanding manufacturing environments.",
+        "image": "/images/services/pcb/industrial-solutions.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to enhance your electronic products?",
+    "description": "Let's discuss how our advanced PCB manufacturing and assembly services can elevate your products. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/quantum-computing.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/quantum-computing.json
new file mode 100644
index 0000000..fdafd65
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/quantum-computing.json
@@ -0,0 +1,110 @@
+{
+  "title": "Quantum Computing",
+  "heroTitle": "Revolutionize Your Business with Quantum Computing Solutions",
+  "description": "Tech4Biz leverages cutting-edge quantum technologies to create innovative solutions tailored to your business needs. Whether it's optimizing supply chains, enhancing cybersecurity, or accelerating research and development, our quantum computing expertise empowers you to tackle challenges beyond classical computing limits.",
+  "heroImage": "https://placehold.co/1920x1080",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/quantam.webm",
+  "servicesHeaderTitle": "OUR QUANTUM EXPERTISE",
+  "servicesIntroText": "From quantum algorithm development to hybrid quantum-classical systems, we provide comprehensive quantum computing solutions tailored to your specific needs.",
+  "statsSection": {
+    "title": "Why Quantum Computing Matters in Today's World",
+    "description": "Our innovative approach combines cutting-edge quantum technology with industry expertise to deliver solutions that drive business transformation and innovation.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "100%",
+        "description": "Accelerating computational problem-solving through advanced quantum algorithm systems"
+      },
+      {
+        "percentage": "80%",
+        "description": "Optimizing complex processing tasks with quantum-enhanced computational solutions"
+      },
+      {
+        "percentage": "90%",
+        "description": "Enhancing simulation accuracy through quantum-powered mathematical modeling tools"
+      },
+      {
+        "percentage": "75%",
+        "description": "Improving machine learning capabilities with quantum computational advantages"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore How Quantum Computing Can Transform Your Business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/quantam/quantum-algorithms.svg",
+      "title": "Quantum Algorithms"
+    },
+    {
+      "icon": "/images/services/quantam/hybrid-computing.svg",
+      "title": "Hybrid Computing"
+    },
+    {
+      "icon": "/images/services/quantam/quantum-ml.svg",
+      "title": "Quantum ML"
+    },
+    {
+      "icon": "/images/services/quantam/quantum-security.svg",
+      "title": "Quantum Security"
+    }
+  ],
+  "services": [
+    {
+      "title": "Quantum Algorithm Development",
+      "content": "Design and implement quantum algorithms for optimization, machine learning, cryptography, and simulation challenges."
+    },
+    {
+      "title": "Hybrid Quantum and Classical Solutions",
+      "content": "Develop hybrid solutions that combine the power of quantum computing with classical systems for practical, high-impact results."
+    },
+    {
+      "title": "Quantum Circuit Design and Optimization",
+      "content": "Create efficient, fault-tolerant quantum circuits tailored to your application needs."
+    },
+    {
+      "title": "Quantum Cryptography",
+      "content": "Apply modern quantum cryptography techniques such as quantum key distribution (QKD) to improve data security."
+    },
+    {
+      "title": "Quantum Machine Learning",
+      "content": "Develop advanced quantum machine learning models to extract insights and unlock new dimensions of data analysis."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "aerospace",
+        "title": "Aerospace & Defense",
+        "heading": "Aerospace Innovation",
+        "description": "Enhance military capabilities and aerospace systems through quantum-powered simulations, advanced cybersecurity protocols, and optimized mission planning strategies for next-generation defense solutions.",
+        "image": "/images/services/quantam/retro-fut-space.webp"
+      },
+      {
+        "id": "energy",
+        "title": "Energy & Environment",
+        "heading": "Energy Excellence",
+        "description": "Transform energy infrastructure management with quantum solutions that optimize electrical grid operations, enhance renewable energy systems, and accelerate breakthrough climate research initiatives.",
+        "image": "/images/services/quantam/lb-soil-plant-wind-renewable.webp"
+      },
+      {
+        "id": "telecom",
+        "title": "Telecommunications",
+        "heading": "Telecom Innovation",
+        "description": "Revolutionize telecommunications networks through quantum-enhanced data processing, advanced infrastructure optimization, and cutting-edge security solutions for next-generation communication systems.",
+        "image": "/images/services/quantam/3d-tel.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to harness the power of quantum computing?",
+    "description": "Let's discuss how our advanced quantum computing solutions can transform your business operations. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/r-and-d-solutions.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/r-and-d-solutions.json
new file mode 100644
index 0000000..d92053f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/r-and-d-solutions.json
@@ -0,0 +1,105 @@
+{
+  "title": "R&D Solutions",
+  "heroTitle": "Innovate and Excel with R&D Solutions",
+  "description": "Tech4Biz offers cutting-edge Research and Development (R&D) solutions designed to help businesses innovate, adapt, and thrive. Our team of seasoned experts harnesses the latest technologies and methodologies to develop transformative solutions tailored to your unique challenges.",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/rd.webm",
+  "servicesHeaderTitle": "OUR R&D EXPERTISE",
+  "servicesIntroText": "From strategic consulting to prototype development, we provide comprehensive R&D solutions tailored to your specific business needs.",
+  "statsSection": {
+    "title": "Why R&D solutions matter in today's world",
+    "description": "Our innovative approach combines the latest technologies with industry expertise to deliver solutions that drive business growth and innovation.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "faster time to market thanks to our rapid prototyping solutions"
+      },
+      {
+        "percentage": "70%",
+        "description": "cost reduction thanks to optimized R&D processes"
+      },
+      {
+        "percentage": "75%",
+        "description": "increased efficiency thanks to innovative R&D solutions"
+      },
+      {
+        "percentage": "90%",
+        "description": "success rate in technology implementation projects"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore How R&D Can Transform Your Business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/r-and-d/strategic-rd.svg",
+      "title": "Strategic R&D"
+    },
+    {
+      "icon": "/images/services/r-and-d/rapid-prototyping.svg",
+      "title": "Rapid Prototyping"
+    },
+    {
+      "icon": "/images/services/r-and-d/technology-assessment.svg",
+      "title": "Technology Assessment"
+    },
+    {
+      "icon": "/images/services/r-and-d/innovation-solutions.svg",
+      "title": "Innovation Solutions"
+    }
+  ],
+  "services": [
+    {
+      "title": "Strategic Consulting and R&D",
+      "content": "Work with our experts to define innovation-driven strategies that match your objectives and market needs."
+    },
+    {
+      "title": "Prototype Development",
+      "content": "Quickly transform your ideas into working prototypes, enabling faster validation and iteration."
+    },
+    {
+      "title": "Technology Assessment and Feasibility Studies",
+      "content": "Identify the potential of emerging technologies and assess their compatibility with your business processes."
+    },
+    {
+      "title": "Advanced Technology Solutions",
+      "content": "Use the most advanced technologies, including: AI for automation and optimization, IoT for connected ecosystems, Blockchain for transparency and security, and Quantum Computing for solving complex problems."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "technology",
+        "title": "Technology & Software",
+        "heading": "Technology & Software Development",
+        "description": "We help technology companies develop advanced software solutions through AI, blockchain, and emerging technologies. Our R&D services enable businesses to create innovative products, optimize existing systems, and stay competitive in rapidly evolving markets.",
+        "image": "/images/services/r-and-d/technology-software-development.webp"
+      },
+      {
+        "id": "manufacturing",
+        "title": "Manufacturing",
+        "heading": "Manufacturing & Industrial Engineering",
+        "description": "Our R&D solutions drive manufacturing innovation through process optimization, smart automation, and digital transformation. We help businesses enhance productivity, streamline operations, and implement data-driven solutions for improved efficiency.",
+        "image": "/images/services/r-and-d/manufacturing-industrial-engineering.webp"
+      },
+      {
+        "id": "agriculture",
+        "title": "Agriculture",
+        "heading": "Agricultural Innovation",
+        "description": "Transform agriculture with cutting-edge R&D solutions including precision farming, IoT devices, and AI-powered crop monitoring. We help agricultural businesses optimize yields, enhance sustainability, and modernize their supply chain operations.",
+        "image": "/images/services/r-and-d/agriculture-tech.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to drive innovation through R&D?",
+    "description": "Let's discuss how our advanced R&D solutions can transform your business and create competitive advantages. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/serviceDetailSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/serviceDetailSchema.json
new file mode 100644
index 0000000..4efe2ba
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/serviceDetailSchema.json
@@ -0,0 +1,48 @@
+{
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "serviceType": "{{title}}",
+  "name": "{{title}} - Tech4biz Solutions",
+  "description": "{{description}}",
+  "provider": {
+    "@type": "Organization",
+    "name": "Tech4biz Solutions Private Limited",
+    "url": "https://tech4bizsolutions.com",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+      "width": "180",
+      "height": "36"
+    },
+    "sameAs": [
+      "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+      "https://x.com/Tech4bizContact",
+      "https://www.youtube.com/@Tech4bizz",
+      "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+    ],
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout",
+      "addressLocality": "Bangalore",
+      "addressRegion": "Karnataka",
+      "postalCode": "560102",
+      "addressCountry": "IN"
+    }
+  },
+  "areaServed": "Worldwide",
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "{{title}} Services",
+    "itemListElement": []
+  },
+  "audience": {
+    "@type": "Audience",
+    "audienceType": "Businesses"
+  },
+  "availableChannel": {
+    "@type": "ServiceChannel",
+    "serviceUrl": "https://tech4bizsolutions.com/contact",
+    "servicePhone": "+91 86063 03010",
+    "serviceSmsNumber": "+91 86063 03010"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/social-media-designing-services.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/social-media-designing-services.json
new file mode 100644
index 0000000..bd76b7f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/social-media-designing-services.json
@@ -0,0 +1,110 @@
+{
+  "title": "Social Media Designing Services",
+  "heroTitle": "Engage and Grow with Social Media Design Services ",
+  "description": "Tech4Biz specializes in social media design services that elevate your brand and amplify your online presence. From eye-catching graphics to strategic campaigns, our experts offer customized solutions to help your business thrive across all major social media platforms.",
+  "heroImage": "/images/services/social/woman-holding-instagram-like-icon.webp",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/social.webm",
+  "servicesHeaderTitle": "OUR SOCIAL MEDIA EXPERTISE",
+  "servicesIntroText": "At Tech4Biz, we offer end-to-end solutions that cover every aspect of social media design.",
+  "statsSection": {
+    "title": "Why Social Media Design Matters in Today's World",
+    "description": "Our innovative approach combines creative design with marketing expertise to deliver solutions that drive engagement and business growth.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "Enhanced user engagement through professional social media content design"
+      },
+      {
+        "percentage": "70%",
+        "description": "Improved conversion rates achieved through optimized social campaigns"
+      },
+      {
+        "percentage": "90%",
+        "description": "Increased brand recognition delivered through consistent design work"
+      },
+      {
+        "percentage": "65%",
+        "description": "Expanded follower base generated through strategic visual planning"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore How Social Media Design Can Transform Your Brand",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/social/graphics-design.svg",
+      "title": "Graphics Design"
+    },
+    {
+      "icon": "/images/services/social/campaign-design.svg",
+      "title": "Campaign Design"
+    },
+    {
+      "icon": "/images/services/social/content-strategy.svg",
+      "title": "Content Strategy"
+    },
+    {
+      "icon": "/images/services/social/visual-branding.svg",
+      "title": "Visual Branding"
+    }
+  ],
+  "services": [
+    {
+      "title": "Graphics Design",
+      "content": "Design banner ads, infographics, and custom visuals with eye-catching colors, layouts, and typography to captivate audiences and drive engagement."
+    },
+    {
+      "title": "Web Development for Social Media",
+      "content": "Build and optimize websites tailored for seamless social media integration, ensuring responsive designs for all platforms and devices."
+    },
+    {
+      "title": "SEO for Social Media",
+      "content": "Optimize your profiles and posts for search engines to increase visibility, using keyword research and metadata to rank higher in social search results."
+    },
+    {
+      "title": "Paid Advertising Campaigns",
+      "content": "Create targeted campaigns on Facebook, Instagram, LinkedIn, and Twitter. Track and optimize ads for maximum ROI using advanced analytics."
+    },
+    {
+      "title": "Content Strategy and Management",
+      "content": "Develop a tailored content calendar with regular posting schedules and community interaction strategies to build a loyal follower base."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "ecommerce",
+        "title": "E-commerce",
+        "heading": "E-commerce Excellence",
+        "description": "Drive online sales through engaging social campaigns, product showcases, and strategic content. Our tailored solutions help e-commerce brands stand out and convert.",
+        "image": "/images/services/social/e-commerce-shop-homepage-sale.webp"
+      },
+      {
+        "id": "healthcare",
+        "title": "Healthcare",
+        "heading": "Healthcare Communication",
+        "description": "Build trust and educate patients through professional healthcare content, community engagement, and HIPAA-compliant social media marketing strategies.",
+        "image": "/images/services/social/medical-banner-doctor-face-mask.webp"
+      },
+      {
+        "id": "education",
+        "title": "Education",
+        "heading": "Educational Engagement",
+        "description": "Connect educational institutions with students through engaging content, course promotions, and community building strategies that enhance learning experiences.",
+        "image": "/images/services/social/education-online-learning.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to transform your social media presence?",
+    "description": "Let's discuss how our social media designing services can elevate your brand and engage your audience. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/software-designing-services.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/software-designing-services.json
new file mode 100644
index 0000000..95bf376
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/software-designing-services.json
@@ -0,0 +1,110 @@
+{
+  "title": "Software Designing Services",
+  "heroTitle": "Professional Software Designing Services",
+  "description": "Tech4Biz specializes in delivering top-notch Software Designing Services tailored to meet diverse business needs. From custom software to web applications and mobile apps, our experienced team ensures every solution is optimized for performance, usability, and scalability.",
+  "heroImage": "https://placehold.co/1920x1080",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/software-design.webm",
+  "servicesHeaderTitle": "OUR SOFTWARE DESIGN EXPERTISE",
+  "servicesIntroText": "From user interface design to full-scale application architecture, we provide comprehensive software designing services tailored to your specific needs.",
+  "statsSection": {
+    "title": "Why Software Design Matters in Today's World",
+    "description": "Our innovative approach combines cutting-edge design principles with industry expertise to deliver solutions that improve user experience and drive business growth.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "improved user engagement through optimized software design"
+      },
+      {
+        "percentage": "70%",
+        "description": "reduced training time through intuitive user interfaces"
+      },
+      {
+        "percentage": "90%",
+        "description": "increased user satisfaction with customized solutions"
+      },
+      {
+        "percentage": "75%",
+        "description": "faster time to market with our streamlined design process"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore How Software Design Can Transform Your Business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/software-design/requirements-analysis-software-design-services.svg",
+      "title": "Requirements Analysis"
+    },
+    {
+      "icon": "/images/services/software-design/architectural-design.svg",
+      "title": "Architectural Design"
+    },
+    {
+      "icon": "/images/services/software-design/detailed-design.svg",
+      "title": "Detailed Design"
+    },
+    {
+      "icon": "/images/services/software-design/Implementation.svg",
+      "title": "Implementation"
+    }
+  ],
+  "services": [
+    {
+      "title": "Custom Software Design",
+      "content": "Deliver tailored software solutions that address specific business challenges and requirements. Our custom designs ensure maximum operational efficiency, scalability, and return on investment."
+    },
+    {
+      "title": "Web Application Design",
+      "content": "Create modern, responsive web applications that provide exceptional user experiences across all devices. Our designs combine aesthetic appeal with powerful functionality and performance."
+    },
+    {
+      "title": "Mobile App Design",
+      "content": "Develop engaging mobile applications optimized for iOS, Android, and cross-platform environments. We focus on creating intuitive interfaces that maintain consistency across all platforms."
+    },
+    {
+      "title": "UI/UX Design",
+      "content": "Craft intuitive user interfaces and experiences that enhance user engagement and satisfaction. Our designs prioritize accessibility, visual appeal, and seamless user interactions."
+    },
+    {
+      "title": "Software Integration Services",
+      "content": "Seamlessly integrate new software designs with existing systems and workflows. Our integration solutions optimize operations while ensuring smooth data flow and system compatibility."
+    }
+  ],
+  "industries": {
+    "title": "Our Industry Solutions",
+    "items": [
+      {
+        "id": "telecom",
+        "title": "Telecommunications",
+        "heading": "Telecommunications & Networking",
+        "description": "Telecom companies rely on robust software solutions for network management, service platforms, and data traffic optimization. Our custom software enhances network efficiency, strengthens customer engagement, and ensures top-tier data security across operations.",
+        "image": "/images/services/softwsoftware-designare/telecommunications-networking.webp"
+      },
+      {
+        "id": "insurance",
+        "title": "Insurance",
+        "heading": "Insurance & Risk Management",
+        "description": "Insurance providers depend on sophisticated software-design for policy administration, claims processing, and risk assessment. Our solutions streamline operational workflows, enhance customer experiences, and maintain strict security standards for sensitive data.",
+        "image": "/images/services/software-design/insurance-risk-management.webp"
+      },
+      {
+        "id": "hospitality",
+        "title": "Hospitality",
+        "heading": "Hospitality & Travel",
+        "description": "Hospitality businesses thrive on integrated software for reservations, customer management, and service delivery. Our tailored solutions optimize booking systems, elevate guest experiences, and automate key processes across hotels and travel operations.",
+        "image": "/images/services/software-design/hospitality-travel.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to transform your software experience?",
+    "description": "Let's discuss how our advanced software designing services can enhance your digital presence and user satisfaction. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/software-development.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/software-development.json
new file mode 100644
index 0000000..8453c3e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/software-development.json
@@ -0,0 +1,110 @@
+{
+  "title": "Software Development",
+  "heroTitle": "Innovate with Software Development Solutions",
+  "description": "Tech4Biz specializes in delivering top-tier software development services tailored to meet unique business needs. Our team of skilled developers leverages the latest tools and technologies to create innovative, scalable, and secure solutions that drive growth and efficiency.",
+  "heroImage": "",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/software.webm",
+  "servicesHeaderTitle": "OUR SOFTWARE EXPERTISE",
+  "servicesIntroText": "From custom applications to enterprise solutions, we provide comprehensive software development services tailored to your specific requirements.",
+  "statsSection": {
+    "title": "Why Software Development Matters in Today's World",
+    "description": "Our innovative approach combines the latest technologies with industry expertise to deliver solutions that drive business growth and digital transformation.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "increase operational efficiency with custom software solutions"
+      },
+      {
+        "percentage": "70%",
+        "description": "reduce costs through automated business processes"
+      },
+      {
+        "percentage": "95%",
+        "description": "our largest scale software implementations"
+      },
+      {
+        "percentage": "80%",
+        "description": "faster time to market compared to traditional development"
+      }
+    ],
+    "ctaLink": {
+      "text": "Discover how software development can transform your business",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/software/custom-development.webp",
+      "title": "Custom Development"
+    },
+    {
+      "icon": "/images/services/software/enterprise-solutions.webp",
+      "title": "Business Solutions"
+    },
+    {
+      "icon": "/images/services/software/mobile-apps.webp",
+      "title": "Mobile Applications"
+    },
+    {
+      "icon": "/images/services/software/web-applications.webp",
+      "title": "Web Applications"
+    }
+  ],
+  "services": [
+    {
+      "title": "Security First Approach",
+      "content": "Implement comprehensive security measures including data encryption, secure access controls, regular vulnerability assessments, and compliance with GDPR and ISO standards to protect your business assets."
+    },
+    {
+      "title": "Collaboration Tools",
+      "content": "Enhance team productivity with integrated collaboration solutions featuring real-time communication, file sharing, and project management capabilities that streamline workplace coordination."
+    },
+    {
+      "title": "Data Center Integration",
+      "content": "Deliver seamless data management through integrated data center solutions, offering flexible deployment options including cloud-based and on-premise infrastructure to meet your specific needs."
+    },
+    {
+      "title": "Network Services",
+      "content": "Optimize system connectivity and communication with robust network solutions that ensure reliable, high-performance operations across your entire infrastructure."
+    },
+    {
+      "title": "Industry-Specific Solutions",
+      "content": "Create tailored applications for healthcare, finance, retail, and other sectors, addressing unique industry challenges while ensuring compliance and operational efficiency."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "retail",
+        "title": "Retail & eCommerce",
+        "heading": "Retail & eCommerce Solutions",
+        "description": "In the fast-paced world of retail and e-commerce, we develop innovative software solutions that deliver seamless user experiences and optimize both online and offline operations for improved business efficiency.",
+        "image": "/images/services/software/retail.webp"
+      },
+      {
+        "id": "energy",
+        "title": "Energy & Utilities",
+        "heading": "Energy & Utilities Solutions",
+        "description": "Our solutions address the complex needs of energy and utilities sector with smart grid software, energy monitoring systems, and data analytics platforms that enhance operational efficiency and resource management.",
+        "image": "/images/services/software/energy.webp"
+      },
+      {
+        "id": "education",
+        "title": "Education",
+        "heading": "Educational Technology",
+        "description": "We deliver interoperable and secure software solutions for educational institutions, creating advanced online learning platforms, student management systems, and virtual classrooms that enhance the learning experience.",
+        "image": "/images/services/software/e-learning.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to transform your business with custom software?",
+    "description": "Let's discuss how our advanced software development services can enhance your operations and drive growth. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/vlsi-design.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/vlsi-design.json
new file mode 100644
index 0000000..e1d93b5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/config/vlsi-design.json
@@ -0,0 +1,114 @@
+{
+  "title": "VLSI Design",
+  "heroTitle": "Innovate with VLSI Design Services",
+  "description": "Tech4Biz delivers expert VLSI chip design and IC solutions, from RTL design to tape-out. Our engineering team ensures optimal performance, power efficiency, and silicon optimization for your semiconductor projects.",
+  "heroImage": "https://placehold.co/1920x1080",
+  "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/vlsi.webm",
+  "servicesHeaderTitle": "OUR VLSI EXPERTISE",
+  "servicesIntroText": "From CMOS processing to VHDL/Verilog implementation, we provide comprehensive VLSI design services tailored to your specific requirements.",
+  "statsSection": {
+    "title": "Why VLSI Design Matters in Today's World",
+    "description": "Our innovative approach combines cutting-edge technology with industry expertise to deliver solutions that drive circuit performance and efficiency.",
+    "subtitle": "UNLOCK YOUR POTENTIAL",
+    "stats": [
+      {
+        "percentage": "85%",
+        "description": "reduction in power consumption with optimized chip designs"
+      },
+      {
+        "percentage": "70%",
+        "description": "improvement in circuit efficiency using advanced CMOS tech"
+      },
+      {
+        "percentage": "95%",
+        "description": "success rate in first-time silicon chip implementation"
+      },
+      {
+        "percentage": "80%",
+        "description": "faster product delivery through streamlined development"
+      }
+    ],
+    "ctaLink": {
+      "text": "Explore How VLSI Design Can Transform Your Products",
+      "url": "#insights"
+    }
+  },
+  "approaches": [
+    {
+      "icon": "/images/services/vlsi/cmos-design.svg",
+      "title": "CMOS Design"
+    },
+    {
+      "icon": "/images/services/vlsi/vhdl.svg",
+      "title": "VHDL/Verilog"
+    },
+    {
+      "icon": "/images/services/vlsi/layout-design.svg",
+      "title": "Layout Design"
+    },
+    {
+      "icon": "/images/services/vlsi/circuit.svg",
+      "title": "Circuit Simulation"
+    }
+  ],
+  "services": [
+    {
+      "title": "CMOS Processing",
+      "content": "Expert services in CMOS, Bipolar, BiCMOS, and SiGe technologies, delivering end-to-end solutions from process development to design verification."
+    },
+    {
+      "title": "CMOS Basics Training",
+      "content": "Comprehensive training programs for professionals and beginners. In-depth coverage of CMOS history, theory, design, fabrication, and applications."
+    },
+    {
+      "title": "CMOS Structure Design",
+      "content": "High-quality designs optimized for performance, power, and cost. Rigorous quality control process to ensure superior design standards."
+    },
+    {
+      "title": "Circuit Verification",
+      "content": "Thorough verification services including LVS checks, timing analysis, and power analysis to ensure design reliability."
+    },
+    {
+      "title": "MOS Modeling and VLSI Terminology",
+      "content": "Accurate and reliable models for circuit simulation. Services include layout-versus-schema (LVS) verification, timing analysis, and power analysis."
+    },
+    {
+      "title": "VHDL/Verilog Basics",
+      "content": "Hardware Description Language (HDL) expertise for digital circuit design. Supports circuit design, verification, and simulation with VHDL and Verilog."
+    }
+  ],
+  "industries": {
+    "title": "Industries We Serve",
+    "items": [
+      {
+        "id": "semiconductor",
+        "title": "Semiconductor",
+        "heading": "Semiconductor Innovation",
+        "description": "Delivering comprehensive VLSI design and CMOS processing services for advanced integrated circuits, enabling next-generation microchip development and optimization.",
+        "image": "/images/services/vlsi/semi-conductor.webp"
+      },
+      {
+        "id": "automotive",
+        "title": "Automotive",
+        "heading": "Automotive Excellence",
+        "description": "Providing energy-efficient VLSI designs and advanced CMOS solutions for automotive electronics, from ADAS systems to electric vehicle components.",
+        "image": "/images/services/vlsi/automotibe.webp"
+      },
+      {
+        "id": "telecommunications",
+        "title": "Telecommunications",
+        "heading": "Telecommunications Solutions",
+        "description": "Developing custom VLSI chips and optimized designs for network equipment, ensuring high performance in next-generation communication technologies.",
+        "image": "/images/services/vlsi/tele-communication.webp"
+      }
+    ]
+  },
+  "transformation": {
+    "label": "START YOUR JOURNEY",
+    "title": "Ready to optimize your chip design?",
+    "description": "Let's discuss how our advanced VLSI design services can enhance your product performance and efficiency. Contact us today to schedule a consultation.",
+    "image": "/images/services/threed-animation/get-started.webp",
+    "buttonText": "Get Started Now",
+    "buttonLink": "/contact"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/hooks/useServiceDetails.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/hooks/useServiceDetails.js
new file mode 100644
index 0000000..67b7985
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/hooks/useServiceDetails.js
@@ -0,0 +1,29 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { useEffect, useMemo } from 'react';
+import { serviceDetailsConfig } from '../config';
+import { matchServiceSlug } from '../utils/helpers';
+
+export const useServiceDetails = () => {
+  const { serviceId } = useParams();
+  const navigate = useNavigate();
+
+  const normalizedServiceId = useMemo(() => 
+    matchServiceSlug(serviceId), [serviceId]
+  );
+
+  const serviceDetails = useMemo(() => 
+    serviceDetailsConfig[normalizedServiceId], [normalizedServiceId]
+  );
+
+  useEffect(() => {
+    if (!serviceDetails) {
+      navigate('/services', { replace: true });
+    }
+  }, [serviceDetails, navigate, normalizedServiceId]);
+
+  return {
+    serviceDetails,
+    isLoading: !serviceDetails,
+    serviceId: normalizedServiceId
+  };
+};
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/index.jsx
new file mode 100644
index 0000000..85542ce
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/index.jsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { Navigate, useParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import ServiceErrorBoundary from '@components/common/error/ServiceErrorBoundary';
+import { LoadingFallback } from '@components/common/LoadingFallback';
+import { useServiceDetails } from './hooks/useServiceDetails';
+import { getServiceMetaTags } from './utils/helpers';
+import ScrollToTop from '@components/common/scroll/ScrollToTop';
+import ScrollToTopButton from '@components/common/scroll/ScrollToTopButton';
+import serviceDetailSchemaTemplate from './config/serviceDetailSchema.json';
+
+// Import components directly instead of lazy loading
+import HeroSection from './components/HeroSection';
+import StatsSection from './components/StatsSection';
+import ApproachSection from './components/ApproachSection';
+import ServicesSection from './components/ServicesSection';
+import IndustriesSection from './components/IndustriesSection';
+import TransformationSection from './components/TransformationSection';
+
+const ServiceDetails = () => {
+  const { serviceId } = useParams();
+  const { serviceDetails, isLoading } = useServiceDetails();
+  
+  // Construct the canonical URL based on your sitemap structure
+  const canonicalUrl = `https://tech4bizsolutions.com/services/${serviceId}`;
+  
+  // Create schema with dynamic service details
+  const generateServiceSchema = () => {
+    if (!serviceDetails) return null;
+    
+    // Deep clone the schema template
+    const schema = JSON.parse(JSON.stringify(serviceDetailSchemaTemplate));
+    
+    // Replace placeholders with actual service details
+    schema.serviceType = serviceDetails.title;
+    schema.name = `${serviceDetails.title} - Tech4biz Solutions`;
+    schema.description = serviceDetails.description;
+    
+    // Add service offerings to the catalog
+    if (serviceDetails.services) {
+      schema.hasOfferCatalog.itemListElement = serviceDetails.services.map((service, index) => ({
+        "@type": "Offer",
+        "itemOffered": {
+          "@type": "Service",
+          "name": service.title,
+          "description": service.content
+        }
+      }));
+    }
+    
+    // Add industries served if available
+    if (serviceDetails.industries && serviceDetails.industries.items) {
+      schema.serviceOutput = serviceDetails.industries.items.map(industry => ({
+        "@type": "Thing",
+        "name": industry.title,
+        "description": industry.description
+      }));
+    }
+    
+    return schema;
+  };
+
+  const serviceSchema = generateServiceSchema();
+
+  if (isLoading) {
+    return <LoadingFallback />;
+  }
+
+  if (!serviceDetails) {
+    return <Navigate to="/services" replace />;
+  }
+
+  const metaTags = getServiceMetaTags(serviceDetails);
+
+  return (
+    <ServiceErrorBoundary>
+      <Helmet>
+        <title>{serviceDetails?.title || 'Digital Solutions'} | Tech4Biz</title>
+        
+        {/* Basic meta tags */}
+        <meta name="description" content={serviceDetails?.description} />
+        <meta name="keywords" content={`${serviceDetails.title}, Tech4biz, digital solutions, technology services`} />
+        
+        {/* Open Graph meta tags */}
+        <meta property="og:title" content={`${serviceDetails.title} - Tech4biz Solutions`} />
+        <meta property="og:description" content={serviceDetails.description} />
+        <meta property="og:type" content="website" />
+        
+        {/* Additional meta tags from helper function */}
+        {metaTags.map((tag, index) => (
+          <meta key={index} {...tag} />
+        ))}
+        
+        {/* JSON-LD Schema */}
+        {serviceSchema && (
+          <script type="application/ld+json">
+            {JSON.stringify(serviceSchema)}
+          </script>
+        )}
+
+        <link rel="canonical" href={canonicalUrl} />
+      </Helmet>
+      
+      <ScrollToTop />
+      <ScrollToTopButton />
+
+      <main className="main-content">
+        <HeroSection />
+        <StatsSection />
+        <ApproachSection />
+        <ServicesSection />
+        <IndustriesSection />
+        <TransformationSection />
+      </main>
+    </ServiceErrorBoundary>
+  );
+};
+
+export default ServiceDetails; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/styles/ServiceDetails.module.css b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/styles/ServiceDetails.module.css
new file mode 100644
index 0000000..f4f1940
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/styles/ServiceDetails.module.css
@@ -0,0 +1,638 @@
+/* Hero Section Styles */
+.heroContainer {
+  @apply relative overflow-hidden;
+  @apply bg-black min-h-screen;
+}
+
+.heroOverlay {
+  @apply absolute inset-0 bg-gradient-to-r from-black/70 to-black/50;
+}
+
+.heroContent {
+  @apply relative h-screen flex flex-col justify-center;
+  @apply px-4 sm:px-6 lg:px-8;
+  padding-top: 100px;
+}
+
+.heroNav {
+  @apply absolute top-12 left-4 sm:left-6 lg:left-8;
+  @apply text-white/80 text-sm tracking-wider;
+}
+
+.heroTitle {
+  @apply text-4xl md:text-6xl lg:text-7xl text-white font-light leading-tight mb-12;
+}
+
+.heroDescription {
+  @apply text-xl text-white/80 max-w-[52rem] mb-12;
+}
+
+.playButton {
+  @apply inline-flex items-center gap-3;
+  @apply px-6 py-3 rounded-full;
+  @apply text-white text-sm;
+  @apply border border-white/20;
+  @apply transition-all duration-300;
+  @apply hover:bg-white/10;
+}
+
+.playIcon {
+  @apply w-5 h-5;
+  @apply transition-transform duration-300;
+}
+
+.playButton:hover .playIcon {
+  @apply scale-110;
+}
+
+/* Stats Section Styles */
+.statsContainer {
+  @apply py-24 px-4 sm:px-6 lg:px-8 bg-gray-50;
+}
+
+.statsTitle {
+  @apply text-4xl md:text-5xl font-light mb-6;
+  background: linear-gradient(to right, #1a365d, #2d2d2d);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.statsSubtitle {
+  @apply text-gray-600 max-w-3xl mx-auto leading-relaxed;
+}
+
+.statsGrid {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8;
+}
+
+.statCard {
+  @apply bg-white p-8 rounded-lg shadow-sm;
+}
+
+.statPercentage {
+  @apply text-4xl text-[#2d2d2d] font-light block mb-4;
+}
+
+.statDescription {
+  @apply text-gray-600 text-sm leading-relaxed;
+}
+
+/* Approach Section Styles */
+.approachContainer {
+  @apply bg-gray-900 py-20 px-4 sm:px-6 lg:px-8;
+}
+
+.approachTitle {
+  @apply text-white text-lg font-semibold mb-12;
+}
+
+.approachGrid {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12;
+}
+
+.approachItem {
+  @apply text-center;
+}
+
+.approachIcon {
+  @apply w-16 h-16 transition-all duration-300;
+  filter: invert(1);
+}
+
+.iconWrapper {
+  @apply mb-6 flex justify-center;
+}
+
+.approachIcon:hover {
+  @apply scale-110 transform;
+}
+
+.approachItem {
+  @apply flex flex-col items-center text-center transition-all duration-300;
+}
+
+.approachItem:hover .approachIcon {
+  @apply -translate-y-1;
+}
+
+.approachItemTitle {
+  @apply text-white text-sm mb-2;
+}
+
+.approachDescription {
+  @apply text-white/60 text-xs;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .heroTitle {
+    @apply text-3xl;
+  }
+
+  .heroDescription {
+    @apply text-lg;
+  }
+
+  .statsGrid,
+  .approachGrid {
+    @apply grid-cols-1;
+  }
+}
+
+/* Services Section Styles */
+.servicesContainer {
+  @apply py-24 bg-white;
+}
+
+.servicesHeader {
+  @apply mb-16;
+}
+
+.servicesTitle {
+  @apply text-sm font-medium mb-6 text-[#2d2d2d] tracking-wider;
+}
+
+.servicesIntro {
+  @apply border-l-4 border-blue-600 pl-8;
+}
+
+.servicesIntro h2 {
+  @apply text-3xl md:text-4xl font-light text-gray-900 leading-tight;
+  max-width: 800px;
+}
+
+.servicesList {
+  @apply space-y-4;
+}
+
+.serviceItem {
+  @apply bg-white rounded-lg border border-gray-200;
+  transition: all 0.3s ease;
+}
+
+.serviceItem:hover {
+  @apply border-blue-200 shadow-sm;
+}
+
+.serviceButton {
+  @apply w-full px-6 py-6 flex items-center justify-between text-left;
+  @apply transition-colors duration-200;
+}
+
+.serviceButtonContent {
+  @apply flex items-center gap-6;
+}
+
+.serviceNumber {
+  @apply text-sm text-blue-600 font-medium font-mono;
+}
+
+.serviceTitle {
+  @apply text-lg text-gray-900;
+}
+
+.serviceIcon {
+  @apply text-blue-600;
+}
+
+.serviceContent {
+  @apply overflow-hidden;
+}
+
+.serviceContentInner {
+  @apply px-6 pb-6 text-gray-600 space-y-4;
+}
+
+.learnMoreButton {
+  @apply flex items-center text-blue-600 font-medium text-sm mt-4;
+  @apply transition-all duration-200;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .servicesContainer {
+    @apply py-16;
+  }
+
+  .servicesIntro h2 {
+    @apply text-2xl;
+  }
+
+  .serviceButtonContent {
+    @apply gap-4;
+  }
+
+  .serviceTitle {
+    @apply text-base;
+  }
+}
+
+@media (max-width: 640px) {
+  .servicesContainer {
+    @apply py-12;
+  }
+
+  .serviceButton {
+    @apply px-4 py-4;
+  }
+
+  .serviceContentInner {
+    @apply px-4 pb-4;
+  }
+}
+
+/* Success Section Styles */
+.successContainer {
+  @apply bg-white;
+}
+
+.successHeader {
+  @apply mb-12;
+}
+
+.successHeader h2 {
+  @apply text-3xl md:text-4xl lg:text-5xl font-light mb-8;
+}
+
+.successHeader p {
+  @apply text-gray-600 max-w-4xl leading-relaxed;
+}
+
+.successGrid {
+  @apply grid lg:grid-cols-2 gap-12 mb-20;
+}
+
+.successPlatform {
+  @apply flex flex-col justify-center;
+}
+
+.successPlatform h4 {
+  @apply text-sm font-semibold text-gray-500 mb-4;
+}
+
+.successPlatform p {
+  @apply text-gray-600 mb-8;
+}
+
+.learnMoreButton {
+  @apply flex items-center gap-2 text-black hover:gap-4 transition-all;
+}
+
+.learnMoreButton:hover .arrowIcon {
+  @apply translate-x-2;
+}
+
+.arrowIcon {
+  @apply w-5 h-5 transition-transform;
+}
+
+.successImage {
+  @apply w-full h-full object-cover rounded-lg;
+}
+
+.strengthsSection {
+  @apply bg-black text-white p-12 rounded-lg;
+}
+
+.strengthsSection h3 {
+  @apply text-sm font-semibold mb-8;
+}
+
+.strengthsList {
+  @apply border-l-4 border-blue-600 pl-8;
+}
+
+.strengthsList ul {
+  @apply space-y-4;
+}
+
+/* Industries Section Styles */
+.industriesContainer {
+  @apply bg-black py-32;
+}
+
+.innerContainer {
+  @apply max-w-7xl mx-auto px-6 lg:px-12;
+}
+
+.headerSection {
+  @apply mb-24 relative;
+}
+
+.mainTitle {
+  @apply text-4xl md:text-5xl lg:text-6xl text-white font-light;
+  background: linear-gradient(to right, #fff, rgba(255,255,255,0.7));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.titleAccent {
+  @apply absolute -bottom-8 left-0 w-24 h-1 bg-blue-600;
+}
+
+.navigationContainer {
+  @apply flex flex-wrap gap-8 mb-24;
+}
+
+.navButton {
+  @apply relative py-4 px-2 text-lg font-light transition-all text-gray-400 hover:text-white;
+}
+
+.activeNavButton {
+  @apply text-white;
+}
+
+.activeIndicator {
+  @apply absolute -bottom-2 left-0 right-0 h-0.5 bg-blue-600;
+}
+
+.contentGrid {
+  @apply grid md:grid-cols-2 gap-16 min-h-[500px];
+}
+
+.imageContainer {
+  @apply relative overflow-hidden rounded-lg;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.industryImage {
+  @apply w-full h-full object-cover transition-transform duration-700;
+  transform-origin: center;
+}
+
+.imageContainer:hover .industryImage {
+  @apply scale-105;
+}
+
+.imageOverlay {
+  @apply absolute inset-0 bg-gradient-to-t from-black/30 to-transparent;
+}
+
+.textContent {
+  @apply flex flex-col justify-center;
+}
+
+.industryHeading {
+  @apply text-3xl md:text-4xl lg:text-5xl font-light mb-8 text-white;
+  line-height: 1.2;
+}
+
+.industryDescription {
+  @apply text-gray-400 text-lg leading-relaxed;
+}
+
+.quoteWrapper {
+  @apply relative bg-gradient-to-b from-black to-gray-900 py-32;
+}
+
+.quoteContainer {
+  @apply max-w-7xl mx-auto px-6 lg:px-8;
+}
+
+.quoteSection {
+  @apply relative flex flex-col items-center;
+}
+
+.quoteIconWrapper {
+  @apply absolute -top-6 left-1/2 transform -translate-x-1/2 bg-blue-600 rounded-full p-4;
+}
+
+.quoteIcon {
+  @apply w-8 h-8 text-white;
+}
+
+.quoteContent {
+  @apply bg-white rounded-2xl p-12 md:p-16 shadow-xl;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+}
+
+.quoteText {
+  @apply text-2xl md:text-3xl lg:text-4xl text-gray-900 leading-relaxed mb-12 font-light italic;
+  max-width: 800px;
+}
+
+.authorInfo {
+  @apply flex items-center gap-6 border-t border-gray-100 pt-8;
+}
+
+.authorImageWrapper {
+  @apply flex-shrink-0;
+}
+
+.authorImage {
+  @apply w-16 h-16 rounded-full object-cover border-2 border-blue-600;
+}
+
+.authorDetails {
+  @apply flex flex-col;
+}
+
+.authorName {
+  @apply text-xl font-semibold text-gray-900;
+}
+
+.authorTitle {
+  @apply text-sm text-blue-600 uppercase tracking-wider mt-1;
+}
+
+@media (max-width: 768px) {
+  .quoteWrapper {
+    @apply py-24;
+  }
+  
+  .quoteContent {
+    @apply p-8;
+  }
+  
+  .quoteText {
+    @apply text-xl mb-8 mt-8;
+  }
+  
+  .authorInfo {
+    @apply flex-col items-center text-center;
+  }
+}
+
+.transformationWrapper {
+  @apply bg-[#1C2B33] py-16 relative overflow-hidden;
+}
+
+.transformationContainer {
+  @apply max-w-6xl mx-auto px-6 lg:px-8;
+}
+
+.transformBox {
+  @apply relative rounded-3xl bg-gradient-to-br from-[#1C2B33] to-[#1C2B33] p-2;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+}
+
+.transformContent {
+  @apply flex flex-col md:flex-row items-center gap-12 p-8 md:p-12;
+  background: linear-gradient(to bottom right, rgba(236, 231, 231, 0.03), rgba(223, 213, 213, 0.01));
+  border-radius: inherit;
+}
+
+.imageSection {
+  @apply w-full md:w-1/2;
+}
+
+.imageWrapper {
+  @apply relative rounded-2xl overflow-hidden;
+}
+
+.transformImage {
+  @apply w-full h-full object-cover;
+  filter: contrast(1.1) saturate(1.2);
+}
+
+.glowEffect {
+  @apply absolute -inset-2 bg-blue-500/20 -z-10 rounded-3xl;
+  filter: blur(40px);
+}
+
+.textSection {
+  @apply w-full md:w-1/2 flex flex-col items-start;
+}
+
+.label {
+  @apply text-blue-400 text-sm tracking-wider font-medium mb-4;
+}
+
+.title {
+  @apply text-2xl md:text-3xl text-white font-light mb-4;
+  background: linear-gradient(to right, #fff, rgba(255,255,255,0.7));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.description {
+  @apply text-gray-400 text-sm mb-8 font-light;
+}
+
+.ctaButton {
+  @apply bg-blue-600 text-white px-8 py-4 rounded-xl 
+         transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/20;
+}
+
+@media (max-width: 768px) {
+  .transformContent {
+    @apply text-center;
+  }
+  
+  .textSection {
+    @apply items-center;
+  }
+}
+
+.navigationWrapper {
+  @apply relative overflow-x-auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.navigationContainer {
+  @apply flex flex-wrap md:flex-nowrap gap-4 mb-12;
+  @apply justify-center md:justify-start;
+}
+
+.navButton {
+  @apply relative py-2 px-3 text-base transition-all;
+  @apply text-gray-400 hover:text-white;
+  @apply whitespace-normal text-center md:text-left;
+  @apply min-w-[120px] md:min-w-0;
+}
+
+/* Update mobile styles */
+@media (max-width: 425px) {
+  .navigationContainer {
+    @apply flex-col items-center gap-6;
+    @apply w-full;
+  }
+
+  .navButton {
+    @apply w-full max-w-[280px];
+    @apply py-3 px-4;
+    @apply text-sm;
+    @apply border border-gray-800 rounded-lg;
+  }
+
+  .activeNavButton {
+    @apply border-blue-600;
+  }
+
+  .activeIndicator {
+    @apply hidden;
+  }
+}
+
+.contentGrid {
+  @apply grid gap-8 md:gap-16;
+  @apply grid-cols-1 md:grid-cols-2;
+  @apply min-h-[400px] md:min-h-[500px];
+}
+
+/* Mobile-specific adjustments */
+@media (max-width: 768px) {
+  .industriesContainer {
+    @apply py-16;
+  }
+
+  .innerContainer {
+    @apply px-4;
+  }
+
+  .headerSection {
+    @apply mb-12;
+  }
+
+  .mainTitle {
+    @apply text-3xl;
+  }
+
+  .navigationContainer {
+    @apply mb-12;
+  }
+
+  .navButton {
+    @apply text-sm py-2;
+  }
+
+  .imageContainer {
+    @apply aspect-video;
+    min-height: 200px;
+  }
+
+  .industryHeading {
+    @apply text-2xl mb-4;
+  }
+
+  .industryDescription {
+    @apply text-base;
+  }
+
+  .contentGrid {
+    @apply gap-6;
+  }
+}
+
+/* Small mobile adjustments */
+@media (max-width: 640px) {
+  .industriesContainer {
+    @apply py-12;
+  }
+
+  .mainTitle {
+    @apply text-2xl;
+  }
+
+  .navigationContainer {
+    @apply gap-4;
+  }
+
+  .navButton {
+    @apply text-xs py-2 px-0;
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/utils/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/utils/animations.js
new file mode 100644
index 0000000..3451d7a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/utils/animations.js
@@ -0,0 +1,87 @@
+export const fadeInUp = {
+  initial: {
+    opacity: 0,
+    y: 20
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.8,
+      ease: [0.25, 0.1, 0.25, 1]
+    }
+  }
+};
+
+export const staggerContainer = {
+  initial: {},
+  animate: {
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.3
+    }
+  }
+};
+
+export const heroAnimation = {
+  initial: {
+    opacity: 0,
+    scale: 1.1
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    transition: {
+      duration: 1.2,
+      ease: "easeOut"
+    }
+  }
+};
+
+export const statsAnimation = {
+  container: {
+    initial: { opacity: 0 },
+    whileInView: { 
+      opacity: 1,
+      transition: {
+        duration: 0.8,
+        staggerChildren: 0.2
+      }
+    },
+    viewport: { once: true }
+  },
+  item: {
+    initial: { opacity: 0, y: 20 },
+    whileInView: { 
+      opacity: 1, 
+      y: 0,
+      transition: {
+        duration: 0.5
+      }
+    }
+  }
+};
+
+export const approachAnimation = {
+  container: {
+    initial: { opacity: 0 },
+    whileInView: { 
+      opacity: 1,
+      transition: {
+        duration: 0.8
+      }
+    },
+    viewport: { once: true }
+  },
+  icon: {
+    initial: { scale: 0 },
+    whileInView: { 
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 260,
+        damping: 20
+      }
+    }
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/utils/helpers.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/utils/helpers.js
new file mode 100644
index 0000000..5aec2f8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/DigitalSolutionsDetailPage/utils/helpers.js
@@ -0,0 +1,88 @@
+// Format percentage for stats display
+export const formatPercentage = (value) => {
+  if (typeof value === 'string' && value.includes('%')) {
+    return value;
+  }
+  return `${value}%`;
+};
+
+// Generate service URL slug
+export const generateServiceSlug = (title) => {
+  return title
+    .toLowerCase()
+    .replace(/&/g, 'and')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '');
+};
+
+// Parse service ID from URL
+export const parseServiceId = (serviceId) => {
+  return serviceId.replace(/-/g, ' ');
+};
+
+// Check if service exists in config
+export const isValidService = (serviceId, config) => {
+  return Object.keys(config).includes(serviceId);
+};
+
+// Get meta tags for service
+export const getServiceMetaTags = (serviceDetails) => {
+  return [
+    { name: 'description', content: serviceDetails.description },
+    { property: 'og:title', content: serviceDetails.title },
+    { property: 'og:description', content: serviceDetails.description },
+    // Add more meta tags as needed
+  ];
+};
+
+// Format video URL for different browsers
+export const getVideoUrl = (url) => {
+  if (!url) return null;
+  
+  // Handle different video formats
+  const formats = {
+    webm: `${url.split('.')[0]}.webm`,
+    mp4: url,
+    ogg: `${url.split('.')[0]}.ogv`
+  };
+
+  return formats;
+};
+
+// Calculate reading time for service content
+export const calculateReadingTime = (content) => {
+  const wordsPerMinute = 200;
+  const words = content.trim().split(/\s+/).length;
+  const minutes = Math.ceil(words / wordsPerMinute);
+  return `${minutes} min read`;
+};
+
+// Match incoming URL slug with configured service paths
+export const matchServiceSlug = (slug) => {
+  if (!slug) return null;
+  
+  // Normalize the incoming slug
+  const normalizedSlug = slug
+    .toLowerCase()
+    .replace(/&/g, 'and')
+    .replace(/[^a-z0-9-]/g, '');
+
+  return normalizedSlug;
+};
+
+// Generate service path from title
+export const getServicePath = (title) => {
+  // Special case for R&D Solutions
+  if (title === 'R&D Solutions') {
+    return '/services/r-and-d-solutions';
+  }
+
+  // General case for other services
+  const slug = title
+    .toLowerCase()
+    .replace(/&/g, 'and')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '');
+
+  return `/services/${slug}`;
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/Index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/Index.jsx
new file mode 100644
index 0000000..1f1ed80
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/Index.jsx
@@ -0,0 +1,18 @@
+import NavBar from "./components/NavBar"
+import HeroSection from "./components/HeroSection"
+import ContentSection from "./components/ContentSection"
+import ScrollToTop from "@components/common/scroll/ScrollToTop"
+
+function GenAI() {
+  return (
+    <main className="min-h-screen bg-[#1b1b1b] text-light-primaryText overflow-x-hidden" style={{ marginTop: "-1px" }}>
+      <NavBar />
+      <HeroSection />
+      <ContentSection />
+      <ScrollToTop/>
+    </main>
+  )
+}
+
+export default GenAI
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CardSlider.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CardSlider.jsx
new file mode 100644
index 0000000..938e04f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CardSlider.jsx
@@ -0,0 +1,177 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { motion } from "framer-motion"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import styles from './CardSlider.module.css'
+
+function CardSlider() {
+  const sliderRef = useRef(null)
+  const [canScrollLeft, setCanScrollLeft] = useState(false)
+  const [canScrollRight, setCanScrollRight] = useState(true)
+
+  const cards = [
+    {
+      category: "ANNOUNCEMENT",
+      title: "Accenture Invests in Cresta to Enhance Contact Centers with Generative AI",
+      image: "/images/casestudies/voice-recognition-ai.webp",
+      link: "#",
+    },
+    {
+      category: "RESEARCH REPORT",
+      title: "Reinvention in the age of generative AI",
+      image: "/images/casestudies/defending-against-cyber-threats.webp",
+      link: "#",
+    },
+    {
+      category: "RESEARCH REPORT",
+      title: "Reinventing with a digital core: How to accelerate growth through change",
+      image: "/images/casestudies/Improving-financial-security.webp",
+      link: "#",
+    },
+    {
+      category: "RESEARCH REPORT",
+      title: "Change reinvented: A new blueprint for continuous, meaningful, successful change",
+      image: "/images/casestudies/dynamic-pricing-and-analytics.webp",
+      link: "#",
+    },
+    {
+      category: "RESEARCH REPORT",
+      title: "The future of AI is open",
+      image: "/images/casestudies/smart-mall-revolution.webp",
+      link: "#",
+    },
+  ]
+
+  const checkScrollButtons = () => {
+    if (sliderRef.current) {
+      const { scrollLeft, scrollWidth, clientWidth } = sliderRef.current
+      setCanScrollLeft(scrollLeft > 0)
+      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10)
+    }
+  }
+
+  useEffect(() => {
+    const slider = sliderRef.current
+    if (slider) {
+      slider.addEventListener("scroll", checkScrollButtons)
+      // Initial check
+      checkScrollButtons()
+
+      return () => {
+        slider.removeEventListener("scroll", checkScrollButtons)
+      }
+    }
+  }, [])
+
+  const scroll = (direction) => {
+    if (sliderRef.current) {
+      const { clientWidth } = sliderRef.current
+      const scrollAmount = direction === "left" ? -clientWidth / 2 : clientWidth / 2
+
+      sliderRef.current.scrollBy({
+        left: scrollAmount,
+        behavior: "smooth",
+      })
+
+      // Check scroll buttons after animation completes
+      setTimeout(checkScrollButtons, 500)
+    }
+  }
+
+  return (
+    <section className="py-20" id="Related-Content">
+      <div className="container mx-auto px-4 md:px-6">
+        <motion.h2
+          className="text-2xl md:text-3xl font-bold mb-10"
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.5 }}
+        >
+          Related content
+        </motion.h2>
+
+        <div className="relative">
+          <div 
+            ref={sliderRef} 
+            className="flex overflow-x-auto gap-6 hide-scrollbar scrollbar-hide mb-4"
+            style={{
+              scrollbarWidth: 'none',
+              'msOverflowStyle': 'none',
+              '&::WebkitScrollbar': {
+                display: 'none'
+              }
+            }}
+          >
+            {cards.map((card, index) => (
+              <a
+                href={card.link}
+                key={index}
+                className={`${styles.card} flex-none w-full sm:w-[calc(50%-12px)] md:w-[calc(33.333%-16px)] lg:w-[calc(25%-18px)]`}
+                style={{
+                  height: '500px'
+                }}
+              >
+                <img
+                  src={card.image}
+                  alt={card.title}
+                  className={styles.cardImage}
+                />
+                
+                <div className={styles.cardContent}>
+                  <div>
+                    <span className={`${styles.subtitle} text-xs font-semibold tracking-wider mb-3 block`}>
+                      {card.category}
+                    </span>
+                    <h3 className={styles.title}>
+                      {card.title}
+                    </h3>
+                  </div>
+                  <div className={styles.buttonWrapper}>
+                    <div className={styles.button}>
+                      Expand
+                      <span className={styles.buttonArrow}>
+                        <ChevronRight className="w-4 h-4" />
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </a>
+            ))}
+          </div>
+
+          {/* Navigation buttons */}
+          <div className="flex justify-end gap-2 mt-4">
+            <button
+              onClick={() => scroll("left")}
+              className={`rounded-full p-2 text-white backdrop-blur-sm
+                        transition-all duration-300 ${
+                !canScrollLeft ? "opacity-30 cursor-not-allowed" : "opacity-100 hover:bg-white/10"
+              }`}
+              disabled={!canScrollLeft}
+              aria-label="Scroll left"
+            >
+              <ChevronLeft className="w-6 h-6" />
+            </button>
+
+            <button
+              onClick={() => scroll("right")}
+              className={`rounded-full p-2 text-white backdrop-blur-sm
+                        transition-all duration-300 ${
+                !canScrollRight ? "opacity-30 cursor-not-allowed" : "opacity-100 hover:bg-white/10"
+              }`}
+              disabled={!canScrollRight}
+              aria-label="Scroll right"
+            >
+              <ChevronRight className="w-6 h-6" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default CardSlider
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CardSlider.module.css b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CardSlider.module.css
new file mode 100644
index 0000000..3e9413b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CardSlider.module.css
@@ -0,0 +1,140 @@
+.card {
+  @apply relative overflow-hidden cursor-pointer;
+  background: transparent;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
+              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.cardImage {
+  @apply absolute inset-0 w-full h-full object-cover;
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+              filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  backface-visibility: hidden;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+}
+
+.card:hover .cardImage {
+  transform: scale(5);
+  filter: blur(3px);
+}
+
+.card:hover .description {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.card:hover .button {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.card:hover .title,
+.card:hover .subtitle {
+  transform: translateX(-10px);
+}
+
+.cardContent {
+  @apply relative z-10 h-full p-6 flex flex-col;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.7) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
+  backface-visibility: hidden;
+}
+
+.buttonWrapper {
+  @apply mt-auto flex justify-end w-full;
+}
+
+.title {
+  @apply text-white text-base font-bold mb-2;
+  font-family: "Poppins", sans-serif !important;
+  transform: translateX(0);
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.subtitle {
+  @apply text-gray-200 text-base mb-4;
+  transform: translateX(0);
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.description {
+  @apply text-white/90 mb-4 mt-auto;
+  opacity: 0;
+  transform: translateX(100%);
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 0.1s;
+}
+
+.button {
+  @apply inline-flex items-center px-6 py-2 text-white font-medium;
+  opacity: 0;
+  transform: translateX(-100%);
+  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+              opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+              background-color 0.3s ease;
+  transition-delay: 0.2s;
+  border-radius: 4px;
+  text-transform: capitalize;
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.button:hover {
+  transform: scale(1.05);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.buttonArrow {
+  @apply ml-2 w-4 h-4;
+  transition: transform 0.3s ease;
+}
+
+.button:hover .buttonArrow {
+  transform: translateX(3px);
+}
+
+@media (max-width: 639px) {
+  .card {
+    flex: 0 0 calc(100% - 40px);
+    width: calc(100% - 40px);
+    margin: 0;
+    scroll-snap-align: center;
+  }
+
+  .touched {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+  }
+
+  .touched .cardImage {
+    transform: scale(5);
+    filter: blur(3px);
+  }
+
+  .touched .description {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  .touched .button {
+    opacity: 1;
+    transform: scale(1.05) translateX(0);
+  }
+
+  .touched .title,
+  .touched .subtitle {
+    transform: translateX(-10px);
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CollapsibleSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CollapsibleSection.jsx
new file mode 100644
index 0000000..e32e424
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/CollapsibleSection.jsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { useState } from "react"
+import { motion, AnimatePresence } from "framer-motion"
+import { Plus } from "lucide-react"
+
+function CollapsibleSection({ title, children, defaultOpen = false }) {
+  const [isOpen, setIsOpen] = useState(defaultOpen)
+
+  return (
+    <div className="w-full mb-12">
+      {/* Accent line at top */}
+      <div className="w-full h-px bg-gray-700"></div>
+
+      <div className="py-6">
+        <div className="flex justify-between items-center cursor-pointer" onClick={() => setIsOpen(!isOpen)}>
+          <h3 className="text-xl md:text-2xl font-bold text-gray-200">{title}</h3>
+          <motion.button 
+            className="text-gray-200 focus:outline-none" 
+            aria-label={isOpen ? "Close section" : "Open section"}
+            animate={{ rotate: isOpen ? 45 : 0 }}
+            transition={{ duration: 0.2 }}
+          >
+            <Plus className="w-5 h-5" />
+          </motion.button>
+        </div>
+
+        <AnimatePresence>
+          {isOpen && (
+            <motion.div
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+              exit={{ height: 0, opacity: 0 }}
+              transition={{ duration: 0.3 }}
+              className="overflow-hidden"
+            >
+              <div className="mt-6 text-base md:text-lg text-gray-200">{children}</div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+
+      {/* Accent line at bottom */}
+      <div className="w-full h-px bg-gray-700"></div>
+    </div>
+  )
+}
+
+export default CollapsibleSection
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/ContentSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/ContentSection.jsx
new file mode 100644
index 0000000..7e40ad2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/ContentSection.jsx
@@ -0,0 +1,102 @@
+import CollapsibleSection from "./CollapsibleSection"
+import GenAiEmpowermentSection from "./GenAiEmpowermentSection"
+import FeaturesGrid from "./FeaturesGrid"
+import CardSlider from "./CardSlider"
+
+function ContentSection() {
+  return (
+    <div>
+      <div className="container mx-auto px-4 md:px-6 py-16">
+        <section id="what-is-ai" className="mb-10">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8">What you need to know</h2>
+          <div className="space-y-4 max-w-4xl">
+            <p className="text-base md:text-lg text-gray-200">
+              As artificial intelligence (AI) continues to capture the attention of the world, new forms have burst onto
+              the scene, creating an ongoing game of catchup for organizations everywhere. One of the most significant
+              and disruptive forms of AI is generative AI. Feed gen AI a simple—or complex—prompt, and its ability to
+              mimic human cognitive processes delivers on-the-spot responses that can be carefully refined by further
+              input.
+            </p>
+            <p className="text-base md:text-lg text-gray-200">
+              Generative AI models such as ChatGPT and DALL-E exemplify this capability, showcasing the versatility and
+              ingenuity of generative AI. As generative AI continuously refines its output over time, it becomes
+              increasingly precise and creative.
+            </p>
+          </div>
+        </section>
+
+        <CollapsibleSection title="What is the difference between AI and generative AI?">
+          <p className="text-base md:text-lg text-gray-200">
+            Artificial intelligence (AI) encompasses various technologies that enable machines to perform tasks
+            typically requiring human intelligence, such as sensing, comprehending, acting and learning. Generative AI
+            is a subset of AI that focuses on creating original content, including text, images, audio and synthetic
+            data, rather than simply analyzing or classifying existing information.
+          </p>
+        </CollapsibleSection>
+
+        <section id="opportunity" className="mb-10">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8">The opportunity</h2>
+          <div className="space-y-4 max-w-4xl">
+            <p className="text-base md:text-lg text-gray-200">
+              Generative AI presents unprecedented opportunities for businesses and individuals alike. From automating
+              content creation to enhancing creative processes, the technology enables new levels of productivity and
+              innovation.
+            </p>
+            <p className="text-base md:text-lg text-gray-200">
+              Organizations can leverage generative AI to streamline workflows, generate insights from vast amounts of
+              data, and create personalized experiences for customers. The technology's ability to learn and adapt makes
+              it a powerful tool for solving complex problems and discovering new possibilities.
+            </p>
+          </div>
+        </section>
+
+        <CollapsibleSection title="How can businesses leverage generative AI?">
+          <p className="text-base md:text-lg text-gray-200">
+            Businesses can leverage generative AI in numerous ways, including content creation, product design, customer
+            service automation, and data analysis. The technology can help organizations reduce costs, increase
+            efficiency, and create more personalized experiences for customers. By automating routine tasks, generative
+            AI frees up human resources for more creative and strategic work.
+          </p>
+        </CollapsibleSection>
+
+        <section id="challenge" className="mb-10">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8">The challenge</h2>
+          <div className="space-y-4 max-w-4xl">
+            <p className="text-base md:text-lg text-gray-200">
+              Despite its potential, generative AI comes with significant challenges. Ethical considerations, data
+              privacy concerns, and the risk of generating misleading or biased content are important factors to
+              address.
+            </p>
+            <p className="text-base md:text-lg text-gray-200">
+              Organizations must develop robust frameworks for responsible AI use, ensuring transparency, fairness, and
+              accountability. Additionally, the rapid evolution of generative AI requires continuous learning and
+              adaptation to stay current with best practices and emerging capabilities.
+            </p>
+          </div>
+        </section>
+
+        <CollapsibleSection title="What are the ethical considerations of generative AI?">
+          <p className="text-base md:text-lg text-gray-200">
+            Ethical considerations of generative AI include issues of bias, misinformation, intellectual property
+            rights, and privacy. AI systems can inadvertently perpetuate or amplify biases present in their training
+            data. They can also be used to create convincing but false information, raising concerns about authenticity
+            and trust. Additionally, questions about ownership and attribution arise when AI generates content based on
+            existing works.
+          </p>
+        </CollapsibleSection>
+      </div>
+
+      {/* Features Grid Section with white background */}
+      <FeaturesGrid />
+
+      {/* GenAI Empowerment Section */}
+      <GenAiEmpowermentSection />
+
+      {/* Card Slider for Related Content */}
+      <CardSlider />
+    </div>
+  )
+}
+
+export default ContentSection
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/FeaturesGrid.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/FeaturesGrid.jsx
new file mode 100644
index 0000000..9418e0f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/FeaturesGrid.jsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { 
+  LineChart, ShieldCheck, Brain, Zap, 
+  TrendingUp, UserCheck
+} from "lucide-react"
+
+function FeaturesGrid() {
+  const features = [
+    {
+      icon: <LineChart className="w-10 h-10 text-gray-700" />,
+      title: "Predictive Analytics",
+      description:
+        "Advanced AI algorithms that analyze historical data to predict future market trends and identify potential risks before they occur.",
+    },
+    {
+      icon: <ShieldCheck className="w-10 h-10 text-gray-700" />,
+      title: "Fraud Detection",
+      description: 
+        "Real-time monitoring systems that detect unusual patterns and flag potential fraudulent activities to protect your financial assets.",
+    },
+    {
+      icon: <Brain className="w-10 h-10 text-gray-700" />,
+      title: "AI Risk Assessment",
+      description:
+        "Intelligent risk assessment models that evaluate credit applications and investment opportunities with unprecedented accuracy.",
+    },
+    {
+      icon: <TrendingUp className="w-10 h-10 text-gray-700" />,
+      title: "Market Intelligence",
+      description:
+        "Real-time market data analysis that provides actionable insights to help make informed financial decisions.",
+    },
+    {
+      icon: <Zap className="w-10 h-10 text-gray-700" />,
+      title: "Instant Processing",
+      description:
+        "Lightning-fast data processing capabilities that analyze millions of transactions in seconds for immediate decision-making.",
+    },
+    {
+      icon: <UserCheck className="w-10 h-10 text-gray-700" />,
+      title: "Compliance Automation",
+      description:
+        "Streamlined compliance processes that automatically ensure adherence to regulatory requirements and industry standards.",
+    },
+  ]
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.1,
+      },
+    },
+  }
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6 } },
+  }
+
+  return (
+    <section className="py-24 bg-gray-50 text-black">
+      <div className="container mx-auto px-4 md:px-6">
+        <div className="mb-16 text-center">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4">Empowering Financial Decisions</h2>
+          <p className="text-gray-600 max-w-3xl mx-auto">Our advanced analytics platform provides the tools you need to make data-driven decisions with confidence</p>
+        </div>
+
+        <motion.div
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.1 }}
+        >
+          {features.map((feature, index) => (
+            <motion.div
+              key={index}
+              className="group relative bg-white rounded-lg p-8 shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1"
+              variants={itemVariants}
+            >
+              <div className="absolute top-0 left-0 w-2 h-0 bg-gray-700 group-hover:h-full transition-all duration-300 rounded-tl-lg rounded-bl-lg"></div>
+              <div className="flex items-center mb-5">
+                <div className="mr-4 p-3 rounded-lg bg-gray-100 group-hover:bg-gray-200 transition-colors duration-300">
+                  {feature.icon}
+                </div>
+                <h3 className="text-xl font-semibold">{feature.title}</h3>
+              </div>
+              <p className="text-gray-600">{feature.description}</p>
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  )
+}
+
+export default FeaturesGrid
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/GenAiEmpowermentSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/GenAiEmpowermentSection.jsx
new file mode 100644
index 0000000..47d9188
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/GenAiEmpowermentSection.jsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { FileText, Zap, Brain, Database } from "lucide-react"
+import CollapsibleSection from "./CollapsibleSection"
+
+function GenAiEmpowermentSection() {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        when: "beforeChildren",
+        staggerChildren: 0.2,
+      },
+    },
+  }
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 },
+  }
+
+  return (
+    <section className="py-8">
+      <div className="container mx-auto px-4 md:px-6">
+        <section id="empower-organizations" className="mb-20">
+          <h2 className="text-3xl md:text-4xl font-bold mb-8">How does generative AI empower organizations?</h2>
+          <div className="space-y-4 max-w-4xl">
+            <p className="text-base md:text-lg text-gray-200">
+              Generative AI presents a huge opportunity to accelerate reinvention, offering the potential to reshape every facet of an organization. Our recent research indicates that technology is the top lever for reinvention for 98% of organizations, with generative AI now seen as one of the main levers for 82% of those organizations. This underscores the growing recognition of its transformative potential among businesses across various industries.
+            </p>
+            <p className="text-base md:text-lg text-gray-200">
+              For example, turning enterprise data into knowledge entails sharing deep subject matter expertise between many people and sources. This process takes a considerable amount of time—days, weeks or even months. But thanks to the power of gen AI, we're now able to shorten that timeframe, going from data to knowledge to real-time insights in just minutes.
+            </p>
+            <p className="text-base md:text-lg text-gray-200">
+              That's what we're doing with BMW North America, using our gen AI platform EKHO (Enterprise Knowledge Harmonizer and Orchestrator) to collect and analyze its enterprise data. The platform uses large language models to intelligently answer questions about enterprise data, enabling deeper insights and more informed decision-making.
+            </p>
+          </div>
+          
+          <motion.div 
+            className="mt-10 p-6 bg-blue-700 rounded-lg"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <div className="flex flex-col md:flex-row items-center justify-between">
+              <div className="md:w-1/2 mb-6 md:mb-0">
+                <h3 className="text-white text-sm uppercase tracking-wider mb-2">DATA</h3>
+                <div className="text-5xl md:text-6xl font-bold text-white mb-2">82%</div>
+                <p className="text-gray-200">
+                  of organizations see generative AI as a main technology lever for reinvention
+                </p>
+              </div>
+              <div className="md:w-1/2 md:pl-8">
+                <div className="h-2 w-full bg-gray-600 rounded-full overflow-hidden mb-2">
+                  <div className="h-full bg-white rounded-full" style={{ width: "82%" }}></div>
+                </div>
+                <div className="flex justify-between text-sm text-gray-300">
+                  <span>0%</span>
+                  <span>50%</span>
+                  <span>100%</span>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </section>
+        
+        <CollapsibleSection title="How can businesses leverage generative AI?">
+          <p className="text-base md:text-lg text-gray-200">
+            Businesses can leverage generative AI in numerous ways, including content creation, product design, customer service automation, and data analysis. The technology can help organizations reduce costs, increase efficiency, and create more personalized experiences for customers. By automating routine tasks, generative AI frees up human resources for more creative and strategic work.
+          </p>
+        </CollapsibleSection>
+        
+        <CollapsibleSection title="What are the ethical considerations of generative AI?">
+          <p className="text-base md:text-lg text-gray-200">
+            Ethical considerations of generative AI include issues of bias, misinformation, intellectual property rights, and privacy. AI systems can inadvertently perpetuate or amplify biases present in their training data. They can also be used to create convincing but false information, raising concerns about authenticity and trust. Additionally, questions about ownership and attribution arise when AI generates content based on existing works.
+          </p>
+        </CollapsibleSection>
+        
+        <CollapsibleSection title="What is the difference between AI and generative AI?">
+          <p className="text-base md:text-lg text-gray-200">
+            Artificial intelligence (AI) encompasses various technologies that enable machines to perform tasks typically requiring human intelligence, such as sensing, comprehending, acting and learning. Generative AI is a subset of AI that focuses on creating original content, including text, images, audio and synthetic data, rather than simply analyzing or classifying existing information.
+          </p>
+        </CollapsibleSection>
+      </div>
+    </section>
+  )
+}
+
+export default GenAiEmpowermentSection
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/HeroSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/HeroSection.jsx
new file mode 100644
index 0000000..c4d54e4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/HeroSection.jsx
@@ -0,0 +1,102 @@
+"use client"
+
+import { motion } from "framer-motion"
+
+function HeroSection() {
+  return (
+    <section className="relative w-full min-h-screen flex items-center justify-center overflow-hidden">
+      {/* Background Image with Overlay */}
+      <div className="absolute inset-0 z-0">
+        <img
+          src="/images/banners/GenAI-Page.webp"
+          alt="Generative AI Background"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-black/80 via-black/70 to-gray-900/50 backdrop-blur-sm"></div>
+      </div>
+
+
+      {/* Content */}
+      <div className="container mx-auto px-4 md:px-6 z-20 text-center">
+        <motion.div
+          className="max-w-4xl mx-auto"
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <motion.div
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            transition={{ duration: 1, delay: 0.2 }}
+            className="mb-6 inline-block"
+          >
+            <span className="px-4 py-1 rounded-full bg-gray-600/30 text-gray-200 text-sm font-medium border border-gray-500/30 backdrop-blur-md">
+              NEXT GENERATION TECHNOLOGY
+            </span>
+          </motion.div>
+
+          <motion.h1
+            className="text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-white via-gray-200 to-gray-400"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            The Future of Generative AI
+          </motion.h1>
+
+          <motion.p
+            className="text-xl md:text-xl text-gray-300 mb-10 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.6 }}
+          >
+            Discover how generative AI is revolutionizing industries by creating content, solving complex problems, and
+            unlocking new possibilities for innovation.
+          </motion.p>
+        </motion.div>
+      </div>
+
+      {/* Animated Bottom Wave */}
+      <div className="absolute bottom-0 left-0 right-0 h-24 z-10 overflow-hidden">
+        <motion.div
+          className="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 opacity-30"
+          initial={{ y: 24 }}
+          animate={{
+            y: [24, 20, 24],
+          }}
+          transition={{
+            duration: 5,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "easeInOut",
+          }}
+          style={{
+            borderTopLeftRadius: "50%",
+            borderTopRightRadius: "50%",
+            transform: "scaleX(1.5)",
+          }}
+        />
+        <motion.div
+          className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 opacity-20"
+          initial={{ y: 16 }}
+          animate={{
+            y: [16, 10, 16],
+          }}
+          transition={{
+            duration: 6,
+            repeat: Number.POSITIVE_INFINITY,
+            ease: "easeInOut",
+            delay: 0.5,
+          }}
+          style={{
+            borderTopLeftRadius: "40%",
+            borderTopRightRadius: "40%",
+            transform: "scaleX(1.7)",
+          }}
+        />
+      </div>
+    </section>
+  )
+}
+
+export default HeroSection
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/NavBar.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/NavBar.jsx
new file mode 100644
index 0000000..5016e2c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/GenAiDetailPage/components/NavBar.jsx
@@ -0,0 +1,86 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { motion, useScroll, useMotionValueEvent } from "framer-motion"
+
+function NavBar() {
+  const [isSticky, setIsSticky] = useState(false)
+  const { scrollY } = useScroll()
+
+  // Enhanced scroll handling
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    if (latest > 100) {
+      setIsSticky(true)
+    } else {
+      setIsSticky(false)
+    }
+  })
+
+  // Smooth scroll handler
+  const handleSmoothScroll = (e, targetId) => {
+    e.preventDefault()
+    const element = document.getElementById(targetId)
+    if (element) {
+      const offset = isSticky ? 100 : 0 // Account for sticky nav height
+      const elementPosition = element.getBoundingClientRect().top + window.pageYOffset
+      window.scrollTo({
+        top: elementPosition - offset,
+        behavior: "smooth"
+      })
+    }
+  }
+
+  // Backup scroll handler using standard event listener
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setIsSticky(true)
+      } else {
+        setIsSticky(false)
+      }
+    }
+
+    window.addEventListener("scroll", handleScroll)
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [])
+
+  const navItems = [
+    { title: "What is Gen AI?", href: "what-is-ai" },
+    { title: "The Opportunity", href: "opportunity" },
+    { title: "The Challenge", href: "challenge" },
+    { title: "Related Content", href: "Related-Content" }
+  ]
+
+  return (
+    <motion.nav
+      className={`w-full bg-gray-200 py-4 z-30 transition-all duration-300 ${
+        isSticky ? "fixed top-16 left-0 right-0 shadow-lg" : "relative"
+      }`}
+      style={{ marginTop: 0 }}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.5 }}
+    >
+      <div className="container mx-auto px-4 md:px-6 flex justify-end">
+        <ul className="flex flex-wrap space-x-2 md:space-x-8">
+          {navItems.map((item, index) => (
+            <li key={index}>
+              <a
+                href={`#${item.href}`}
+                onClick={(e) => handleSmoothScroll(e, item.href)}
+                className="text-gray-900 hover:underline text-sm md:text-base font-medium transition-colors"
+              >
+                {item.title}
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </motion.nav>
+  )
+}
+
+export default NavBar
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/config/pressRelease.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/config/pressRelease.json
new file mode 100644
index 0000000..dd62569
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/config/pressRelease.json
@@ -0,0 +1,186 @@
+{
+  "metadata": {
+    "title": "Spurrin Innovation and Tech4Biz Solutions Unite to Revolutionize AI-Driven Healthcare in India and the Middle East",
+    "date": "2025-01-08",
+    "readTime": "5 min. read",
+    "location": "Bangalore, Karnataka",
+    "releaseDate": "January 08, 2025"
+  },
+  "navigation": {
+    "newsroom": {
+      "text": "HOME",
+      "path": "/"
+    },
+    "currentPage": "PRESS RELEASE"
+  },
+  "highlights": [
+    {
+      "id": 1,
+      "text": "Spurrin Innovation and Tech4Biz Solutions collaborate to deliver AI-driven healthcare innovations in India and the Middle East."
+    },
+    {
+      "id": 2,
+      "text": "The partnership aims to enhance diagnostics, personalized medicine, and operational efficiency in the healthcare sector."
+    }
+  ],
+  "content": {
+    "introduction": {
+      "companyInfo": "Spurrin Innovation, a pioneer in artificial intelligence (AI) solutions for the healthcare sector, and Tech4Biz Solutions, a trusted leader in scalable technology solutions, have announced a strategic partnership to deliver groundbreaking AI-driven healthcare innovations in India and the Middle East. This collaboration is set to redefine healthcare delivery by addressing critical gaps in diagnostics, personalized medicine, and operational efficiency, making healthcare more accessible, effective, and sustainable."
+    },
+    "mainBody": [
+      {
+        "id": 1,
+        "text": "This alliance seeks to reshape healthcare delivery by addressing critical gaps in diagnostics, personalized medicine, and operational efficiency, making healthcare more accessible, effective, and sustainable."
+      },
+      {
+        "id": 2,
+        "text": "This strategic partnership aims to revolutionize healthcare delivery by leveraging cutting-edge AI technologies to optimize operations, enhance decision-making, and bridge critical gaps in healthcare services. Together, we are committed to making healthcare more efficient, accessible, and impactful for providers and patients alike."
+      },
+      {
+        "id": 3,
+        "text": "Strategic Objectives of the Partnership: The partnership revolves around integrating AI into key areas of healthcare to solve pressing challenges while setting the stage for future advancements:"
+      },
+      {
+        "id": 4,
+        "text": "1. Intelligent Data Utilization\n   • Empowering hospitals to organize, manage, and derive actionable insights from uploaded documents and files.\n   • Enabling quick and accurate responses to hospital-specific queries using AI-powered tools.\n2. Streamlined Hospital Operations\n   • Automating routine administrative tasks to allow staff to concentrate on delivering quality care.\n   • Enhancing resource utilization through predictive scheduling for staff, equipment, and facilities.\n   • Improving accuracy and efficiency in billing and patient data management with AI solutions.\n3. AI-Powered Decision Support\n   • Equipping hospital staff with instant, AI-driven insights tailored to their institution's needs.\n   • Enhancing decision-making processes by providing contextual, data-backed recommendations.\n4. Advancing Remote Support and Accessibility\n   • Facilitating seamless communication and collaboration among hospital teams using AI-enabled platforms.\n   • Improving accessibility of critical information, particularly for hospitals in remote or resource-limited regions.\n5. Enhancing Workforce Efficiency\n   • Deploying AI-driven virtual assistants to support staff in answering queries and managing workflows.\n   • Bridging workforce gaps by providing scalable digital tools to assist with day-to-day operations."
+      },
+      {
+        "id": 5,
+        "text": "Technological Backbone: Tech4Biz Solutions will provide the foundational technological expertise to develop and deploy these solutions at scale. With a history of implementing complex IT infrastructures, cloud-based solutions, and advanced machine learning models, Tech4Biz ensures seamless integration of AI across varied healthcare systems."
+      },
+      {
+        "id": 6,
+        "text": "Key Technologies in Focus:\n   • Advanced natural language processing (NLP) for better patient-doctor interactions.\n   • Predictive analytics to forecast resource needs and mitigate risks.\n   • Cloud-enabled frameworks for secure, large-scale data processing and sharing.\n   • AI-driven chatbots for round-the-clock patient engagement and support."
+      },
+      {
+        "id": 7,
+        "text": "Collaborative Vision from Leadership: Jainul Abid, CEO of Spurrin Innovation, shared his vision:\n   \"This partnership is a pivotal moment for us. By combining our pioneering AI technologies with Tech4Biz Solutions’ expertise in scaling innovations, we’re setting a new standard for how AI can transform healthcare. Our mission is to make healthcare predictive, proactive, and personalized.\"\n\n   Ms. Yasha Khandelwal, CEO of Tech4Biz Solutions, added:\n   \"We are excited to embark on this journey with Spurrin Innovation. At Tech4Biz, we view technology as a tool to solve humanity's biggest challenges, and there is no sector more critical than healthcare. Together, we aim to build a robust and responsive healthcare ecosystem that leverages AI to improve lives.\""
+      },
+      {
+        "id": 8,
+        "text": "Focus on India and the Middle East:\n\nWhy India?\n   • India faces a dual healthcare challenge: high demand for affordable healthcare and a shortage of trained medical personnel.\n   • The partnership will help bridge these gaps by bringing AI-enabled diagnostics and operational tools to under-resourced regions.\n   • Aligning with national initiatives like Ayushman Bharat, these innovations can dramatically improve healthcare accessibility for rural and underserved populations.\n\nWhy the Middle East?\n   • With governments in the Middle East pushing for digital transformation under initiatives such as Saudi Arabia’s Vision 2030 and Qatar’s National Vision 2030, AI adoption in healthcare is a key focus area.\n   • The partnership aims to create cost-effective solutions tailored to the region’s unique demographic and infrastructural needs, ensuring long-term scalability."
+      },
+      {
+        "id": 9,
+        "text": "Immediate Benefits and Long-Term Goals:\n\nImmediate Benefits:\n   • Rapid deployment of AI tools in hospitals and clinics.\n   • Improved patient care standards through real-time, data-driven insights.\n   • Reduction in wait times and operational bottlenecks.\n\nLong-Term Goals:\n   • Democratizing access to AI-driven healthcare tools for rural and remote populations.\n   • Creating scalable, interoperable systems that set the foundation for global healthcare transformation."
+      },
+      {
+        "id": 10,
+        "text": "Future Initiatives:\nTo extend the impact of this collaboration, the companies will work on:\n   1. AI Training and Workshops: Hosting workshops for healthcare professionals to understand and utilize AI tools effectively.\n   2. Cross-Border Knowledge Exchange: Creating a network of hospitals and research institutions in India and the Middle East to share best practices and AI-driven healthcare insights.\n   3. Sustainability in Healthcare: Developing eco-friendly AI solutions to minimize the carbon footprint of healthcare facilities."
+      },
+      {
+        "id": 11,
+        "text": "A Partnership Rooted in Impact: This collaboration is not just about technology; it is about creating meaningful, measurable change in healthcare systems. By pooling their expertise, Spurrin Innovation and Tech4Biz Solutions are poised to make healthcare smarter, more efficient, and accessible for millions of people."
+      },
+      {
+        "id": 12,
+        "text": "Contact Information:\nFor media inquiries or more details on the partnership:\nMedia Contact:\nRameswari Behera\nDigital Marketing Specialist\nwww.tech4bizsolutions.com."
+      },
+      {
+        "id": 13,
+        "text": "About the Companies:\n\nAbout Spurrin Innovation:\nSpurrin Innovation is a global leader in AI-powered healthcare solutions, specializing in predictive diagnostics, personalized medicine, and operational efficiency. Through cutting-edge technologies, Spurrin is redefining how healthcare is delivered across the globe.\n\nAbout Tech4Biz Solutions:\nTech4Biz Solutions is a premier provider of end-to-end technology solutions, with a focus on AI, cloud computing, and scalable IT frameworks. Known for driving digital transformation, Tech4Biz Solutions delivers impactful, innovative solutions across industries."
+      }
+    ],
+    "quotes": [
+      {
+        "id": 1,
+        "author": "Jainul Abid",
+        "title": "CEO, Spurrin Innovation",
+        "quote": "This partnership is a pivotal moment for us. By combining our pioneering AI technologies with Tech4Biz Solutions’ expertise in scaling innovations, we’re setting a new standard for how AI can transform healthcare. Our mission is to make healthcare predictive, proactive, and personalized."
+      },
+      {
+        "id": 2,
+        "author": "Yasha Khandelwal",
+        "title": "CEO, Tech4Biz Solutions",
+        "quote": "We are excited to embark on this journey with Spurrin Innovation. At Tech4Biz, we view technology as a tool to solve humanity's biggest challenges, and there is no sector more critical than healthcare. Together, we aim to build a robust and responsive healthcare ecosystem that leverages AI to improve lives."
+      }
+    ],
+    "additionalInfo": [
+      {
+        "id": 1,
+        "text": "Tech4Biz Solutions brings unparalleled expertise in delivering scalable, innovative technology solutions tailored to the unique needs of the healthcare sector. With a proven track record in developing robust IT frameworks and intelligent systems, Tech4Biz is dedicated to ensuring seamless adoption of cutting-edge AI capabilities across healthcare institutions."
+      },
+      {
+        "id": 2,
+        "text": "Key Technologies in Focus:\n   • Advanced natural language processing (NLP) for better patient-doctor interactions.\n   • Predictive analytics to forecast resource needs and mitigate risks.\n   • Cloud-enabled frameworks for secure, large-scale data processing and sharing.\n   • AI-driven chatbots for round-the-clock patient engagement and support."
+      },
+      {
+        "id": 3,
+        "text": "Core Technological Focus Areas:\n   • Leveraging AI to streamline hospital operations and enhance decision-making processes.\n   • Ensuring scalable and secure frameworks to support the dynamic needs of modern healthcare.\n   • Empowering hospital teams with intuitive, AI-driven tools designed to improve efficiency and accessibility."
+      }
+    ]
+  },
+  "social": {
+    "shareText": "Share",
+    "platforms": {
+      "facebook": {
+        "label": "Share on Facebook",
+        "icon": "Facebook"
+      },
+      "twitter": {
+        "label": "Share on Twitter",
+        "icon": "Twitter"
+      },
+      "linkedin": {
+        "label": "Share on LinkedIn",
+        "icon": "Linkedin"
+      }
+    }
+  },
+  "gallery": {
+    "slides": [
+      {
+        "id": 1,
+        "image": "https://placehold.co/1200x800",
+        "description": "Spurrin Innovation and Tech4Biz Solutions Partnership"
+      },
+      {
+        "id": 2,
+        "image": "/images/banners/Img-2.webp",
+        "description": "AI-Driven Healthcare Solutions"
+      },
+      {
+        "id": 3,
+        "image": "/images/banners/Img-3_2.webp",
+        "description": "Leadership of Spurrin Innovation"
+      },
+      {
+        "id": 4,
+        "image": "/images/banners/Img-4_3.webp",
+        "description": "Leadership of Tech4Biz Solutions"
+      }
+    ]
+  },
+  "news": {
+    "title": "News and Insights",
+    "description": "Stay informed with the latest updates and insights from our partnerships and innovations.",
+    "articles": []
+  },
+  "about": {
+    "title": "ABOUT THE PARTNERS",
+    "paragraphs": [
+      {
+        "id": 1,
+        "text": "Spurrin Innovation is a global leader in AI-powered healthcare solutions, specializing in predictive diagnostics, personalized medicine, and operational efficiency. Through cutting-edge technologies, Spurrin is redefining how healthcare is delivered across the globe."
+      },
+      {
+        "id": 2,
+        "text": "Tech4Biz Solutions is a premier provider of end-to-end technology solutions, with a focus on AI, cloud computing, and scalable IT frameworks. Known for driving digital transformation, Tech4Biz Solutions delivers impactful, innovative solutions across industries.",
+        "link": {
+          "text": "www.tech4bizsolutions.com",
+          "url": "https://www.tech4bizsolutions.com"
+        }
+      }
+    ]
+  },
+  "subscribe": {
+    "title": "Subscribe to our mailing list and stay up to date",
+    "description": "Join our community of subscribers and receive regular updates delivered straight to your inbox. It's quick, easy, and free",
+    "rating": {
+      "stars": 5,
+      "score": "4.9",
+      "reviews": "1000+",
+      "platform": "Glassdoor"
+    }
+  }
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/index.jsx
new file mode 100644
index 0000000..fb3ce66
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/index.jsx
@@ -0,0 +1,43 @@
+import ScrollToTop from '@components/common/scroll/ScrollToTop'
+import PressReleaseHero from './sections/hero/PressReleaseHero'
+import PressReleaseContent from './sections/content/PressReleaseContent'
+import SocialShare from './sections/social/SocialShare'
+import About from './sections/about/About'
+import pressReleaseData from './config/pressRelease.json'
+
+export default function PressRelease() {
+  return (
+    <>
+      <ScrollToTop />
+      <main>
+        <PressReleaseHero 
+          data={pressReleaseData.metadata} 
+          navigation={pressReleaseData.navigation} 
+        />
+        <SocialShare 
+          data={pressReleaseData.metadata} 
+          social={pressReleaseData.social} 
+        />
+        <PressReleaseContent 
+          data={{
+            highlights: pressReleaseData.highlights,
+            content: {
+              introduction: pressReleaseData.content.introduction,
+              mainBody: pressReleaseData.content.mainBody,
+              quotes: pressReleaseData.content.quotes,
+              additionalInfo: pressReleaseData.content.additionalInfo
+            },
+            metadata: pressReleaseData.metadata
+          }}
+        />
+        {/* <div className="py-12">
+          <GallerySlider slides={pressReleaseData.gallery.slides} />
+        </div> */}
+        <div className="container mx-auto px-4">
+          <div className="border-t border-gray-200" />
+        </div>
+        <About data={pressReleaseData.about} />
+      </main>
+    </>
+  )
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/about/About.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/about/About.jsx
new file mode 100644
index 0000000..605ec94
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/about/About.jsx
@@ -0,0 +1,45 @@
+import { motion } from 'framer-motion'
+import { fadeInUp, getTransition } from '../../utils/animations'
+
+export default function About({ data }) {
+  // Add error handling for missing data
+  if (!data) return null;
+  
+  const { title, paragraphs } = data
+
+  return (
+    <div className="container mx-auto px-4">
+      <motion.div 
+        className="mx-auto max-w-4xl py-12"
+        {...fadeInUp}
+        transition={getTransition(0.6)}
+      >
+        <div className="space-y-6">
+          <h2 className="mb-6 font-semibold uppercase tracking-wide">
+            {title}
+          </h2>
+          
+          <div className="space-y-6">
+            {paragraphs.map((paragraph) => (
+              <p key={paragraph.id} className="text-lg">
+                {paragraph.text}
+                {paragraph.link && (
+                  <>
+                    {' '}For more information, visit{' '}
+                    <a 
+                      href={paragraph.link.url} 
+                      className="text-blue-600 hover:underline"
+                    >
+                      {paragraph.link.text}
+                    </a>
+                    .
+                  </>
+                )}
+              </p>
+            ))}
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/content/PressReleaseContent.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/content/PressReleaseContent.jsx
new file mode 100644
index 0000000..01df65a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/content/PressReleaseContent.jsx
@@ -0,0 +1,79 @@
+import { motion } from 'framer-motion'
+import { fadeInUp, getTransition } from '../../utils/animations'
+import { formatText } from '../../utils/textFormatters.jsx'
+
+export default function PressReleaseContent({ data }) {
+  // Add data validation
+  if (!data) return null;
+
+  const { highlights, content, metadata } = data;
+  
+  return (
+    <div className="container mx-auto px-4">
+      <motion.div 
+        className="mx-auto max-w-4xl py-8"
+        {...fadeInUp}
+        transition={getTransition(0.6)}
+      >
+        {/* Highlights */}
+        {highlights && highlights.length > 0 && (
+          <div className="mb-10 bg-gray-50 p-6 rounded-lg border-l-4 border-blue-600">
+            <h3 className="text-xl font-semibold mb-4 text-gray-800">Key Highlights</h3>
+            <ul className="space-y-3" role="list">
+              {highlights.map((highlight) => (
+                <li key={highlight.id} className="flex items-start">
+                  <div className="relative mr-3 mt-1.5" aria-hidden="true">
+                    <span className="absolute -left-0.5 -top-0.5 size-2.5 rounded-full border border-blue-600/30" />
+                    <span className="block size-1.5 rounded-full bg-blue-600" />
+                  </div>
+                  <span className="text-lg text-gray-700">{highlight.text}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {/* Press Release Content */}
+        <div className="space-y-8">
+          <h2 className="mb-8 font-semibold uppercase tracking-wide text-gray-500 border-b pb-2">PRESS RELEASE</h2>
+          
+          {content?.introduction?.companyInfo && (
+            <div className="text-lg font-medium bg-white p-6 rounded-lg shadow-sm border border-gray-100">
+              <p>
+                <strong className="text-gray-800">{metadata?.location}, {metadata?.releaseDate}:</strong>{' '}
+                {content.introduction.companyInfo}
+              </p>
+            </div>
+          )}
+
+          <div className="space-y-8">
+            {content?.mainBody?.map((paragraph, index) => (
+              <div key={paragraph.id} className="text-lg">
+                {formatText(paragraph.text)}
+              </div>
+            ))}
+          </div>
+
+          {(content?.quotes?.length > 0 || content?.additionalInfo?.length > 0) && (
+            <div className="space-y-8 pt-6">
+              {content?.quotes?.map((quote) => (
+                <blockquote key={quote.id} className="border-l-4 border-gray-300 pl-4 py-2 italic text-lg" cite={metadata?.url || window.location.href}>
+                  <p className="mb-2">"{quote.quote}"</p>
+                  <footer className="text-gray-600 not-italic">
+                    <strong>{quote.author}</strong>, {quote.title}
+                  </footer>
+                </blockquote>
+              ))}
+
+              {content?.additionalInfo?.map((info) => (
+                <div key={info.id} className="bg-gray-50 p-6 rounded-lg">
+                  {formatText(info.text)}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </motion.div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/gallery/GallerySlider.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/gallery/GallerySlider.jsx
new file mode 100644
index 0000000..5935631
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/gallery/GallerySlider.jsx
@@ -0,0 +1,130 @@
+// 'use client'
+
+// import { useState, useCallback } from 'react'
+// import { motion, AnimatePresence } from 'framer-motion'
+// import { ChevronLeft, ChevronRight } from 'lucide-react'
+
+// export default function GallerySlider({ slides }) {
+//   const [currentSlide, setCurrentSlide] = useState(0)
+//   const [direction, setDirection] = useState(0)
+//   const [isLoading, setIsLoading] = useState(true)
+
+//   const slideVariants = {
+//     enter: (direction) => ({
+//       x: direction > 0 ? 1000 : -1000,
+//       opacity: 0
+//     }),
+//     center: {
+//       zIndex: 1,
+//       x: 0,
+//       opacity: 1
+//     },
+//     exit: (direction) => ({
+//       zIndex: 0,
+//       x: direction < 0 ? 1000 : -1000,
+//       opacity: 0
+//     })
+//   }
+
+//   const paginate = useCallback((newDirection) => {
+//     setDirection(newDirection)
+//     setCurrentSlide((prevSlide) => (prevSlide + newDirection + slides.length) % slides.length)
+//   }, [slides.length])
+
+//   const handleKeyDown = useCallback((e) => {
+//     if (e.key === 'ArrowLeft') paginate(-1)
+//     if (e.key === 'ArrowRight') paginate(1)
+//   }, [paginate])
+
+//   const handleImageLoad = () => {
+//     setIsLoading(false)
+//   }
+
+//   return (
+//     <div className="relative w-full max-w-6xl mx-auto">
+//       {/* Slider Container with Preview */}
+//       <div className="relative overflow-hidden">
+//         <div className="flex">
+//           {/* Current Slide */}
+//           <div className="relative w-[80%] rounded-lg">
+//             <div className="aspect-[16/9]">
+//               <AnimatePresence initial={false} custom={direction} mode="wait">
+//                 <motion.div
+//                   key={currentSlide}
+//                   custom={direction}
+//                   variants={slideVariants}
+//                   initial="enter"
+//                   animate="center"
+//                   exit="exit"
+//                   transition={{
+//                     x: { type: "spring", stiffness: 300, damping: 30 },
+//                     opacity: { duration: 0.2 }
+//                   }}
+//                   className="absolute inset-0"
+//                 >
+//                   {isLoading && (
+//                     <div className="absolute inset-0 bg-gray-200 animate-pulse" />
+//                   )}
+//                   <img
+//                     src={slides[currentSlide].image}
+//                     alt={slides[currentSlide].title}
+//                     onLoad={handleImageLoad}
+//                     className={`w-full h-full object-contain transition-opacity duration-300 ${
+//                       isLoading ? 'opacity-0' : 'opacity-100'
+//                     }`}
+//                   />
+//                 </motion.div>
+//               </AnimatePresence>
+//             </div>
+//           </div>
+
+//           {/* Preview of Next Slide */}
+//           <div className="relative w-[20%] opacity-50 mr-4 rounded-lg">
+//             <div className="aspect-[16/9]">
+//               <img
+//                 src={slides[(currentSlide + 1) % slides.length].image}
+//                 alt="Next slide preview"
+//                 className="w-full h-full object-cover"
+//               />
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+
+//       {/* Navigation and Description Section */}
+//       <div className="mt-6 space-y-3 ml-8">
+//         {/* Navigation Controls */}
+//         <div className="flex flex-col items-start gap-4">
+//           <div className="flex items-center gap-4">
+//             <button
+//               onClick={() => paginate(-1)}
+//               className="p-1"
+//               aria-label="Previous slide"
+//               disabled={isLoading}
+//             >
+//               <ChevronLeft className="w-4 h-4" />
+//             </button>
+
+//             <div className="flex items-center gap-2 font-mono text-sm tracking-wider lowercase">
+//               {String(currentSlide + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
+//             </div>
+
+//             <button
+//               onClick={() => paginate(1)}
+//               className="p-1"
+//               aria-label="Next slide"
+//               disabled={isLoading}
+//             >
+//               <ChevronRight className="w-4 h-4" />
+//             </button>
+//           </div>
+
+//           {/* Description */}
+//           <div className="text-sm uppercase tracking-wider">
+//             {slides[currentSlide].description}
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   )
+// }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/hero/PressReleaseHero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/hero/PressReleaseHero.jsx
new file mode 100644
index 0000000..b0cd9de
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/hero/PressReleaseHero.jsx
@@ -0,0 +1,72 @@
+import { motion } from 'framer-motion'
+import { fadeInUp, getTransition } from '../../utils/animations'
+
+export default function PressReleaseHero({ data, navigation }) {
+  // Derive alt text from title if available
+  const imageAltText = data?.title 
+    ? `Press release: ${data.title}` 
+    : "Press Release hero image";
+
+  return (
+    <header className="relative h-[800px] w-full overflow-hidden">
+      <div className="absolute inset-0">
+        {/* Image optimization with width and height attributes */}
+        <img
+          src="/images/pressrelease/Hero-PressRelease.webp"
+          alt={imageAltText}
+          className="h-full w-full object-cover"
+          width="1920"
+          height="800"
+          loading="eager" // Load hero image immediately as it's above the fold
+          fetchpriority="high" // Signal high priority to browser
+        />
+        {/* Gradient overlay for text readability */}
+        <div 
+          className="absolute inset-0 bg-gradient-to-r from-black/70 to-black/50" 
+          aria-hidden="true"
+        />
+      </div>
+
+      <div className="relative h-full w-full">
+        <div className="container mx-auto h-full px-4">
+          <div className="flex h-full flex-col justify-start space-y-6 pt-16">
+            {/* Breadcrumb navigation */}
+            <nav aria-label="Breadcrumb" className="space-y-4">
+              <motion.div
+                {...fadeInUp}
+                transition={getTransition()}
+                className="flex items-center space-x-2 text-sm font-medium text-white/80"
+              >
+                <a 
+                  href={navigation.newsroom.path} 
+                  className="hover:text-white transition-colors"
+                  aria-label={`Go to ${navigation.newsroom.text}`}
+                >
+                  {navigation.newsroom.text}
+                </a>
+                <span aria-hidden="true">/</span>
+                <span aria-current="page">{navigation.currentPage}</span>
+              </motion.div>
+              
+              <motion.div
+                {...fadeInUp}
+                transition={getTransition(0.1)}
+                className="h-[1.5px] bg-white/30"
+                aria-hidden="true"
+              />
+            </nav>
+
+            {/* Main heading */}
+            <motion.h1
+              {...fadeInUp}
+              transition={getTransition(0.2)}
+              className="max-w-4xl text-4xl font-bold leading-tight text-white sm:text-5xl md:text-6xl"
+            >
+              {data.title}
+            </motion.h1>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/news/NewsAndInsight.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/news/NewsAndInsight.jsx
new file mode 100644
index 0000000..b065b4b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/news/NewsAndInsight.jsx
@@ -0,0 +1,79 @@
+import { motion } from 'framer-motion'
+import { fadeInUp, getTransition, containerVariants, itemVariants } from '../../utils/animations'
+
+export default function NewsAndInsights({ data }) {
+  const { title, description, articles } = data
+
+  return (
+    <div className="container mx-auto px-4">
+      <div className="mx-auto max-w-6xl py-12">
+        <div className="text-center mb-12">
+          <motion.h2
+            {...fadeInUp}
+            transition={getTransition(0.1)}
+            className="text-4xl md:text-5xl font-normal text-gray-900 mb-4"
+          >
+            {title}
+          </motion.h2>
+          <motion.p
+            {...fadeInUp}
+            transition={getTransition(0.2)}
+            className="text-lg text-gray-600 max-w-2xl mx-auto"
+          >
+            {description}
+          </motion.p>
+        </div>
+
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+        >
+          {articles.map((article) => (
+            <motion.article
+              key={article.id}
+              variants={itemVariants}
+              whileHover={{ y: -5 }}
+              className="overflow-hidden"
+            >
+              <div className="relative h-[280px] rounded-2xl overflow-hidden mb-4">
+                <img
+                  src={article.image}
+                  alt={article.title}
+                  className="w-full h-full object-cover"
+                  loading="lazy"
+                />
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  className="absolute bottom-4 right-4 bg-white px-4 py-2 rounded-lg text-sm font-medium shadow-md hover:bg-gray-50 transition-colors duration-200"
+                >
+                  Read More
+                </motion.button>
+              </div>
+              <div className="space-y-3">
+                <div className="flex flex-wrap gap-2">
+                  {article.tags.map((tag) => (
+                    <span
+                      key={tag}
+                      className="px-3 py-1 rounded-full text-sm text-gray-600 border border-gray-200"
+                    >
+                      {tag}
+                    </span>
+                  ))}
+                </div>
+                <h3 className="text-2xl font-normal text-gray-900">
+                  {article.title}
+                </h3>
+                <p className="text-base text-gray-600 leading-relaxed">
+                  {article.description}
+                </p>
+              </div>
+            </motion.article>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/social/SocialShare.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/social/SocialShare.jsx
new file mode 100644
index 0000000..e10f928
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/social/SocialShare.jsx
@@ -0,0 +1,115 @@
+import { Facebook, Linkedin, Twitter } from 'lucide-react'
+import { motion } from 'framer-motion'
+import { fadeInUp, getTransition } from '../../utils/animations'
+import { useLocation } from 'react-router-dom'
+
+export default function SocialShare({ data, social }) {
+  const location = useLocation();
+  const currentUrl = `${window.location.origin}${location.pathname}`;
+
+  const generateShareContent = () => {
+    const title = data.title || 'Press Release';
+    const description = data.description || '';
+    
+    return {
+      twitter: `📢 ${title}\n\n${description}\n\n#PressRelease #Tech4Biz #Innovation\n\n${currentUrl}`,
+      
+      linkedin: `Latest Press Release: ${title}\n\n${description}\n\nRead more:`,
+      
+      facebook: `📢 ${title}\n\n${description}\n\nRead our latest press release!`,
+      
+      email: {
+        subject: `New Press Release: ${title}`,
+        body: `Hi,\n\nI thought you might be interested in our latest press release:\n\n${title}\n\n${description}\n\nRead the full press release here: ${currentUrl}\n\nBest regards`
+      }
+    };
+  };
+
+  const handleShare = (platform) => {
+    const content = generateShareContent();
+    
+    const shareLinks = {
+      twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(content.twitter)}`,
+      linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(currentUrl)}&title=${encodeURIComponent(data.title)}&summary=${encodeURIComponent(content.linkedin)}&source=Tech4Biz`,
+      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}&quote=${encodeURIComponent(content.facebook)}`,
+    };
+
+    // Define popup dimensions
+    const dimensions = {
+      twitter: { width: 550, height: 420 },
+      facebook: { width: 550, height: 450 },
+      linkedin: { width: 600, height: 600 },
+    };
+
+    const { width, height } = dimensions[platform];
+    const left = (window.innerWidth - width) / 2 + window.screenX;
+    const top = (window.innerHeight - height) / 2 + window.screenY;
+
+    const popup = window.open(
+      shareLinks[platform],
+      `share-${platform}`,
+      `width=${width},height=${height},left=${left},top=${top},toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1`
+    );
+
+    if (popup && popup.focus) {
+      popup.focus();
+    }
+  };
+
+  const icons = {
+    Facebook,
+    Twitter,
+    Linkedin,
+  }
+
+  // Get current date
+  const currentDate = new Date()
+  
+  // Format current date
+  const formattedDate = currentDate.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  })
+
+  return (
+    <div className="container mx-auto px-4">
+      <motion.div 
+        {...fadeInUp}
+        transition={getTransition(0.4)}
+        className="border-b py-4"
+      >
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground">
+            <time dateTime={currentDate.toISOString()}>
+              {formattedDate}
+            </time>
+            <span>•</span>
+            <span>{data.readTime}</span>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <span className="hidden text-sm text-muted-foreground sm:inline">
+              {social.shareText}
+            </span>
+            <div className="flex gap-3">
+              {Object.entries(social.platforms).map(([key, { label, icon }]) => {
+                const Icon = icons[icon]
+                return (
+                  <button
+                    key={key}
+                    onClick={() => handleShare(key.toLowerCase())}
+                    className="text-muted-foreground transition-colors hover:text-primary"
+                    aria-label={label}
+                  >
+                    <Icon className="size-5" />
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  )
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/subscribe/Subscribe.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/subscribe/Subscribe.jsx
new file mode 100644
index 0000000..3a88bee
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/sections/subscribe/Subscribe.jsx
@@ -0,0 +1,84 @@
+// import { useState } from 'react'
+// import { motion } from 'framer-motion'
+// import { fadeInUp, getTransition } from '../../utils/animations'
+
+// export default function Subscribe({ data }) {
+//   const [email, setEmail] = useState('')
+//   const { title, description, rating } = data
+
+//   const handleSubmit = (e) => {
+//     e.preventDefault()
+//     // Handle form submission logic here
+//     console.log('Email submitted:', email)
+//   }
+
+//   return (
+//     <div className="container mx-auto px-4">
+//       <section className="mx-auto max-w-6xl py-16">
+//         <div className="grid lg:grid-cols-2 gap-8 items-center">
+//           {/* Left Column */}
+//           <motion.div
+//             {...fadeInUp}
+//             transition={getTransition(0.1)}
+//           >
+//             <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-8">
+//               {title}
+//             </h2>
+            
+//             {/* Trustpilot Rating */}
+//             <div className="flex items-center gap-3">
+//               <div className="flex">
+//                 {[...Array(5)].map((_, index) => (
+//                   <svg
+//                     key={index}
+//                     className={`w-5 h-5 ${
+//                       index < rating.stars ? 'text-yellow-400' : 'text-gray-300'
+//                     }`}
+//                     fill="currentColor"
+//                     viewBox="0 0 20 20"
+//                   >
+//                     <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+//                   </svg>
+//                 ))}
+//               </div>
+//               <span className="text-gray-600">{rating.score} Rating</span>
+//               <span className="text-gray-600">|</span>
+//               <span className="text-gray-600">{rating.reviews} Reviews on</span>
+//               <span className="text-[#00b67a] font-semibold">{rating.platform}</span>
+//             </div>
+//           </motion.div>
+
+//           {/* Right Column */}
+//           <motion.div
+//             {...fadeInUp}
+//             transition={getTransition(0.2)}
+//             className="space-y-6"
+//           >
+//             <p className="text-lg text-gray-600">
+//               {description}
+//             </p>
+            
+//             <form onSubmit={handleSubmit} className="flex flex-col sm:flex-row gap-3">
+//               <input
+//                 type="email"
+//                 value={email}
+//                 onChange={(e) => setEmail(e.target.value)}
+//                 placeholder="Type your email"
+//                 className="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+//                 required
+//               />
+//               <motion.button
+//                 whileHover={{ scale: 1.02 }}
+//                 whileTap={{ scale: 0.98 }}
+//                 type="submit"
+//                 className="px-8 py-3 text-white bg-indigo-600 rounded-lg font-medium hover:bg-indigo-700 transition-colors duration-200"
+//               >
+//                 Subscribe
+//               </motion.button>
+//             </form>
+//           </motion.div>
+//         </div>
+//       </section>
+//     </div>
+//   )
+// } 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/utils/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/utils/animations.js
new file mode 100644
index 0000000..47305be
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/utils/animations.js
@@ -0,0 +1,32 @@
+export const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+}
+
+export const getTransition = (delay = 0) => ({
+  duration: 0.5,
+  delay,
+})
+
+// Moved animations from NewsAndInsights.jsx
+
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+    },
+  },
+}
+
+export const itemVariants = {
+  hidden: { y: 20, opacity: 0 },
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 0.5,
+    },
+  },
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/utils/textFormatters.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/utils/textFormatters.jsx
new file mode 100644
index 0000000..d9356a7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/PressRelease/utils/textFormatters.jsx
@@ -0,0 +1,117 @@
+import React from 'react'; // Optional in React 17+ if you're using the new JSX transform
+
+// Helper function to convert newlines to <br> elements
+export const formatText = (text) => {
+  if (!text) return '';
+  
+  // Check if the text contains bullet points or numbered lists
+  if (text.includes('\n1.') || text.includes('\n•') || text.includes('\n   •')) {
+    // Process as a list
+    return processListContent(text);
+  }
+  
+  // Regular paragraph formatting with optimized splitting
+  const lines = text.split('\n');
+  return lines.map((line, i) => (
+    <span key={i}>
+      {line}
+      {i < lines.length - 1 && <br />}
+    </span>
+  ));
+};
+
+// Process text that contains lists
+export const processListContent = (text) => {
+  const lines = text.split('\n');
+  const result = [];
+  let inList = false;
+  let listItems = [];
+  let listType = 'ul'; // Default to unordered list
+  
+  lines.forEach((line, index) => {
+    // Check if line starts a numbered list item
+    const isNumberedItem = /^\d+\.\s/.test(line.trim());
+    // Check if line starts a bullet point
+    const isBulletItem = line.trim().startsWith('•') || line.trim().startsWith('   •');
+    
+    if (isNumberedItem || isBulletItem) {
+      if (!inList) {
+        // Start a new list
+        inList = true;
+        listType = isNumberedItem ? 'ol' : 'ul';
+        
+        // If there's text before the list, add it
+        if (result.length > 0 && typeof result[result.length - 1] === 'string') {
+          result.pop(); // Remove the last string
+        }
+      }
+      
+      // Clean the list item text
+      let itemText = line.trim();
+      if (isNumberedItem) {
+        itemText = itemText.replace(/^\d+\.\s/, '');
+      } else if (isBulletItem) {
+        itemText = itemText.replace(/^•\s*/, '').replace(/^\s*•\s*/, '');
+      }
+      
+      listItems.push(itemText);
+    } else {
+      if (inList) {
+        // End the current list
+        result.push(
+          listType === 'ol' ? 
+            <ol key={`ol-${index}`} className="list-decimal pl-6 space-y-2 my-4" role="list">
+              {listItems.map((item, i) => <li key={i} className="text-lg">{item}</li>)}
+            </ol> :
+            <ul key={`ul-${index}`} className="list-disc pl-6 space-y-2 my-4" role="list">
+              {listItems.map((item, i) => <li key={i} className="text-lg">{item}</li>)}
+            </ul>
+        );
+        inList = false;
+        listItems = [];
+      }
+      
+      // Add regular text
+      if (line.trim()) {
+        result.push(line);
+      } else if (result.length > 0) {
+        // Add paragraph break for empty lines
+        result.push(<div key={`break-${index}`} className="h-4"></div>);
+      }
+    }
+  });
+  
+  // If we ended with a list, add it
+  if (inList) {
+    result.push(
+      listType === 'ol' ? 
+        <ol key="ol-final" className="list-decimal pl-6 space-y-2 my-4" role="list">
+          {listItems.map((item, i) => <li key={i} className="text-lg">{item}</li>)}
+        </ol> :
+        <ul key="ul-final" className="list-disc pl-6 space-y-2 my-4" role="list">
+          {listItems.map((item, i) => <li key={i} className="text-lg">{item}</li>)}
+        </ul>
+    );
+  }
+  
+  return result;
+};
+
+// Format section titles with enhanced styling
+export const formatSectionTitle = (text) => {
+  if (!text) return null;
+  
+  // Check if the text starts with a section title pattern (e.g., "Title:" or "Title -")
+  const titleMatch = text.match(/^([^:]+):\s*(.*)$/) || text.match(/^([^-]+)-\s*(.*)$/);
+  
+  if (titleMatch) {
+    return (
+      <>
+        <h3 className="text-xl font-semibold text-gray-800 mb-3">{titleMatch[1].trim()}</h3>
+        <p className="text-lg">{titleMatch[2].trim()}</p>
+      </>
+    );
+  }
+  
+  return <p className="text-lg">{text}</p>;
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/ProductDetail.module.css b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/ProductDetail.module.css
new file mode 100644
index 0000000..88e47e8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/ProductDetail.module.css
@@ -0,0 +1,26 @@
+.container {
+  @apply min-h-screen bg-white;
+}
+
+.content {
+  @apply flex flex-col;
+}
+
+/* Increase specificity for modal form elements */
+:global(.crm-modal-form),
+:global(.crm-modal-form) * {
+  text-align: left !important;
+}
+
+/* Target specific form elements */
+:global(.crm-modal-form input),
+:global(.crm-modal-form select),
+:global(.crm-modal-form textarea),
+:global(.crm-modal-form label) {
+  text-align: left !important;
+}
+
+/* Ensure modal content alignment */
+:global(.crm-modal-content) {
+  text-align: left !important;
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/cloudriv.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/cloudriv.json
new file mode 100644
index 0000000..6ccbcf4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/cloudriv.json
@@ -0,0 +1,247 @@
+{
+  "hero": {
+    "category": "CLOUD STORAGE SOLUTION",
+    "title": "Secure and Scale with ",
+    "subtitle": "Cloud Innovation",
+    "description": "Uncover how precision and a fervent commitment to excellence converge to create impactful and seamless interactions in the digital realm.",
+    "buttonText": "Get Started",
+    
+      "cards": [
+        {
+          "icon": "Grid",
+          "title": "File Storage & Sharing",
+          "description": "Secure storage with customizable sharing permissions. Scalable options for personal and professional needs."
+        },
+        {
+          "icon": "Layout",
+          "title": "Collaboration Tools",
+          "description": "Online office tools for real-time editing and co-authoring. Shared folders for seamless team collaboration."
+        },
+        {
+          "icon": "Cloud",
+          "title": "Cross-Platform Sync",
+          "description": "Desktop sync client for automated backups and easy access. Mobile app for on-the-go accessibility."
+        },
+        {
+          "icon": "Calendar",
+          "title": "Organization Features",
+          "description": "Integrated calendar to manage schedules and deadlines. Notes functionality for quick ideas and to-do lists."
+        }
+      ]
+    
+    
+  },
+  "serviceBenefits": {
+    "release": {
+      "id": "release",
+      "title": "Flexibility",
+      "mainTitle": "Tailored to Your Needs, Whether Personal or Enterprise",
+      "description": "Adaptable to any use case, whether for individuals, teams, or enterprises, ensuring maximum efficiency.",
+      "image": "/images/products/details/cloudriv/cloudrivFlexibility.webp",
+      "bullets": [
+        {
+          "title": "Customizable Use Cases",
+          "description": "Adapt the platform to suit individual, team, or enterprise needs"
+        },
+        {
+          "title": "Scalable Solutions",
+          "description": "Easily scale resources as your needs grow"
+        },
+        {
+          "title": "Tailored for All",
+          "description": "Perfect for a wide range of users, from personal projects to corporate solutions"
+        }
+      ]
+    },
+    "analytic": {
+      "id": "analytic",
+      "title": "Reliability",
+      "icon": "Chart",
+      "mainTitle": "Dependable Uptime and Secure Data Backup",
+      "description": "Ensures constant uptime and secure backups to protect your data.",
+      "image": "/images/products/details/cloudriv/CloudDrivreliability.webp",
+      "bullets": [
+        {
+          "title": "High Availability",
+          "description": "Ensure uptime with a robust, reliable platform"
+        },
+        {
+          "title": "Secure Backups",
+          "description": "Protect data with automated and secure backup solutions"
+        },
+        {
+          "title": "Consistent Access",
+          "description": "Rely on uninterrupted access to your files and resources"
+        }
+      ]
+    },
+    "collaboration": {
+      "id": "collaboration",
+      "title": "Collaboration",
+      "icon": "Users",
+      "mainTitle": "Boost Team Productivity with Seamless Communication",
+      "description": "Boosts productivity with real-time sharing tools and seamless teamwork.",
+      "image": "/images/products/details/cloudriv/cloudrivCollab.webp",
+      "bullets": [
+        {
+          "title": "High Availability",
+          "description": "Ensure uptime with a robust, reliable platform"
+        },
+        {
+          "title": "Secure Backups",
+          "description": "Protect data with automated and secure backup solutions"
+        },
+        {
+          "title": "Consistent Access",
+          "description": "Rely on uninterrupted access to your files and resources"
+        }
+      ]
+    },
+    "Organization": {
+      "id": "Organization",
+      "title": "Organization",
+      "icon": "Calendar",
+      "mainTitle": "Streamline Task Management and Stay on Track",
+      "description": "Simplifies task management with integrated notes and calendars.",
+      "image": "/images/products/details/cloudriv/Clouddrivorganization.webp",
+      "bullets": [
+        {
+          "title": "Task Management",
+          "description": "Organize tasks with integrated calendars and notes"
+        },
+        {
+          "title": "Effortless Scheduling",
+          "description": "Simplify scheduling and keep track of deadlines"
+        },
+        {
+          "title": "Centralized Workflow",
+          "description": "Keep everything in one place for easier management"
+        }
+      ]
+    }
+  },
+  "contactForm": {
+    "header": {
+      "title": "Get Started with CloudRiv",
+      "description": "Experience the future of cloud storage and collaboration. Contact us today."
+    },
+    "cards": [
+      {
+        "icon": "IoCallOutline",
+        "title": "Cloud Support",
+        "description": "24/7 technical support for all your cloud storage needs"
+      },
+      {
+        "icon": "HiOutlineMail",
+        "title": "Enterprise Solutions",
+        "description": "Custom solutions for enterprise-level requirements"
+      }
+    ],
+    "rating": {
+      "stars": 5,
+      "score": "4.9",
+      "reviews": "203",
+      "platform": "Trustpilot"
+    },
+    "form": {
+      "fields": {
+        "name": {
+          "label": "Name",
+          "placeholder": "Enter your name"
+        },
+        "email": {
+          "label": "Email",
+          "placeholder": "Enter your business email"
+        },
+        "message": {
+          "label": "Message",
+          "placeholder": "Tell us about your storage needs"
+        }
+      },
+      "submitButton": "Start Free Trial"
+    }
+  },
+  "newsletterStats": {
+    "newsletter": {
+      "title": "Cloud Storage Insights",
+      "description": "Stay updated with the latest in cloud storage technology and collaboration tools",
+      "inputPlaceholder": "Enter your email address",
+      "buttonText": "Join Newsletter",
+      "images": {
+        "main": "/cloud-storage.jpg",
+        "sub1": "/collaboration.jpg",
+        "sub2": "/security.jpg"
+      }
+    },
+    "stats": {
+      "title": "Platform Statistics",
+      "description": "Empowering businesses with secure cloud solutions",
+      "items": [
+        { "number": "2M+", "title": "Active Users" },
+        { "number": "99.9%", "title": "Uptime" },
+        { "number": "50PB+", "title": "Data Stored" },
+        { "number": "100+", "title": "Integrations" }
+      ]
+    }
+  },
+  "featureSection": {
+    "header": {
+      "subtitle": "OUR FEATURES",
+      "title": "Store and share in",
+      "highlightText": "Minutes",
+      "titleSuffix": "not hours."
+    },
+    "features": [
+      {
+        "icon": "Shield",
+        "title": "User-Friendly Interface",
+        "description": "Simple and intuitive design for effortless navigation. Easy onboarding for users of all technical levels."
+      },
+      {
+        "icon": "Users",
+        "title": "Team Sharing",
+        "description": "Allocate storage across family members or team members. Manage permissions and access with precision."
+      },
+      {
+        "icon": "GitMerge",
+        "title": "Collaborative Editing",
+        "description": "Real-time updates with version history tracking. No loss of data during collaboration or syncing."
+      },
+      {
+        "icon": "Monitor",
+        "title": "Seamless Integration",
+        "description": "Works with your favorite productivity apps. Smooth integration into existing workflows."
+      }
+    ],
+    "cta": {
+      "text": "Ready to secure your data in the cloud?",
+      "buttonText": "Get Started",
+      "terms": "*Terms & Conditions apply"
+    },
+    "additionalFeatures": [
+      {
+        "icon": "Shield",
+        "title": "Advanced Security",
+        "description": "Robust encryption to protect your files and data. Multi-factor authentication for added security. Regular security updates to keep your data safe."
+      },
+      {
+        "icon": "Laptop",
+        "title": "Cross-Platform Access",
+        "description": "Access files from any device, whether desktop, tablet, or smartphone. Synchronize data across platforms for uninterrupted workflow."
+      }
+    ]
+  },
+  "testimonialSection": {
+    "subtitle": "CLIENT TESTIMONIAL",
+    "title": "What our clients say about CloudRiv",
+    "testimonials": [
+      {
+        "id": 1,
+        "name": "Ravi Deshmukh",
+        "role": "Small Business Owner, Mumbai",
+        "rating": 5,
+        "text": "Managing documents across my team used to be a headache. With CloudRiv, I bought one plan and assigned storage to my employees without paying per user. The best part? We can work on files together in real time, just like Google Docs. No more back-and-forth emails—everything is in one place. Plus, the desktop sync keeps all our files updated automatically!"
+      }
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/cloudtopiaa.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/cloudtopiaa.json
new file mode 100644
index 0000000..c0c2619
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/cloudtopiaa.json
@@ -0,0 +1,252 @@
+{
+  "hero": {
+    "category": "CLOUD PLATFORM SOLUTION",
+    "title": "Transform your business with ",
+    "subtitle": "Cloud Innovation",
+    "description": "Scale efficiently, secure your data, and optimize costs with our comprehensive cloud platform solutions.",
+    "buttonText": "Get Started",
+    "cards": [
+      {
+        "icon": "Cpu",
+        "title": "Compute Power",
+        "description": "Scalable virtual machines and containers for all workloads. Real-time monitoring of compute resources."
+      },
+      {
+        "icon": "HardDrive",
+        "title": "Storage Solutions",
+        "description": "High-performance object, block, and file storage. Customizable storage tiers to optimize costs."
+      },
+      {
+        "icon": "Wifi",
+        "title": "Networking",
+        "description": "Secure, high-speed networks for seamless communication. Built-in load balancing and DNS management."
+      },
+      {
+        "icon": "Zap",
+        "title": "Deployment Tools",
+        "description": "One-click deployment for applications and services. Pre-configured templates to simplify setup."
+      }
+    ]
+  },
+  "serviceBenefits": {
+    "easeOfUse": {
+      "id": "easeOfUse",
+      "title": "Ease of Use",
+      "icon": "Monitor",
+      "mainTitle": "Intuitive Cloud Management for All Users",
+      "description": "Effortlessly manage your cloud resources with a simple and user-friendly interface.",
+      "image": "/images/products/details/cloudtopia/cloudtopiaaFlexibility.webp",
+      "bullets": [
+        {
+          "title": "Effortless Management",
+          "description": "Cloud resource management made simple for both beginners and experienced users"
+        },
+        {
+          "title": "Intuitive Interface",
+          "description": "Navigate your cloud environment with ease, saving time and reducing complexity"
+        },
+        {
+          "title": "Quick Onboarding",
+          "description": "Get started without a steep learning curve, allowing for faster implementation"
+        }
+      ]
+    },
+    "affordability": {
+      "id": "affordability",
+      "title": "Affordability",
+      "icon": "DollarSign",
+      "mainTitle": "Cost-Effective Solutions with Clear Pricing",
+      "description": "Enjoy budget-friendly plans with transparent pricing and no hidden fees.",
+      "image": "/images/products/details/cloudtopia/cloudtopiaaOrganization.webp",
+      "bullets": [
+        {
+          "title": "Competitive Pricing",
+          "description": "Cost-effective pricing plans to suit businesses of all sizes"
+        },
+        {
+          "title": "Budget-Friendly",
+          "description": "Designed to meet your budget constraints without compromising on features or performance"
+        },
+        {
+          "title": "Transparent Costs",
+          "description": "No hidden fees, providing clear and predictable pricing to help you manage expenses"
+        }
+      ]
+    },
+    "performance": {
+      "id": "performance",
+      "title": "Performance",
+      "icon": "Zap",
+      "mainTitle": "Reliable, High-Speed Cloud Solutions",
+      "description": "Experience fast, dependable cloud infrastructure optimized for demanding applications.",
+      "image": "/images/products/details/cloudtopia/cloudtopiaaReliability.webp",
+      "bullets": [
+        {
+          "title": "High-Speed Infrastructure",
+          "description": "Ultra-fast cloud solutions that meet the needs of demanding applications"
+        },
+        {
+          "title": "Reliable Uptime",
+          "description": "Ensures your services are always available, even during peak usage times"
+        },
+        {
+          "title": "Optimized Resources",
+          "description": "Maximized performance with powerful infrastructure and scalable solutions"
+        }
+      ]
+    },
+    "support": {
+      "id": "support",
+      "title": "Support",
+      "icon": "Headphones",
+      "mainTitle": "Expert Assistance and 24/7 Availability",
+      "description": "Access professional guidance and round-the-clock support to ensure smooth cloud operations.",
+      "image": "/images/products/details/cloudtopia/cloudtopiaaCollaboration.webp",
+      "bullets": [
+        {
+          "title": "Dedicated Assistance",
+          "description": "Access customer support whenever you need help, ensuring smooth operations"
+        },
+        {
+          "title": "Expert Guidance",
+          "description": "Get professional advice and troubleshooting from experienced cloud experts"
+        },
+        {
+          "title": "24/7 Availability",
+          "description": "Round-the-clock support to address any issues and minimize downtime"
+        }
+      ]
+    }
+  },
+  "contactForm": {
+    "header": {
+      "title": "Get in Touch",
+      "description": "Ready to transform your cloud infrastructure? Our team is here to help you get started."
+    },
+    "cards": [
+      {
+        "icon": "IoCallOutline",
+        "title": "Technical Support",
+        "description": "24/7 expert support for all your cloud infrastructure needs"
+      },
+      {
+        "icon": "HiOutlineMail",
+        "title": "Sales Inquiries",
+        "description": "Connect with our sales team to find the perfect solution for your business"
+      }
+    ],
+    "rating": {
+      "stars": 5,
+      "score": "4.9",
+      "reviews": "245",
+      "platform": "Trustpilot"
+    },
+    "form": {
+      "fields": {
+        "name": {
+          "label": "Name",
+          "placeholder": "Enter your name"
+        },
+        "email": {
+          "label": "Email",
+          "placeholder": "Enter your business email"
+        },
+        "message": {
+          "label": "Message",
+          "placeholder": "Tell us about your cloud infrastructure needs"
+        }
+      },
+      "submitButton": "Request Demo"
+    }
+  },
+  "newsletterStats": {
+    "newsletter": {
+      "title": "Stay Updated with Cloud Insights",
+      "description": "Subscribe to our newsletter for the latest cloud technology updates, best practices, and industry news",
+      "inputPlaceholder": "Your work email",
+      "buttonText": "Subscribe Now",
+      "images": {
+        "main": "/cloud-platform.jpg",
+        "sub1": "/cloud-tech.jpg",
+        "sub2": "/cloud-innovation.jpg"
+      }
+    },
+    "stats": {
+      "title": "Our Impact",
+      "description": "Transforming businesses through cloud innovation",
+      "items": [
+        { "number": "500+", "title": "Enterprise Clients" },
+        { "number": "99.99%", "title": "Uptime" },
+        { "number": "45%", "title": "Cost Reduction" },
+        { "number": "24/7", "title": "Support" }
+      ]
+    }
+  },
+  "featureSection": {
+    "header": {
+      "subtitle": "OUR FEATURES",
+      "title": "Scale your cloud in",
+      "highlightText": "Minutes",
+      "titleSuffix": "not days."
+    },
+    "features": [
+      {
+        "icon": "Layout",
+        "title": "User-Friendly Interface",
+        "description": "Designed for intuitive navigation, making it accessible for everyone. Simplified management of cloud resources."
+      },
+      {
+        "icon": "DollarSign",
+        "title": "Cost-Effectiveness",
+        "description": "Transparent pricing with no hidden fees. Budget-friendly solutions tailored to your requirements."
+      },
+      {
+        "icon": "Scale",
+        "title": "Flexibility and Scale",
+        "description": "Solutions built for startups, SMEs, and enterprises alike. Easily scale resources up or down as needed."
+      },
+      {
+        "icon": "Shield",
+        "title": "High Availability",
+        "description": "Reliable infrastructure with robust failover mechanisms. Data redundancy to minimize downtime risks."
+      }
+    ],
+    "cta": {
+      "text": "Transform your infrastructure with our enterprise-grade cloud solutions",
+      "buttonText": "Get Started",
+      "terms": "*Terms & Conditions apply"
+    },
+    "additionalFeatures": [
+      {
+        "icon": "ShieldCheck",
+        "title": "Enhanced Security",
+        "description": "Advanced encryption to protect sensitive data. Multi-layered security protocols for robust protection."
+      },
+      {
+        "icon": "Grid",
+        "title": "Seamless Integration",
+        "description": "Easily integrates with popular productivity tools and platforms. Ensures smooth workflows with minimal disruption."
+      }
+    ]
+  },
+  "testimonialSection": {
+    "subtitle": "CLIENT FEEDBACK",
+    "title": "What our clients say about Cloudtopiaa",
+    "testimonials": [
+      {
+        "id": 1,
+        "name": "Rajesh Iyer",
+        "role": "CTO, IT Services, Bangalore",
+        "rating": 5,
+        "text": "We needed a cloud provider that wouldn't give us a heart attack every month with surprise charges. Cloudtopiaa has been a relief—good performance, stable pricing, and no hidden costs. Plus, their support actually listens, which is a big plus. So far, really happy with the switch."
+      }
+    ],
+    "profileImages": [
+      "/images/products/details/cloudtopia-1.webp",
+      "/images/products/details/codenik-4.webp",
+      "/images/products/details/website-hosting-concept-with-cloud.webp",
+      "/images/products/details/cloudtopia-1.webp",
+      "/images/products/details/codenik-4.webp"
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/codenuk.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/codenuk.json
new file mode 100644
index 0000000..86ca5c0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/codenuk.json
@@ -0,0 +1,255 @@
+{
+  "hero": {
+    "category": "DEVELOPMENT PLATFORM",
+    "title": "Transform your development with ",
+    "subtitle": "Smart Innovation",
+    "description": "Build and deploy faster with our comprehensive development tools and solutions.",
+    "buttonText": "Start Building",
+   "cards": [
+    {
+      "icon": "Grid",
+      "title": "Code Management",
+      "description": "Advanced version control with robust Git integration. Tools for organizing and managing codebases effectively."
+    },
+    {
+      "icon": "Layout",
+      "title": "CI/CD Pipeline",
+      "description": "Automated build and deployment workflows. Streamlined continuous integration for faster releases."
+    },
+    {
+      "icon": "BarChart2",
+      "title": "Performance Analytics",
+      "description": "Real-time tracking of application performance. Tools to identify and optimize performance bottlenecks."
+    },
+    {
+      "icon": "GitBranch",
+      "title": "Team Collaboration",
+      "description": "Seamless tools for real-time collaboration and task management. Shared workspaces to enhance team productivity."
+    }
+  ]
+  },
+  "serviceBenefits": {
+    "release": {
+      "id": "release",
+      "title": "Speed",
+      "icon": "Zap",
+      "mainTitle": "Build and Deploy Projects in Minutes, Not Hours",
+      "description": "Accelerate development and deployment to stay ahead of the competition.",
+      "image": "/images/products/details/codenuk/codenukZapspeed.webp",
+      "bullets": [
+        {
+          "title": "Quick Development",
+          "description": "Launch projects in record time with rapid deployment tools"
+        },
+        {
+          "title": "Instant Scaling",
+          "description": "Adapt to changes on the fly, improving responsiveness"
+        },
+        {
+          "title": "Efficient Workflow",
+          "description": "Streamline processes to minimize delays and increase productivity"
+        }
+      ]
+    },
+    "analytic": {
+      "id": "analytic",
+      "title": "Collaboration",
+      "icon": "Users",
+      "mainTitle": "Real-Time Tools to Unify Distributed Teams",
+      "description": "Enhance communication and collaboration for teams anywhere in the world.",
+      "image": "/images/products/details/codenuk/codenukCollaboration.webp",
+      "bullets": [
+        {
+          "title": "Seamless Communication",
+          "description": "Stay connected with your team no matter the distance"
+        },
+        {
+          "title": "Shared Resources",
+          "description": "Collaborate effortlessly on documents and files in real-time"
+        },
+        {
+          "title": "Enhanced Productivity",
+          "description": "Boost team collaboration and decision-making with intuitive tools"
+        }
+      ]
+    },
+    "scalability": {
+      "id": "scalability",
+      "title": "Scalability",
+      "icon": "ArrowUpRight",
+      "mainTitle": "Tailored Solutions to Grow With Your Projects",
+      "description": "Effortlessly expand and adjust resources as your projects evolve.",
+      "image": "/images/products/details/codenuk/codenukScalability.webp",
+      "bullets": [
+        {
+          "title": "Flexible Architecture",
+          "description": "Scale resources dynamically to match your growing project needs"
+        },
+        {
+          "title": "Custom Solutions",
+          "description": "Choose configurations and tools that align with your business objectives"
+        },
+        {
+          "title": "Effortless Expansion",
+          "description": "Expand your infrastructure smoothly without disrupting ongoing work"
+        }
+      ]
+    },
+    "reliability": {
+      "id": "reliability",
+      "title": "Reliability",
+      "icon": "Shield",
+      "mainTitle": "Ensuring Stability and Security for Your Projects",
+      "description": "Count on dependable systems to keep your work safe and operational.",
+      "image": "/images/products/details/codenuk/codenukReliablity.webp",
+      "bullets": [
+        {
+          "title": "Robust Infrastructure",
+          "description": "Minimize downtime with resilient architecture"
+        },
+        {
+          "title": "Data Integrity",
+          "description": "Safeguard your project data with automatic backups"
+        },
+        {
+          "title": "Secure Operations",
+          "description": "Enjoy peace of mind with enterprise-grade security protocols"
+        }
+      ]
+    }
+  },
+  "contactForm": {
+    "header": {
+      "title": "Contact Us",
+      "description": "We're here to assist you! Whether you have questions, feedback, or inquiries, our team is ready to help."
+    },
+    "cards": [
+      {
+        "icon": "IoCallOutline",
+        "title": "Support",
+        "description": "We Provide Various Methods For You To Carry Out All Transactions Related To Your Finances"
+      },
+      {
+        "icon": "HiOutlineMail",
+        "title": "Pagedone Blog",
+        "description": "We have the most up-to-date security to support the security of all our customers in carrying out all transactions."
+      }
+    ],
+    "rating": {
+      "stars": 5,
+      "score": "4.9",
+      "reviews": "163",
+      "platform": "Trustpilot"
+    },
+    "form": {
+      "fields": {
+        "name": {
+          "label": "Name",
+          "placeholder": "harsh"
+        },
+        "email": {
+          "label": "Email",
+          "placeholder": "Enter Your Email"
+        },
+        "message": {
+          "label": "Message",
+          "placeholder": "Write your message"
+        }
+      },
+      "submitButton": "Send message"
+    }
+  },
+  "newsletterStats": {
+    "newsletter": {
+      "title": "Developer Updates & Insights",
+      "description": "Get the latest development tips, best practices, and platform updates delivered to your inbox",
+      "inputPlaceholder": "developer@company.com",
+      "buttonText": "Join Newsletter",
+      "images": {
+        "main": "/dev-platform.jpg",
+        "sub1": "/coding.jpg",
+        "sub2": "/deployment.jpg"
+      }
+    },
+    "stats": {
+      "title": "Platform Metrics",
+      "description": "Empowering developers worldwide",
+      "items": [
+        { "number": "260+", "title": "Expert Consultants" },
+        { "number": "975+", "title": "Active Clients" },
+        { "number": "724+", "title": "Projects Delivered" },
+        { "number": "89+", "title": "Orders in Queue" }
+      ]
+    }
+  },
+  "featureSection": {
+    "header": {
+      "subtitle": "OUR FEATURES",
+      "title": "Build and deploy in",
+      "highlightText": "Minutes",
+      "titleSuffix": "not hours."
+    },
+    
+      "features": [
+        {
+          "icon": "Code",
+          "title": "Intelligent Development Tools",
+          "description": "Smart code suggestions and automated refactoring. Built-in debugging and error detection."
+        },
+        {
+          "icon": "Shield",
+          "title": "Secure and Reliable Pipelines",
+          "description": "Integrated security scanning for vulnerabilities. Reliable and fault-tolerant deployment mechanisms."
+        },
+        {
+          "icon": "Layout",
+          "title": "User-Friendly Interface",
+          "description": "Intuitive dashboards for effortless navigation. Minimal learning curve for developers of all levels."
+        },
+        {
+          "icon": "Monitor",
+          "title": "Multi-Platform Support",
+          "description": "Compatibility with major operating systems and development environments. Desktop and web-based versions for flexibility."
+        }
+      ],
+    
+    "cta": {
+      "text": "Start building your next project in minutes with our comprehensive development tools",
+      "buttonText": "Start Coding",
+      "terms": "*Terms & Conditions apply"
+    },
+    "additionalFeatures": [
+      {
+        "icon": "BarChart2",
+        "title": "Advanced Metrics",
+        "description": "Customizable performance monitoring dashboards and insights for informed decision-making"
+      },
+      {
+        "icon": "Users",
+        "title": "Collaborative Development",
+        "description": "Real-time team collaboration tools with version control and change tracking"
+      }
+    ]
+  },
+  "testimonialSection": {
+    "subtitle": "WHAT THEY SAY",
+    "title": "Our clients feedback",
+    "testimonials": [
+      {
+        "id": 1,
+        "name": "David Chen",
+        "role": "Lead Developer",
+        "rating": 5,
+        "text": "The development platform has transformed how our team works. The CI/CD pipeline and code management tools are exceptional, saving us countless hours. The collaborative features have made remote development seamless, and the performance analytics help us maintain high standards. It's an essential tool for modern development teams.",
+        "image": "/images/products/details/codenik-1.webp"
+      }
+    ],
+    "profileImages": [
+      "/images/products/details/codenik-1.webp",
+      "/images/products/details/codenik-2.webp",
+      "/images/products/details/codenik-3.webp",
+      "/images/products/details/codenik-4.webp",
+      "/images/products/details/codenik-1.webp"
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/lms.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/lms.json
new file mode 100644
index 0000000..c1c06fa
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/lms.json
@@ -0,0 +1,252 @@
+{
+  "hero": {
+    "category": "LEARNING PLATFORM",
+    "title": "Transform education with ",
+    "subtitle": "Smart Learning",
+    "description": "Transform your organization's learning experience with our comprehensive LMS platform.",
+    "buttonText": "Start Learning",
+    "cards": [
+      {
+        "icon": "File",
+        "title": "Course Management",
+        "description": "Upload and organize video lessons, PDFs, and other materials. Set up structured learning paths for students."
+      },
+      {
+        "icon": "BookOpen",
+        "title": "Interactive Testing",
+        "description": "Create, pause, and reattempt tests with activity tracking. Dynamic dashboards for performance insights."
+      },
+      {
+        "icon": "Video",
+        "title": "Live Sessions",
+        "description": "Host one-to-many live video classes with integrated tools. Interactive features like Q&A and live polls."
+      },
+      {
+        "icon": "UserCheck",
+        "title": "Student Engagement Tools",
+        "description": "Track progress and analytics on individual dashboards. Notifications and reminders for better course engagement."
+      }
+    ]
+  },
+  "serviceBenefits": {
+    "flexibility": {
+      "id": "flexibility",
+      "title": "Flexibility",
+      "icon": "BookOpen",
+      "mainTitle": "Adaptable to Diverse Learning Environments",
+      "description": "Tailor the LMS to suit different educational settings, from schools to corporate training.",
+      "image": "/images/products/details/lms/LMSflexibility.webp",
+      "bullets": [
+        {
+          "title": "Versatile Platform",
+          "description": "Supports schools, universities, and corporate training programs with ease"
+        },
+        {
+          "title": "Customizable Learning",
+          "description": "Customizable features to fit various teaching and learning styles"
+        },
+        {
+          "title": "Scalable Solution",
+          "description": "Scalable to handle small groups or large organizations"
+        }
+      ]
+    },
+    "efficiency": {
+      "id": "efficiency",
+      "title": "Efficiency",
+      "icon": "BarChart2",
+      "mainTitle": "Streamline Learning Management",
+      "description": "Simplify course creation, tracking, and administration to save time and resources.",
+      "image": "/images/products/details/lms/LMSorganization.webp",
+      "bullets": [
+        {
+          "title": "Centralized Management",
+          "description": "Centralized tools to manage courses, students, and content effortlessly"
+        },
+        {
+          "title": "Automated Workflows",
+          "description": "Automated workflows to save time on administrative tasks"
+        },
+        {
+          "title": "Simplified Tracking",
+          "description": "Simplified tracking for progress and performance metrics"
+        }
+      ]
+    },
+    "engagement": {
+      "id": "engagement",
+      "title": "Engagement",
+      "icon": "Users",
+      "mainTitle": "Foster Active Learning",
+      "description": "Enhance student involvement with interactive features and real-time progress tracking.",
+      "image": "/images/products/details/lms/LMScollaboration.webp",
+      "bullets": [
+        {
+          "title": "Interactive Learning",
+          "description": "Enables live interactions, discussions, and Q&A sessions to enhance engagement"
+        },
+        {
+          "title": "Progress Tracking",
+          "description": "Progress tracking tools keep learners motivated and on track"
+        },
+        {
+          "title": "Rich Media Support",
+          "description": "Multimedia integration for an enriched and dynamic learning experience"
+        }
+      ]
+    },
+    "support": {
+      "id": "support",
+      "title": "Support",
+      "icon": "Headphones",
+      "mainTitle": "Reliable Assistance Every Step of the Way",
+      "description": "Receive expert help and post-deployment support to ensure smooth, ongoing operations.",
+      "image": "/images/products/details/lms/LMSreliability.webp",
+      "bullets": [
+        {
+          "title": "Dedicated Support",
+          "description": "Comprehensive post-deployment support for smooth operations"
+        },
+        {
+          "title": "Expert Assistance",
+          "description": "Expert helpdesk to resolve technical issues quickly"
+        },
+        {
+          "title": "Regular Updates",
+          "description": "Regular updates to keep the LMS secure and up-to-date"
+        }
+      ]
+    }
+  },
+  "contactForm": {
+    "header": {
+      "title": "Transform Your Learning",
+      "description": "Ready to revolutionize your organization's learning experience? Let's discuss your needs."
+    },
+    "cards": [
+      {
+        "icon": "IoCallOutline",
+        "title": "Training Support",
+        "description": "Get expert guidance on implementing effective learning strategies"
+      },
+      {
+        "icon": "HiOutlineMail",
+        "title": "Demo Request",
+        "description": "Schedule a personalized demo of our LMS platform"
+      }
+    ],
+    "rating": {
+      "stars": 5,
+      "score": "4.9",
+      "reviews": "178",
+      "platform": "Trustpilot"
+    },
+    "form": {
+      "fields": {
+        "name": {
+          "label": "Name",
+          "placeholder": "Enter your name"
+        },
+        "email": {
+          "label": "Email",
+          "placeholder": "Enter your work email"
+        },
+        "message": {
+          "label": "Message",
+          "placeholder": "Tell us about your learning needs"
+        }
+      },
+      "submitButton": "Schedule Demo"
+    }
+  },
+  "newsletterStats": {
+    "newsletter": {
+      "title": "Stay Updated with Learning Trends",
+      "description": "Subscribe to our newsletter for the latest in e-learning innovations and best practices",
+      "inputPlaceholder": "Enter your email",
+      "buttonText": "Subscribe",
+      "images": {
+        "main": "/learning-platform.jpg",
+        "sub1": "/e-learning.jpg",
+        "sub2": "/digital-education.jpg"
+      }
+    },
+    "stats": {
+      "title": "Learning Impact",
+      "description": "Transforming organizations through effective learning",
+      "items": [
+        { "number": "1M+", "title": "Active Learners" },
+        { "number": "95%", "title": "Completion Rate" },
+        { "number": "40%", "title": "Performance Boost" },
+        { "number": "200+", "title": "Course Templates" }
+      ]
+    }
+  },
+  "featureSection": {
+    "header": {
+      "subtitle": "OUR FEATURE",
+      "title": "Simplifying and",
+      "highlightText": "Enhancing",
+      "titleSuffix": "Learning Experience"
+    },
+    "features": [
+      {
+        "icon": "Layout",
+        "title": "User-Friendly Interface",
+        "description": "Designed for educators and students alike. Simplifies course setup and navigation."
+      },
+      {
+        "icon": "Layers",
+        "title": "Comprehensive Learning Experience",
+        "description": "Seamless integration of video lessons, course materials, and tests. Real-time progress tracking with visual dashboards."
+      },
+      {
+        "icon": "Scale",
+        "title": "Scalability",
+        "description": "Suitable for small institutes to large EdTech platforms. Supports thousands of simultaneous users without lag."
+      },
+      {
+        "icon": "ShieldCheck",
+        "title": "Secure and Reliable",
+        "description": "Built-in security measures to protect data and content. Reliable infrastructure for uninterrupted learning."
+      }
+    ],
+    "cta": {
+      "text": "Get quoted and covered in under 10 minutes online. no paperwork or waiting any more",
+      "buttonText": "Get Started",
+      "terms": "*Terms & Conditions apply"
+    },
+    "additionalFeatures": [
+      {
+        "icon": "Settings",
+        "title": "Customization Options",
+        "description": "Tailor the platform to match your branding and curriculum needs. Flexible modules to fit diverse teaching styles."
+      },
+      {
+        "icon": "HeadphonesIcon",
+        "title": "Comprehensive Support",
+        "description": "24/7 assistance to resolve technical issues promptly. Expert guidance for platform optimization."
+      }
+    ]
+  },
+  "testimonialSection": {
+    "subtitle": "CLIENT FEEDBACK",
+    "title": "What our clients say about our LMS",
+    "testimonials": [
+      {
+        "id": 1,
+        "name": "Director of Training",
+        "role": "Cybersecurity Institute, Mumbai",
+        "rating": 4,
+        "text": "We needed a secure and flexible LMS to host our cybersecurity certification courses, and this platform provided exactly that. The ability to customize branding, course structures, and certification workflows made it easy for us to launch a professional training program. Our students love the smooth UI and interactive learning experience!"
+      }
+    ],
+    "profileImages": [
+      "/images/products/details/lms-1.webp",
+      "/images/products/details/lms-2.webp",
+      "/images/products/details/lms-3.webp",
+      "/images/products/details/lms-4.webp",
+      "/images/products/details/lms-1.webp"
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/productSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/productSchema.json
new file mode 100644
index 0000000..880b56e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/config/productSchema.json
@@ -0,0 +1,56 @@
+{
+  "cloudriv": {
+    "@context": "https://schema.org/",
+    "@type": "SoftwareApplication",
+    "applicationCategory": "CloudStorage",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD",
+      "availability": "https://schema.org/InStock"
+    },
+    "aggregateRating": {
+      "@type": "AggregateRating",
+      "ratingValue": "4.9",
+      "ratingCount": "203",
+      "bestRating": "5",
+      "worstRating": "1"
+    }
+  },
+  "cloudtopiaa": {
+    "@context": "https://schema.org/",
+    "@type": "SoftwareApplication",
+    "applicationCategory": "CloudPlatform",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD",
+      "availability": "https://schema.org/InStock"
+    },
+    "aggregateRating": {
+      "@type": "AggregateRating",
+      "ratingValue": "4.9",
+      "ratingCount": "245",
+      "bestRating": "5",
+      "worstRating": "1"
+    }
+  },
+  "lms": {
+    "@context": "https://schema.org/",
+    "@type": "SoftwareApplication",
+    "applicationCategory": "EducationalApplication",
+    "offers": {
+      "@type": "Offer",
+      "price": "0",
+      "priceCurrency": "USD",
+      "availability": "https://schema.org/InStock"
+    },
+    "aggregateRating": {
+      "@type": "AggregateRating",
+      "ratingValue": "4.9",
+      "ratingCount": "178",
+      "bestRating": "5",
+      "worstRating": "1"
+    }
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useActiveTab.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useActiveTab.js
new file mode 100644
index 0000000..1c5f4c4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useActiveTab.js
@@ -0,0 +1,7 @@
+import { useState } from 'react';
+
+export const useActiveTab = (initialTab) => {
+  const [activeTab, setActiveTab] = useState(initialTab);
+  
+  return { activeTab, setActiveTab };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useContactForm.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useContactForm.js
new file mode 100644
index 0000000..4a4468b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useContactForm.js
@@ -0,0 +1,96 @@
+import { useState } from 'react';
+
+export const useContactForm = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: ''
+  });
+
+  const [errors, setErrors] = useState({
+    name: '',
+    email: '',
+    message: ''
+  });
+
+  const validateForm = () => {
+    let isValid = true;
+    const newErrors = {
+      name: '',
+      email: '',
+      message: ''
+    };
+
+    // Name validation
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+      isValid = false;
+    } else if (formData.name.length < 2) {
+      newErrors.name = 'Name must be at least 2 characters';
+      isValid = false;
+    }
+
+    // Email validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!formData.email.trim()) {
+      newErrors.email = 'Email is required';
+      isValid = false;
+    } else if (!emailRegex.test(formData.email)) {
+      newErrors.email = 'Please enter a valid email';
+      isValid = false;
+    }
+
+    // Message validation
+    if (!formData.message.trim()) {
+      newErrors.message = 'Message is required';
+      isValid = false;
+    } else if (formData.message.length < 10) {
+      newErrors.message = 'Message must be at least 10 characters';
+      isValid = false;
+    }
+
+    setErrors(newErrors);
+    return isValid;
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: ''
+      }));
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (validateForm()) {
+      try {
+
+        
+        // Clear form after successful submission
+        setFormData({
+          name: '',
+          email: '',
+          message: ''
+        });
+      } catch (error) {
+        console.error('Error submitting form:', error);
+      }
+    }
+  };
+
+  return {
+    formData,
+    errors,
+    handleInputChange,
+    handleSubmit
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useNewsletterForm.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useNewsletterForm.js
new file mode 100644
index 0000000..2ed554d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useNewsletterForm.js
@@ -0,0 +1,20 @@
+import { useState, useCallback } from 'react';
+
+export const useNewsletterForm = () => {
+  const [email, setEmail] = useState('');
+
+  const handleEmailChange = useCallback((e) => {
+    setEmail(e.target.value);
+  }, []);
+
+  const handleSubmit = useCallback((e) => {
+    e.preventDefault();
+    setEmail('');
+  }, []);
+
+  return {
+    email,
+    handleEmailChange,
+    handleSubmit
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useVideoPlayer.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useVideoPlayer.js
new file mode 100644
index 0000000..c6f3560
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/hooks/useVideoPlayer.js
@@ -0,0 +1,55 @@
+import { useState, useRef, useEffect } from 'react';
+
+export const useVideoPlayer = () => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const videoRef = useRef(null);
+
+  const handlePlayClick = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+      } else {
+        videoRef.current.play();
+      }
+      setIsPlaying(!isPlaying);
+    }
+  };
+
+  const handleTimeUpdate = () => {
+    if (videoRef.current) {
+      const progress = (videoRef.current.currentTime / videoRef.current.duration) * 100;
+      setProgress(progress);
+    }
+  };
+
+  const handleVideoEnd = () => {
+    setIsPlaying(false);
+    if (videoRef.current) {
+      videoRef.current.currentTime = 0;
+    }
+  };
+
+  useEffect(() => {
+    const videoElement = videoRef.current;
+    
+    if (videoElement) {
+      videoElement.addEventListener('timeupdate', handleTimeUpdate);
+      videoElement.addEventListener('ended', handleVideoEnd);
+    }
+
+    return () => {
+      if (videoElement) {
+        videoElement.removeEventListener('timeupdate', handleTimeUpdate);
+        videoElement.removeEventListener('ended', handleVideoEnd);
+      }
+    };
+  }, []);
+
+  return { 
+    isPlaying, 
+    progress,
+    videoRef,
+    handlePlayClick 
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/index.jsx
new file mode 100644
index 0000000..78cfd6b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/index.jsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { useParams, Navigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import { motion } from 'framer-motion';
+import HeroSection from './sections/HeroSection';
+import ServiceBenefitSection from './sections/ServiceBenefitSection';
+import TestimonialSection from './sections/TestimonialSection';
+import NewsletterStatsSection from './sections/NewsletterStatsSection';
+import FeatureSection from './sections/FeatureSection';
+import { LoadingFallback } from '@components/common/LoadingFallback';
+import ScrollToTop from '@components/common/scroll/ScrollToTop';
+import ScrollToTopButton from '@components/common/scroll/ScrollToTopButton';
+
+// Import only the product schema data
+import productSchema from './config/productSchema.json';
+
+// Define the functions inline instead of importing
+const isValidProductId = (id) => VALID_PRODUCT_IDS.includes(id);
+const getProductName = (id) => PRODUCT_NAMES[id] || 'Product Not Found';
+
+// You'll need to define these constants as well
+const VALID_PRODUCT_IDS = ['cloudriv', 'cloudtopiaa', 'codenuk', 'lms'];
+const PRODUCT_NAMES = {
+  'cloudriv': 'CloudRiv Storage Solution',
+  'cloudtopiaa': 'Cloudtopiaa Platform',
+  'codenuk': 'Codenuk Development Platform',
+  'lms': 'Learning Management System'
+};
+
+const ProductDetail = () => {
+  const { productId } = useParams();
+  const [productData, setProductData] = useState(null);
+  const [schemaData, setSchemaData] = useState(null);
+
+  useEffect(() => {
+    const loadProductData = async () => {
+      try {
+        // Dynamically import the product configuration based on productId
+        const configModule = await import(`./config/${productId}.json`);
+        const loadedProductData = configModule.default || configModule;
+        
+        // Set the product data
+        setProductData(loadedProductData);
+        
+        // Create schema data by merging base schema with dynamic product data
+        if (productId && productSchema[productId]) {
+          const baseSchema = productSchema[productId];
+          
+          // Merge with dynamic product data
+          const dynamicSchema = {
+            ...baseSchema,
+            name: getProductName(productId),
+            description: loadedProductData.hero.description,
+            image: loadedProductData.newsletterStats.newsletter.images?.main || "",
+            operatingSystem: "Web, iOS, Android",
+            review: loadedProductData.testimonialSection.testimonials.map(t => ({
+              "@type": "Review",
+              "author": {
+                "@type": "Person",
+                "name": t.name
+              },
+              "reviewRating": {
+                "@type": "Rating",
+                "ratingValue": t.rating,
+                "bestRating": "5"
+              },
+              "reviewBody": t.text
+            }))
+          };
+          
+          setSchemaData(dynamicSchema);
+        }
+      } catch (error) {
+        console.error('Error loading product configuration:', error);
+        // Fallback to loading cloudriv if there's an error
+        import('./config/cloudriv.json').then(module => {
+          const defaultData = module.default || module;
+          setProductData(defaultData);
+        });
+      }
+    };
+
+    if (isValidProductId(productId)) {
+      loadProductData();
+    }
+  }, [productId]);
+
+  // Redirect if invalid product ID
+  if (!isValidProductId(productId)) {
+    return <Navigate to="/" replace />;
+  }
+
+  if (!productData) {
+    return <LoadingFallback />;
+  }
+
+  // Generate SEO meta tags
+  const productName = getProductName(productId);
+  const productDescription = productData.hero.description;
+  const canonicalUrl = `https://tech4bizsolutions.com/product/${productId}`;
+
+  return (
+    <>
+      <Helmet>
+        <title>{productName} | Tech4Biz</title>
+        <meta name="description" content={productDescription} />
+        <link rel="canonical" href={canonicalUrl} />
+        
+        {schemaData && (
+          <script type="application/ld+json">
+            {JSON.stringify(schemaData)}
+          </script>
+        )}
+      </Helmet>
+
+      <motion.main
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="min-h-screen bg-white"
+      >
+        <div className="flex flex-col">
+          {/* ScrollToTop component takes care of scrolling to top */}
+          <ScrollToTop/>
+          <ScrollToTopButton />
+          <HeroSection data={productData.hero} />
+          <ServiceBenefitSection data={productData.serviceBenefits} />
+          <FeatureSection data={productData.featureSection} />
+          <TestimonialSection data={productData} />
+          <NewsletterStatsSection data={productData.newsletterStats} />
+        </div>
+      </motion.main>
+    </>
+  );
+};
+
+export default ProductDetail; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/FeatureSection/icons.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/FeatureSection/icons.js
new file mode 100644
index 0000000..83d53b6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/FeatureSection/icons.js
@@ -0,0 +1,65 @@
+import {
+  // From lms.json
+  Grid,
+  Layout,
+  BarChart2,
+  GitBranch,
+
+  // From codenuk.json
+  Code,
+  Shield,
+  GitMerge,
+  Cpu,
+  Users,
+  BarChart,
+
+  // From cloudtopiaa.json
+  Cloud,
+  Server,
+  Database,
+  Wifi,
+
+  // From cloudriv.json
+  Globe,
+  Clock,
+  CheckCircle,
+  Zap,
+
+  // Additional icons
+  Monitor,
+  Settings,
+  Layers,
+  DollarSign
+} from 'lucide-react';
+
+export const iconMap = {
+  Grid,
+  Layout,
+  BarChart2,
+  GitBranch,
+  Code,
+  Shield,
+  GitMerge,
+  Cpu,
+  Users,
+  BarChart,
+  Cloud,
+  Server,
+  Database,
+  Wifi,
+  Globe,
+  Clock,
+  CheckCircle,
+  Zap,
+  Monitor,
+  Settings,
+  Layers,
+  DollarSign,
+  // Map similar icons for missing ones
+  LayoutGrid: Grid,
+  Wallet: DollarSign,
+  HeadphonesIcon: Cpu, // Using Cpu as fallback
+  Scale: BarChart, // Using BarChart as fallback
+  HardDrive: Server, // Using Server as fallback
+  ShieldCheck: Shield // Using Shield as fallback
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/FeatureSection/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/FeatureSection/index.jsx
new file mode 100644
index 0000000..e85fd5c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/FeatureSection/index.jsx
@@ -0,0 +1,128 @@
+import React, { memo, useMemo, useState } from 'react';
+import { motion } from 'framer-motion';
+import { iconMap } from './icons';
+import CRMModalForm from '@components/modals/CRMModalForm';
+
+const FeatureSection = memo(({ data }) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  
+  if (!data || !data.header) {
+    return null;
+  }
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2
+      }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: {
+        duration: 0.5
+      }
+    }
+  };
+
+  const renderIcon = useMemo(() => (iconName) => {
+    const IconComponent = iconMap[iconName];
+    return IconComponent ? <IconComponent className="w-6 h-6 text-[#2d2d2d]" /> : null;
+  }, []);
+
+  const featuresContent = useMemo(() => (
+    data.features.map((feature, index) => (
+      <motion.div
+        key={index}
+        variants={itemVariants}
+        className="p-6 rounded-lg border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300"
+      >
+        <div className="space-y-4">
+          <div>{renderIcon(feature.icon)}</div>
+          <h3 className="font-semibold text-lg">{feature.title}</h3>
+          <p className="text-gray-600 text-sm">{feature.description}</p>
+        </div>
+      </motion.div>
+    ))
+  ), [data.features, renderIcon, itemVariants]);
+
+  const additionalFeaturesContent = useMemo(() => (
+    data.additionalFeatures.map((feature, index) => (
+      <motion.div
+        key={index}
+        variants={itemVariants}
+        className="p-6 rounded-lg border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300"
+      >
+        <div className="space-y-4">
+          <div>{renderIcon(feature.icon)}</div>
+          <h3 className="font-semibold text-lg">{feature.title}</h3>
+          <p className="text-gray-600 text-sm">{feature.description}</p>
+        </div>
+      </motion.div>
+    ))
+  ), [data.additionalFeatures, renderIcon, itemVariants]);
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <section className="py-9 px-4 md:px-8 max-w-7xl mx-auto">
+      <motion.div
+        initial="hidden"
+        animate="visible"
+        variants={containerVariants}
+        className="space-y-8"
+      >
+        <div className="space-y-4">
+          <p className="text-sm font-medium text-gray-600">{data.header.subtitle}</p>
+          <h2 className="text-3xl md:text-4xl font-bold">
+            {data.header.title} <span className="text-[#2d2d2d]">{data.header.highlightText}</span> {data.header.titleSuffix}
+          </h2>
+        </div>
+
+        <motion.div 
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+          variants={containerVariants}
+        >
+          {featuresContent}
+        </motion.div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          <div className="lg:col-span-2 space-y-4">
+            <p className="text-lg text-gray-700">{data.cta.text}</p>
+            <div className="space-y-2">
+              <button 
+                className="bg-[#F97316] text-white px-6 py-2 rounded-md hover:bg-[#ed7f32] transition-colors duration-300"
+                onClick={handleOpenModal}
+              >
+                {data.cta.buttonText}
+              </button>
+              <p className="text-sm text-gray-500">{data.cta.terms}</p>
+            </div>
+          </div>
+          
+          {additionalFeaturesContent}
+        </div>
+      </motion.div>
+      
+      <CRMModalForm 
+        isVisible={isModalOpen} 
+        onClose={handleCloseModal} 
+        source="Feature Section CTA" 
+      />
+    </section>
+  );
+});
+
+export default FeatureSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/HeroSection/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/HeroSection/index.jsx
new file mode 100644
index 0000000..965c138
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/HeroSection/index.jsx
@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { File, BookOpen, Video, UserCheck, Cpu, HardDrive, Wifi, Cloud, Calendar, Database, Network, Wrench, Zap } from 'lucide-react';
+import { Grid, BarChart2, GitBranch, Layout } from 'lucide-react';
+import CRMModalForm from '@components/modals/CRMModalForm';
+import { Link } from 'react-router-dom';
+
+const GradientMeshHero = ({ data = {} }) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  
+  const openModal = () => {
+    setIsModalVisible(true);
+  };
+  
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+  };
+  
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+    },
+  };
+
+  return (
+    <>
+      <div className="relative h-[fit-content] overflow-hidden">
+        {/* Animated gradient background */}
+        <div className="absolute inset-0 bg-gradient-to-br from-[#2d2d2d] via-[#1d1d1d] to-[#2d2d2d] animate-gradient">
+          <div className="absolute inset-0 opacity-20">
+            {[...Array(20)].map((_, i) => (
+              <div
+                key={i}
+                className="absolute rounded-full mix-blend-multiply"
+                style={{
+                  left: `${Math.random() * 100}%`,
+                  top: `${Math.random() * 100}%`,
+                  width: `${Math.random() * 400 + 100}px`,
+                  height: `${Math.random() * 400 + 100}px`,
+                  background: `radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%)`,
+                  animation: `float ${Math.random() * 10 + 10}s infinite linear`
+                }}
+              />
+            ))}
+          </div>
+        </div>
+
+        {/* Content */}
+        <div className="min-h-[60%] bg-gradient-to-br from-[#1d1d1d] to-[#2d2d2d] relative overflow-hidden">
+          {[...Array(20)].map((_, i) => (
+            <motion.div
+              key={i}
+              className="absolute rounded-full border border-white/10"
+              style={{
+                width: `${(i + 1) * 10}%`,
+                height: `${(i + 1) * 10}%`,
+                top: '50%',
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+              }}
+              animate={{
+                rotate: 360,
+                scale: [1, 1.1, 1],
+              }}
+              transition={{
+                duration: 20 + i,
+                repeat: Infinity,
+                ease: "linear",
+              }}
+            />
+          ))}
+
+          <div className="relative container mx-auto px-4 py-12 md:py-20">
+            <div className="relative h-full flex items-center justify-center px-2 md:px-4">
+              <div className="text-center max-w-5xl">
+                <motion.h1 
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-4 md:mb-6 px-2"
+                >
+                  {data.title || 'Blending Passion and Precision for'}<br />
+                  {data.subtitle || 'Seamless Digital Experiences'}
+                </motion.h1>
+                <motion.p 
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.2 }}
+                  className="text-lg sm:text-xl md:text-2xl text-white/90 mb-6 md:mb-8 px-4"
+                >
+                  Create stunning experiences that captivate your audience
+                </motion.p>
+                <motion.div 
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.4 }}
+                  className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:space-x-4"
+                >
+                  <button onClick={() => openModal(true)} className="w-full sm:w-auto px-6 py-2 bg-white text-black rounded-full font-semibold transition-all">
+                    Get Started
+                  </button>
+                  <button className="w-full sm:w-auto px-6 py-2 bg-[transparent] border-2 border-white text-white rounded-full font-semibold hover:bg-white/10 transition-all">
+                    <Link to='/contact'>
+                      Learn More
+                    </Link>
+                  </button>
+                </motion.div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <motion.div
+        className="max-w-7xl mx-auto text-center"
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+      >
+        <motion.div 
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mt-12 md:mt-20 px-4 md:px-6"
+          variants={containerVariants}
+        >
+          {(data.cards || []).map((card, index) => (
+            <motion.div
+              key={index}
+              variants={itemVariants}
+              className="p-6 rounded-2xl bg-gray-50 hover:bg-gray-100 transition-colors duration-300"
+              whileHover={{ y: -5 }}
+            >
+              <div className="w-12 h-12 rounded-full bg-[#2563eb] text-white flex items-center justify-center mb-4 mx-auto">
+                {card.icon === 'Grid' && <Grid className="w-6 h-6" />}
+                {card.icon === 'Layout' && <Layout className="w-6 h-6" />}
+                {card.icon === 'BarChart2' && <BarChart2 className="w-6 h-6" />}
+                {card.icon === 'GitBranch' && <GitBranch className="w-6 h-6" />}
+                {card.icon === 'File' && <File className="w-6 h-6" />}
+                {card.icon === 'Video' && <Video className="w-6 h-6" />}
+                {card.icon === 'BookOpen' && <BookOpen className="w-6 h-6" />}
+                {card.icon === 'Cpu' && <Cpu className="w-6 h-6" />}
+                {card.icon === 'HardDrive' && <HardDrive className="w-6 h-6" />}
+                {card.icon === 'Wifi' && <Wifi className="w-6 h-6" />}
+                {(card.icon === 'Cloud' || card.icon === 'Cloudtopia') && <Cloud className="w-6 h-6" />}
+                {card.icon === 'Zap' && <Zap className="w-6 h-6" />}
+                {card.icon === 'Calendar' && <Calendar className="w-6 h-6" />}
+                {card.icon === 'Database' && <Database className="w-6 h-6" />}
+                {card.icon === 'Network' && <Network className="w-6 h-6" />}
+                {card.icon === 'Wrench' && <Wrench className="w-6 h-6" />}
+                {card.icon === 'UserCheck' && <UserCheck className="w-6 h-6" />}
+              </div>
+              <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                {card.title}
+              </h3>
+              <p className="text-gray-600">
+                {card.description}
+              </p>
+            </motion.div>
+          ))}
+        </motion.div>
+        <CRMModalForm
+          isVisible={isModalVisible}
+          onClose={handleModalClose}
+          source="Product Detail Banner" 
+        />
+      </motion.div>
+    </>
+  );
+};
+
+export default GradientMeshHero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/ImageGrid.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/ImageGrid.jsx
new file mode 100644
index 0000000..2223279
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/ImageGrid.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export const ImageGrid = ({ images }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: 20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.6 }}
+      className="grid grid-cols-2 gap-4"
+    >
+      <img
+        src="/images/products/details/ns-last.webp"
+        alt="Team meeting"
+        className="w-full h-full object-cover rounded-lg col-span-2"
+      />
+    </motion.div>
+  );
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/NewsletterForm.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/NewsletterForm.jsx
new file mode 100644
index 0000000..a0616b2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/NewsletterForm.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { notification } from 'antd';
+import { useFormHandler } from '@/pages/detail-pages/ourServicesDetailPage/utils/subscription';
+import { subscribeToNewsletter } from '@/utils/newsletterApi';
+
+export const NewsletterForm = ({ placeholder = "Enter your mail..", buttonText = "Subscribe" }) => {
+  const located = "Product Details Page Newsletter"; // Example located prop
+
+  const { email, error, handleInputChange, submitForm, resetForm } = useFormHandler({
+    located,
+    handleSubmit: subscribeToNewsletter,
+  });
+
+  return (
+   <>
+    <div className="flex flex-col sm:flex-row gap-2 max-w-md w-full">
+      <input
+        type="email"
+        placeholder={placeholder}
+        className="flex-1 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"
+        value={email}
+        onChange={handleInputChange}
+      />
+
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={submitForm}
+        className="px-6 py-2 bg-[#F97316] text-white rounded-lg hover:bg-[#ed7f32] transition-colors w-full sm:w-auto"
+      >
+        {buttonText}
+      </motion.button>
+    </div>
+    <p>{error && <p className="text-red-500 mt-2">{error}</p>}</p>
+   </>
+  );
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/StatsSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/StatsSection.jsx
new file mode 100644
index 0000000..092e8a0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/StatsSection.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+export const StatsSection = ({ stats }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.6 }}
+      className="bg-gray-50 rounded-2xl p-8 lg:p-12"
+    >
+      <div className="max-w-3xl mx-auto text-center mb-12">
+        <h3 className="text-3xl font-bold text-gray-900 mb-1">{stats.title}</h3>
+        <p className="text-gray-600 mb-8">{stats.description}</p>
+        
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
+          {stats.items.map((stat, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: index * 0.1 }}
+              className="text-center"
+            >
+              <motion.p
+                className="block text-3xl font-bold text-[#2d2d2d] mb-2"
+                whileHover={{ scale: 1.1 }}
+                transition={{ type: "spring", stiffness: 400, damping: 10 }}
+              >
+                {stat.number}
+              </motion.p>
+              <p className="text-gray-600">{stat.title}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </motion.div>
+  );
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/index.jsx
new file mode 100644
index 0000000..13e053d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/NewsletterStatsSection/index.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { NewsletterForm } from './NewsletterForm';
+import { StatsSection } from './StatsSection';
+import { ImageGrid } from './ImageGrid';
+
+const NewsletterStatsSection = ({ data }) => {
+  const { newsletter, stats } = data;
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
+      <StatsSection stats={stats} />
+      <div className="grid md:grid-cols-2 gap-8 items-center my-20">
+        <motion.div
+          initial={{ opacity: 0, x: -50 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5 }}
+          className="space-y-6"
+        >
+          <h2 className="text-4xl font-bold text-gray-900">{newsletter.title}</h2>
+          <p className="text-gray-600">{newsletter.description}</p>
+          <NewsletterForm 
+            placeholder={newsletter.inputPlaceholder}
+            buttonText={newsletter.buttonText}
+          />
+        </motion.div>
+
+        <ImageGrid images={newsletter.images} />
+      </div>
+    </div>
+  );
+};
+
+export default NewsletterStatsSection; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/ServiceBenefitSection/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/ServiceBenefitSection/index.jsx
new file mode 100644
index 0000000..ccb0efe
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/ServiceBenefitSection/index.jsx
@@ -0,0 +1,118 @@
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const ServiceBenefitSection = ({ data }) => {
+  // Add data validation
+  if (!data) {
+    return null; // or return a loading/error state component
+  }
+
+  // Convert the object into an array for easier mapping
+  const features = Object.entries(data || {}).map(([id, feature]) => ({
+    id,
+    title: feature.title,
+    icon: feature.icon,
+    mainTitle: feature.mainTitle,
+    description: feature.description,
+    image: feature.image,
+    bullets: feature.bullets || [] // Changed from 'benefits' to 'bullets' to match config
+  }));
+
+  // Only initialize state if we have features
+  const [activeFeature, setActiveFeature] = useState(features[0] || null);
+
+  // If no features are available, don't render the section
+  if (!features.length || !activeFeature) {
+    return null;
+  }
+
+  return (
+    <section className="py-8 md:py-12 px-4 max-w-7xl mx-auto">
+      <div className="text-center mb-8 md:mb-16">
+        <h2 className="text-2xl md:text-4xl font-bold mb-3 md:mb-4">
+          Comprehensive{' '}
+          <span className="text-[#2d2d2d]">Services and Benefits</span>
+        </h2>
+        <p className="text-gray-600 max-w-3xl mx-auto text-sm md:text-base">
+          We're committed to offering a suite of flexible, reliable, and powerful services that cater to your unique needs and go above and beyond your expectations.
+        </p>
+      </div>
+
+      <div className="flex flex-wrap justify-center gap-2 md:gap-4 mb-8 md:mb-16">
+        {features.map((feature) => (
+          <button
+            key={feature.id}
+            onClick={() => setActiveFeature(feature)}
+            className={`flex items-center px-3 md:px-6 py-2 md:py-3 rounded-lg transition-all hover:bg-gray-50 text-sm md:text-base ${
+              activeFeature.id === feature.id ? 'bg-indigo-50 text-indigo-600' : ''
+            }`}
+          >
+            <span className="mr-1 md:mr-2">{feature.icon}</span>
+            <span className="font-medium">{feature.title}</span>
+          </button>
+        ))}
+      </div>
+
+      <AnimatePresence mode="wait">
+        <motion.div
+          key={activeFeature.id}
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{ duration: 0.3 }}
+          className="grid md:grid-cols-2 gap-4 md:gap-8 items-center"
+          style={{ minHeight: "300px", md: { minHeight: "500px" } }}
+        >
+          <motion.div
+            initial={{ opacity: 0, x: -20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.2 }}
+            className="rounded-3xl overflow-hidden border-8 border-indigo-100 hidden md:block"
+            style={{ height: "400px" }}
+          >
+            <img
+              src={activeFeature.image}
+              alt={`${activeFeature.title} illustration`}
+              className="w-full h-full object-cover"
+              loading="lazy"
+              layout="responsive"
+            />
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.3 }}
+            className="space-y-4 md:space-y-6 col-span-full md:col-span-1"
+            style={{ minHeight: "200px", md: { minHeight: "400px" } }}
+          >
+            <h3 className="text-xl md:text-3xl font-bold">{activeFeature.mainTitle}</h3>
+            <p className="text-sm md:text-base text-gray-600">{activeFeature.description}</p>
+
+            <div className="space-y-3 md:space-y-4">
+              {activeFeature.bullets.map((bullet, index) => (
+                <motion.div
+                  key={index}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ delay: 0.4 + index * 0.1 }}
+                  className="flex items-start gap-2 md:gap-3"
+                >
+                  <div className="mt-1 flex-shrink-0 w-3 h-3 md:w-4 md:h-4 rounded-full bg-indigo-100 flex items-center justify-center">
+                    <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-[#2563EB]"></div>
+                  </div>
+                  <div>
+                    <h4 className="text-sm md:text-base font-medium">{bullet.title}</h4>
+                    <p className="text-xs md:text-sm text-gray-600">{bullet.description}</p>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        </motion.div>
+      </AnimatePresence>
+    </section>
+  );
+};
+
+export default ServiceBenefitSection; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/TestimonialSection/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/TestimonialSection/index.jsx
new file mode 100644
index 0000000..8c9bb54
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/sections/TestimonialSection/index.jsx
@@ -0,0 +1,79 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const TestimonialSection = ({ data }) => {
+  const { subtitle, title, testimonials } = data.testimonialSection;
+  // We'll just use the first testimonial
+  const testimonial = testimonials[0];
+
+  return (
+    <section className="py-20 bg-gradient-to-b from-gray-50 to-white">
+      <div className="max-w-5xl mx-auto px-4">
+        {/* Header */}
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-16"
+        >
+          <p className="text-[#F97316] mb-2 uppercase tracking-wider text-sm font-semibold">{subtitle}</p>
+          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 max-w-2xl mx-auto">{title}</h2>
+        </motion.div>
+        
+        {/* Testimonial */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+          className="relative max-w-4xl mx-auto"
+        >
+          <div className="absolute -top-6 left-0 md:-left-6 text-[#F97316] opacity-20">
+            <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14.4 24H8V32H16V40H8C5.87827 40 3.84344 39.1571 2.34315 37.6569C0.842855 36.1566 0 34.1217 0 32V24C0 21.8783 0.842855 19.8434 2.34315 18.3431C3.84344 16.8429 5.87827 16 8 16H14.4C15.4609 16 16.4783 16.4214 17.2284 17.1716C17.9786 17.9217 18.4 18.9391 18.4 20V28C18.4 29.0609 17.9786 30.0783 17.2284 30.8284C16.4783 31.5786 15.4609 32 14.4 32V24ZM38.4 24H32V32H40V40H32C29.8783 40 27.8434 39.1571 26.3431 37.6569C24.8429 36.1566 24 34.1217 24 32V24C24 21.8783 24.8429 19.8434 26.3431 18.3431C27.8434 16.8429 29.8783 16 32 16H38.4C39.4609 16 40.4783 16.4214 41.2284 17.1716C41.9786 17.9217 42.4 18.9391 42.4 20V28C42.4 29.0609 41.9786 30.0783 41.2284 30.8284C40.4783 31.5786 39.4609 32 38.4 32V24Z" fill="currentColor" fillOpacity="0.1"/>
+            </svg>
+          </div>
+          
+          <div className="relative z-10">
+            <div className="flex gap-1 mb-6 justify-center md:justify-start">
+              {[...Array(testimonial.rating)].map((_, index) => (
+                <motion.svg
+                  key={index}
+                  initial={{ opacity: 0, scale: 0 }}
+                  animate={{ opacity: 1, scale: 1 }}
+                  transition={{ delay: 0.1 * index }}
+                  className="w-6 h-6 text-yellow-400"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </motion.svg>
+              ))}
+            </div>
+            
+            <motion.p 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.4 }}
+              className="text-gray-700 text-base md:text-lg leading-relaxed mb-10 font-light text-center md:text-left"
+            >
+              "{testimonial.text}"
+            </motion.p>
+            
+            <motion.div 
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5 }}
+              className="flex items-center justify-center md:justify-start border-t border-gray-200 pt-6"
+            >
+              <div className="text-center md:text-left">
+                <h4 className="font-semibold text-gray-900 text-lg">{testimonial.name}</h4>
+                <p className="text-gray-500">{testimonial.role}</p>
+              </div>
+            </motion.div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default TestimonialSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/utils/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/utils/animations.js
new file mode 100644
index 0000000..2f6da5d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/utils/animations.js
@@ -0,0 +1,19 @@
+export const animations = {
+  fadeIn: {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    transition: { duration: 0.6, type: "tween" }
+  },
+
+  imageScale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.8, delay: 0.2, type: "spring", stiffness: 100, damping: 15 }
+  },
+
+  staggerContainer: {
+    initial: "initial",
+    animate: "animate",
+    viewport: { once: true, amount: 0.3 }
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/utils/iconComponents.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/utils/iconComponents.js
new file mode 100644
index 0000000..bf9c9e0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ProductDetailPage/utils/iconComponents.js
@@ -0,0 +1,19 @@
+import { 
+  BookOpen, 
+  BarChart, 
+  Cloud, 
+  Database,
+  Shield,
+  Box,
+  Share2
+} from 'react-feather';
+
+export const iconComponents = {
+  BookOpen,
+  BarChart,
+  Cloud,
+  Database,
+  Shield,
+  Box,
+  Share2
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/animations/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/animations/animations.js
new file mode 100644
index 0000000..ba6b5c9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/animations/animations.js
@@ -0,0 +1,46 @@
+export const slideAnimations = {
+  card: {
+    initial: { x: 100, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    transition: { duration: 0.5 }
+  },
+  button: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.3 }
+  }
+};
+
+export const aboutAnimations = {
+  container: {
+    hidden: { opacity: 0, x: -50 },
+    visible: { 
+      opacity: 1, 
+      x: 0, 
+      transition: { duration: 0.8, ease: "easeOut" } 
+    }
+  },
+  video: {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: { 
+      opacity: 1, 
+      scale: 1, 
+      transition: { duration: 0.5, ease: "easeOut" } 
+    },
+    exit: { 
+      opacity: 0, 
+      scale: 0.9, 
+      transition: { duration: 0.5, ease: "easeIn" } 
+    }
+  },
+  loading: {
+    initial: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.5 }
+  },
+  errorState: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.5 }
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/Hero.jsx
new file mode 100644
index 0000000..a278a40
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/Hero.jsx
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { HiOutlinePhotograph } from 'react-icons/hi';
+import CRMModalForm from "@components/modals/CRMModalForm";
+import softwareContent from "../config/softwareContent.json";
+import { useVideoPlayer } from "../hooks/useVideoPlayer";
+
+const Hero = ({ onModalToggle }) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  // Use the custom video hook for video loading logic
+  const { 
+    videoRef, 
+    isVideoPlaying, 
+    setIsVideoPlaying, 
+    isVideoLoading, 
+    isVideoError 
+  } = useVideoPlayer();
+  const { hero } = softwareContent;
+
+  // For the Hero component, auto-play the video on mount
+  useEffect(() => {
+    setIsVideoPlaying(true);
+  }, [setIsVideoPlaying]);
+
+  const openModal = () => {
+    setIsModalVisible(true);
+    onModalToggle(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+    onModalToggle(false);
+  };
+
+  return (
+    <>
+      <div className="hero-section ser-banner-sec bg-black text-white relative z-50">
+        <div className="relative w-full h-[750px] overflow-hidden">
+          <AnimatePresence>
+            {isVideoLoading && (
+              <motion.div
+                initial={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.5 }}
+                className="absolute top-0 left-0 w-full h-full bg-gray-800 flex items-center justify-center"
+              >
+                <div className="flex flex-col items-center">
+                  <HiOutlinePhotograph className="w-20 h-20 text-gray-600 animate-pulse" />
+                  <span className="text-gray-400 mt-4">Tech4Biz is loading...</span>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {!isVideoError ? (
+            <motion.video
+              ref={videoRef}
+              className={`absolute top-0 left-0 w-full h-full object-cover transition-opacity duration-500 ${
+                isVideoLoading ? 'opacity-0' : 'opacity-100'
+              }`}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: isVideoLoading ? 0 : 1 }}
+              transition={{ duration: 0.5 }}
+              src={hero.videoUrl}
+              autoPlay
+              loop
+              muted
+              playsInline
+              preload="metadata"
+              loading="lazy"
+            >
+              <source src={hero.videoUrl} type="video/mp4" />
+              Your browser does not support the video tag.
+            </motion.video>
+          ) : (
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="absolute top-0 left-0 w-full h-full bg-gray-900 flex items-center justify-center"
+            >
+              <div className="text-center">
+                <HiOutlinePhotograph className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+                <span className="text-gray-400">Unable to load video</span>
+              </div>
+            </motion.div>
+          )}
+
+          <div className="absolute top-0 left-0 w-full h-full bg-black/60" />
+
+          {/* Content Section */}
+          <motion.div 
+            className="absolute inset-0 max-w-6xl mx-auto py-12 md:px-12 mt-10 flex flex-col justify-start items-start text-left px-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <h4 className="text-sm font-light text-white mb-4">{hero.breadcrumb}</h4>
+            <hr className="mb-4 w-full border-t border-white/30" />
+            <h1 className="text-4xl md:text-4xl font-bold mb-6">
+              {hero.title}
+            </h1>
+
+            <p className="text-lg md:text-xl mb-8">
+              {hero.subtitle}
+            </p>
+
+            <button 
+              onClick={openModal} 
+              className="flex items-center gap-2 px-0 py-3 transition-transform duration-300 hover:translate-x-2"
+            >
+              <span className="text-white">{hero.ctaText}</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-10 w-10 rounded-3xl p-2 shadow-md bg-white text-black hover:bg-gray-100 transition-colors duration-300"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
+                />
+              </svg>
+            </button>
+          </motion.div>
+        </div>
+      </div>
+
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={handleModalClose}
+        source="Software Development Page Banner"
+      />
+    </>
+  );
+};
+
+export default Hero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/OurApproach.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/OurApproach.jsx
new file mode 100644
index 0000000..792b5ef
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/OurApproach.jsx
@@ -0,0 +1,38 @@
+import React, { memo } from 'react';
+import softwareContent from "../config/softwareContent.json";
+
+const OurApproach = () => {
+  const { approach } = softwareContent;
+
+  return (
+    <div className="relative z-10" style={{background:"#1F2937"}}>
+      <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-24 px-4 md:px-12">
+        <h4 className="text-3xl text-white font-medium text-left mb-8">{approach.title}</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {approach.items.map((item, index) => (
+            <div
+              key={index}
+              className="overflow-hidden flex flex-col justify-center items-center md:justify-start md:items-start"
+            >
+              <div className="img flex justify-center items-center md:justify-start md:items-start w-full">
+                <img
+                  style={{ filter: 'invert(1)' }}
+                  src={item.image}
+                  alt={`${item.title} - ${item.description}`}
+                  className="w-100 h-32 object-contain"
+                  loading="lazy"
+                />
+              </div>
+              <div className="py-6 px-0 text-white text-center md:text-left">
+                <h3 className="text-xl font-light mb-2">{item.title}</h3>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Memoize the component to prevent unnecessary re-renders
+export default memo(OurApproach);
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/ServiceInfo.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/ServiceInfo.jsx
new file mode 100644
index 0000000..a36c689
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/ServiceInfo.jsx
@@ -0,0 +1,101 @@
+import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
+import { motion } from 'framer-motion';
+import debounce from 'lodash/debounce';
+import softwareContent from "../config/softwareContent.json";
+
+const ServiceInfo = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [isSticky, setIsSticky] = useState(false);
+  const [isMobileSelectOpen, setIsMobileSelectOpen] = useState(false);
+  const sectionRefs = useRef([]);
+  const { services } = softwareContent;
+
+  // Memoize the scroll handler with debounce
+  const handleScroll = useCallback(
+    debounce(() => {
+      // Check sticky state
+      const element = document.getElementById('tabs-header');
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        setIsSticky(rect.top <= 0);
+      }
+
+      // Check active section
+      const scrollPosition = window.scrollY + 100;
+      sectionRefs.current.forEach((ref, index) => {
+        if (ref && ref.offsetTop <= scrollPosition && 
+            ref.offsetTop + ref.offsetHeight > scrollPosition) {
+          setActiveTab(index);
+        }
+      });
+    }, 100, { leading: true, maxWait: 200 }), // Add leading edge call and max wait time
+    []
+  );
+
+  // Memoize the section scroll handler
+  const scrollToSection = useCallback((index) => {
+    setIsMobileSelectOpen(false);
+    const sectionRef = sectionRefs.current[index];
+    if (sectionRef) {
+      const offset = isSticky ? 80 : 0;
+      window.scrollTo({
+        top: sectionRef.offsetTop - offset,
+        behavior: 'smooth'
+      });
+    }
+    setActiveTab(index);
+  }, [isSticky]);
+
+  // Add passive event listener for better scroll performance
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  return (
+    <div className='bg-white' style={{background:"#fff"}}>
+      <div className="min-h-screen">
+        <div 
+          id="tabs-header"
+          className={`transition-shadow duration-300 ${
+            isSticky ? 'sticky top-0 ' : ''
+          }`}
+        >
+          <div className="max-w-6xl mx-auto px-10 relative pt-24 md:pt-24 sm:pt-12 xs:pt-14 max-xs:pt-16">
+          </div>
+        </div>
+
+        <div className="max-w-6xl mx-auto py-12 px-8 md:px-">
+          {services.map((service, index) => (
+            <motion.div
+              key={service.id}
+              ref={el => sectionRefs.current[index] = el}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: "-100px" }}
+              transition={{ duration: 0.5 }}
+              className="bg-white py-6 px-2 mb-8"
+            >
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <h4 className="text-3xl font-medium text-gray-800">
+                    {service.title}
+                  </h4>
+                </div>
+                <p className="text-gray-600 leading-relaxed">
+                  {service.description}
+                </p>
+                <p className="text-gray-600 leading-relaxed">
+                  {service.descriptionTwo}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Memoize the component
+export default memo(ServiceInfo);
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftWareAbout.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftWareAbout.jsx
new file mode 100644
index 0000000..486cb07
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftWareAbout.jsx
@@ -0,0 +1,135 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Play } from "lucide-react";
+import { HiOutlinePhotograph } from 'react-icons/hi';
+import softwareContent from "../config/softwareContent.json";
+import { aboutAnimations } from '../animations/animations';
+import { useVideoPlayer } from "../hooks/useVideoPlayer";
+
+const SoftwareAbout = () => {
+  const { about } = softwareContent;
+  
+  // Use the custom video hook to manage video logic
+  const { 
+    videoRef, 
+    isVideoPlaying, 
+    setIsVideoPlaying, 
+    isVideoLoading, 
+    isVideoError 
+  } = useVideoPlayer();
+
+  const handleVideoClick = () => {
+    setIsVideoPlaying(true);
+  };
+
+  const handleCloseVideo = (e) => {
+    e.stopPropagation();
+    setIsVideoPlaying(false);
+  };
+
+  return (
+    <div className='bg-black' style={{ background: "#fff" }}>
+      <div className="flex flex-col-reverse md:flex-row items-center justify-between max-w-6xl mx-auto py-16 px-4 md:px-12">
+        <motion.div
+          className="w-full md:w-1/2 text-center md:text-left ps-0"
+          variants={aboutAnimations.container}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+        >
+          <h4 className="text-3xl font-medium text-gray-800 mb-4">{about.title}</h4>
+          <p className="text-gray-600 leading-relaxed">{about.description}</p>
+        </motion.div>
+        <motion.div
+          className="w-full md:w-2/3 flex justify-end md:justify-center sm:justify-center mb-6 relative"
+          variants={aboutAnimations.container}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+        >
+          <div className="relative w-10/12 h-80">
+            {!isVideoPlaying ? (
+              <motion.div
+                className="relative group cursor-pointer"
+                onClick={handleVideoClick}
+                variants={aboutAnimations.video}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+              >
+                <img
+                  src={about.thumbnail}
+                  alt={`${about.title} - Overview of our software development approach`}
+                  className="rounded-lg object-cover w-full h-80 cursor-pointer"
+                  loading="lazy"
+                />
+                <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  <Play className="text-white w-10 h-10 animate-pulse" aria-label="Play video" />
+                </div>
+              </motion.div>
+            ) : (
+              <motion.div
+                className="relative cursor-pointer"
+                variants={aboutAnimations.video}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+              >
+                <AnimatePresence>
+                  {isVideoLoading && (
+                    <motion.div
+                      {...aboutAnimations.loading}
+                      className="absolute inset-0 bg-gray-800 rounded-lg flex items-center justify-center"
+                    >
+                      <div className="flex flex-col items-center">
+                        <HiOutlinePhotograph className="w-16 h-16 text-gray-600 animate-pulse" />
+                        <span className="text-gray-400 mt-4">Tech4Biz is loading...</span>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+
+                {!isVideoError ? (
+                  <motion.video
+                    ref={videoRef}
+                    controls
+                    className={`rounded-lg object-cover w-full h-80 transition-opacity duration-500 ${
+                      isVideoLoading ? 'opacity-0' : 'opacity-100'
+                    }`}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: isVideoLoading ? 0 : 1 }}
+                    transition={{ duration: 0.5 }}
+                    preload="metadata"
+                    loading="lazy"
+                  >
+                    <source src={about.videoUrl} type="video/mp4" />
+                    Your browser does not support the video tag.
+                  </motion.video>
+                ) : (
+                  <motion.div 
+                    {...aboutAnimations.errorState}
+                    className="absolute inset-0 bg-gray-900 rounded-lg flex items-center justify-center"
+                  >
+                    <div className="text-center">
+                      <HiOutlinePhotograph className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+                      <span className="text-gray-400">Unable to load video</span>
+                    </div>
+                  </motion.div>
+                )}
+
+                <button
+                  onClick={handleCloseVideo}
+                  className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md hover:bg-gray-100 transition-colors duration-300"
+                >
+                  <X className="w-6 h-6 text-black" />
+                </button>
+              </motion.div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default SoftwareAbout;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareIndustries.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareIndustries.jsx
new file mode 100644
index 0000000..50e932a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareIndustries.jsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { caseStudyCards } from "@pages/home/components/caseStudyShowcase/config/caseStudyCards.json";
+import { Link } from "react-router-dom";
+
+const SoftwareIndustries = () => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [itemsPerView, setItemsPerView] = useState(3); // Default for desktop
+
+  // Slice the caseStudyCards array to only include items from index 1 to 6
+  const slicedCaseStudies = caseStudyCards.slice(1, 7);
+
+  // Adjust itemsPerView based on screen size
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setItemsPerView(1); // Mobile view
+      } else {
+        setItemsPerView(3); // Desktop view
+      }
+    };
+
+    handleResize(); // Initial check
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const totalSlides = Math.ceil(slicedCaseStudies.length / itemsPerView); // Total groups of slides
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  };
+
+  const visibleSlides = slicedCaseStudies.slice(
+    currentSlide * itemsPerView,
+    currentSlide * itemsPerView + itemsPerView
+  );
+
+  return (
+    <div className='bg-black relative z-10' 
+    style={{background:"#fff"}}
+    >
+    <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-12 px-8 md:px-12">
+      {/* Header Section */}
+      <div className="flex justify-between items-center flex-row mb-6">
+        <div>
+          <h4 className="text-2xl font-medium">Software Solutions for Various Industries</h4>
+          <p className="mt-2 text-gray-600">
+            Explore our innovative solutions tailored for different business needs.
+          </p>
+        </div>
+        <div className="btns flex justify-between items-center gap-4">
+          {/* Navigation Buttons */}
+          <motion.button
+            className="bg-black rounded text-white px-4 py-2"
+            onClick={prevSlide}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            &#8592;
+          </motion.button>
+          <motion.button
+            className="bg-black rounded text-white px-4 py-2"
+            onClick={nextSlide}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            &#8594;
+          </motion.button>
+        </div>
+      </div>
+
+      {/* Slider Content */}
+      <div className="flex gap-4 transition-transform ease-in-out duration-500">
+        {visibleSlides.map((slide) => (
+          <motion.div
+            key={slide.id}
+            className="flex-none w-full md:w-1/3"
+            initial={{ x: 100, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Link 
+              to={`/case-studies/${slide.caseStudySlug}`}
+              aria-label={`View case study for ${slide.title}`}
+            >
+              <div
+                className="relative w-full h-[450px] rounded-lg bg-cover bg-center"
+                style={{ backgroundImage: `url(${slide.path})` }}
+                role="img"
+                aria-label={`${slide.title} industry solution showcase`}
+              >
+                <div className="absolute bottom-4 w-11/12 left-3 text-white bg-black bg-opacity-75 p-4 rounded-md">
+                  <h5 className="text-md font-medium">{slide.title}</h5>
+                  <p className="text-sm mt-2">{slide.description.slice(0,70)}</p>
+                </div>
+              </div>
+            </Link>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+    </div>
+  );
+};
+
+export default SoftwareIndustries;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareInsights.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareInsights.jsx
new file mode 100644
index 0000000..e1a2b81
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareInsights.jsx
@@ -0,0 +1,61 @@
+import React, { memo, useCallback } from "react";
+import { motion } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import  services  from "@pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json";
+import { generateServiceSlug } from "@pages/detail-pages/DigitalSolutionsDetailPage/utils/helpers";
+
+const SoftwareInsights = () => {
+  const navigate = useNavigate();
+
+  // Memoize the card click handler
+  const handleCardClick = useCallback((service) => {
+    const serviceSlug = generateServiceSlug(service.title);
+    navigate(`/services/${serviceSlug}`);
+  }, [navigate]);
+
+  return (
+    <div className='bg-black relative z-10' style={{ background: "#fff" }}>
+      <div className='bg-black'>
+        <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-12 px-4 md:px-12">
+          {/* Section Header */}
+          <div className="text-left text-[#fff] mb-6">
+            <h4 className="text-xl font-medium">Software Insights</h4>
+            <p className="mt-2">
+              Explore innovative solutions tailored for diverse business needs.
+            </p>
+          </div>
+
+          {/* Cards Section */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {services.slice(0,4).map((service, index) => (
+              <motion.div
+                key={`software-insight-${service.id}-${index}`}
+                className="flex flex-col items-center p-1 rounded-lg transition-transform duration-300 cursor-pointer"
+                initial={{ y: 100, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ duration: 0.2 }}
+                whileHover={{ y: -10, boxShadow: "none" }}
+                onClick={() => handleCardClick(service)}
+              >
+                <div
+                  className="relative w-full h-[300px] rounded-lg bg-cover bg-center"
+                  style={{ backgroundImage: `url(${service.image})` }}
+                  role="img"
+                  aria-label={`${service.title} - ${service.description.slice(0, 50)}`}
+                >
+                  <div className="absolute bottom-4 w-11/12 left-3 text-white bg-black bg-opacity-75 px-2 py-2 rounded-md">
+                    <h5 className="text-md font-medium">{service.title}</h5>
+                    <p className="text-xs mt-2">{service.description.slice(0, 50)}</p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Memoize the component
+export default memo(SoftwareInsights); 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareTimeline.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareTimeline.jsx
new file mode 100644
index 0000000..5c5d9d7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/components/SoftwareTimeline.jsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import softwareContent from "../config/softwareContent.json";
+
+const AccordionItem = ({ title, description, index, isExpanded, toggleExpand }) => {
+  return (
+    <div className="w-full py-3 px-0 border-b border-gray-300">
+      <div
+        className="flex justify-between items-center cursor-pointer"
+        onClick={() => toggleExpand(index)}
+      >
+        <h5 className="text-lg font-medium text-gray-800">{title}</h5>
+        <span className="text-2xl font-medium text-gray-800">
+          {isExpanded ? "-" : "+"}
+        </span>
+      </div>
+      {isExpanded && (
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          className="mt-2"
+        >
+          <p className="text-gray-600">{description}</p>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+const Timeline = () => {
+  const { timeline } = softwareContent;
+  const [expandedIndex, setExpandedIndex] = useState(0);
+
+  const toggleExpand = (index) => {
+    setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  return (
+    <div className='bg-black relative z-10' style={{background:"#fff"}}>
+      <div className="relative w-full max-w-6xl mx-auto pt-0 pb-16 px-8 md:px-12">
+        <div className="text-left mb-8">
+          <h4 className="text-3xl font-medium text-gray-800">{timeline.title}</h4>
+          <p className="text-gray-600 mt-2">{timeline.subtitle}</p>
+        </div>
+
+        <div className="flex flex-col">
+          {timeline.steps.map((step, index) => (
+            <AccordionItem
+              key={index}
+              index={index}
+              title={step.title}
+              description={step.description}
+              isExpanded={expandedIndex === index}
+              toggleExpand={toggleExpand}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/config/SoftwareSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/config/SoftwareSchema.json
new file mode 100644
index 0000000..c3d8b59
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/config/SoftwareSchema.json
@@ -0,0 +1,96 @@
+{
+  "@context": "https://schema.org",
+  "mainEntity": {
+    "@type": "WebPage",
+    "name": "Software Development Services",
+    "description": "Professional software development services offering custom solutions, security implementations, and innovative technology solutions for businesses.",
+    "provider": {
+      "@type": "Organization",
+      "name": "Tech4Biz",
+      "url": "https://tech4bizsolutions.com"
+    },
+    "offers": {
+      "@type": "AggregateOffer",
+      "offers": [
+        {
+          "@type": "Offer",
+          "name": "Custom Software Development",
+          "description": "Tailored software solutions to meet unique business needs"
+        },
+        {
+          "@type": "Offer",
+          "name": "Security Implementation",
+          "description": "Advanced security solutions including data encryption and access control"
+        },
+        {
+          "@type": "Offer",
+          "name": "Cloud Integration",
+          "description": "Seamless integration of cloud technologies for scalable solutions"
+        },
+        {
+          "@type": "Offer",
+          "name": "Quality Assurance",
+          "description": "Comprehensive testing and quality assurance services"
+        }
+      ]
+    },
+    "mainContentOfPage": {
+      "@type": "WebPageElement",
+      "sections": [
+        {
+          "@type": "ServiceSection",
+          "name": "Hero",
+          "description": "Your Trusted Software Development Partner"
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "About",
+          "description": "Security for growth and scalable digital environment"
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Our Approach",
+          "description": "Agile development methodology with custom solutions"
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Timeline",
+          "description": "Step-by-step software development process"
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Industries",
+          "description": "Software solutions for various business sectors"
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Insights",
+          "description": "Latest software development trends and solutions"
+        }
+      ]
+    },
+    "breadcrumb": {
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "https://tech4bizsolutions.com"
+        },
+        {
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Services",
+          "item": "https://tech4bizsolutions.com/services"
+        },
+        {
+          "@type": "ListItem",
+          "position": 3,
+          "name": "Software Development",
+          "item": "https://tech4bizsolutions.com/services/software-development"
+        }
+      ]
+    }
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/config/softwareContent.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/config/softwareContent.json
new file mode 100644
index 0000000..9088f1a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/config/softwareContent.json
@@ -0,0 +1,121 @@
+{
+  "hero": {
+    "breadcrumb": "Service / Software Development",
+    "title": "Your Trusted Software Development Partner",
+    "subtitle": "Delivering Excellence with Innovative, Tailored Solutions",
+    "videoUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/software-develeopment.mp4",
+    "ctaText": "Let's Talk"
+  },
+  "about": {
+    "title": "Security for growth",
+    "description": "Your growth is our priority, and security is at the heart of everything we do. By leveraging state-of-the-art technology, we ensure that your business thrives in a safe and scalable digital environment.",
+    "videoUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/security-growth-software.mp4",
+    "thumbnail": "/images/software/security growth.webp"
+  },
+  "approach": {
+    "title": "Our Approach",
+    "items": [
+      {
+        "title": "Agile Development",
+        "image": "/images/icons/agile.webp",
+        "description": "Collaborative and iterative approach to software development."
+      },
+      {
+        "title": "Custom Solutions",
+        "image": "/images/icons/customsolution.webp",
+        "description": "Tailored software solutions to meet unique business needs."
+      },
+      {
+        "title": "Cloud Integration",
+        "image": "/images/icons/cloudintegration.webp",
+        "description": "Seamless integration of cloud technologies for scalable solutions."
+      },
+      {
+        "title": "Quality Assurance",
+        "image": "/images/icons/quailtyassurance.webp",
+        "description": "Ensuring robust and reliable software through rigorous testing."
+      }
+    ]
+  },
+  "timeline": {
+    "title": "Our Proven Process",
+    "subtitle": "Follow Our Step-by-Step Approach to Achieve Success",
+    "steps": [
+      {
+        "title": "Step 1: Discovery and Planning",
+        "description": "We start by understanding your business needs and objectives. Through in-depth discussions and research, we gather the necessary information to plan a solution that meets your specific requirements. This phase is crucial for aligning our strategy with your vision."
+      },
+      {
+        "title": "Step 2: Design and Prototyping",
+        "description": "Once the plan is in place, we move into the design phase. Our team creates wireframes, user interface designs, and prototypes that bring the concept to life. This step allows us to gather feedback early on and make necessary adjustments before development begins."
+      },
+      {
+        "title": "Step 3: Development and Testing",
+        "description": "In this phase, our expert developers build the solution, ensuring the highest quality code and seamless functionality. We also conduct thorough testing to identify potential issues, ensuring that the product performs optimally across all environments."
+      },
+      {
+        "title": "Step 4: Deployment and Support",
+        "description": "After development and testing, we move on to deployment. Our team works closely with you to ensure a smooth transition and successful launch. Post-deployment support is also provided to ensure your solution continues to operate efficiently and is optimized for future needs."
+      }
+    ]
+  },
+  "industries": {
+    "title": "Software Solutions for Various Industries",
+    "subtitle": "Explore our innovative solutions tailored for different business needs",
+    "items": [
+      {
+        "id": 1,
+        "title": "Healthcare",
+        "description": "Digital solutions for modern healthcare management",
+        "path": "/images/industries/healthcare.jpg",
+        "caseStudySlug": "healthcare-solutions"
+      }
+    ]
+  },
+  "insights": {
+    "title": "Software Insights",
+    "subtitle": "Explore innovative solutions tailored for diverse business needs",
+    "items": [
+      {
+        "id": 1,
+        "title": "Cloud Computing",
+        "description": "Leverage cloud technologies for scalable solutions",
+        "image": "/images/insights/cloud-computing.jpg"
+      }
+    ]
+  },
+  "services": [
+    {
+      "id": 1,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Security.jpg",
+      "title": "Security",
+      "subtitle": "Subtitle 1",
+      "description": "At Tech4Biz, we emphasize robust security in software development, offering advanced solutions like data encryption, access control, and comprehensive vulnerability assessments. Our expertise ensures your software is safeguarded with the latest security technologies and industry best practices.",
+      "descriptionTwo": "Our dedicated team stays ahead of emerging threats through continuous learning and innovation in the dynamic field of cybersecurity. By choosing Tech4Biz, your business benefits from proactive security solutions that protect your software, ensuring trust and reliability in a competitive market."
+    },
+    {
+      "id": 2,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Collaboration.jpg",
+      "title": "Collaboration",
+      "subtitle": "Subtitle 2",
+      "description": "At Tech4Biz, we specialize in collaborative software development solutions that are fully customized to match your unique business requirements. Our experienced team works closely with you to create tailored software solutions designed to meet your goals, ensuring a seamless development process from start to finish.",
+      "descriptionTwo": "We prioritize keeping you informed and involved throughout every stage of the software development lifecycle. With a proven track record of successful custom software development projects, Tech4Biz ensures your business objectives are met with precision and efficiency, driving sustained business growth and success."
+    },
+    {
+      "id": 3,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Data-Center.webp",
+      "title": "Data Center",
+      "subtitle": "Subtitle 3",
+      "description": "At Tech4Biz, we provide advanced data center solutions designed to ensure your applications run securely and efficiently. Our comprehensive approach integrates all aspects of data center management into a single, streamlined solution, delivering seamless operations, maximum uptime, and reliable performance. Count on our expertise to offer scalable, dependable, and secure data center solutions tailored to meet your specific business requirements.",
+      "descriptionTwo": "We work closely with you to develop customized data center solutions that address your unique needs. Whether your goals include enhancing security, improving system performance, or achieving more efficient infrastructure management, Tech4Biz ensures your data center architecture is optimized for success. Contact us today to discover how our data center services can drive your business forward."
+    },
+    {
+      "id": 4,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Networking.jpg",
+      "title": "Networking",
+      "subtitle": "Subtitle 4",
+      "description": "At Tech4Biz, we deliver expert networking services designed to support the success of software development firms. A reliable network infrastructure is essential for seamless developer communication, efficient file sharing, and smooth project collaboration. Leveraging our extensive expertise, we provide custom networking solutions tailored to your business's unique needs.",
+      "descriptionTwo": "Our customized networking solutions create the foundation for streamlined project management and effective team collaboration. From essential file-sharing capabilities to advanced networking systems, Tech4Biz equips your team with the tools and connectivity needed to boost productivity, drive business growth, and ensure success."
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/hooks/useVideoPlayer.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/hooks/useVideoPlayer.js
new file mode 100644
index 0000000..7c19ceb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/hooks/useVideoPlayer.js
@@ -0,0 +1,63 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import debounce from 'lodash/debounce';
+
+export const useVideoPlayer = () => {
+  const videoRef = useRef(null);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
+  const [isVideoError, setIsVideoError] = useState(false);
+  const [isInViewport, setIsInViewport] = useState(false);
+
+  const handleIntersection = useCallback(([entry]) => {
+    setIsInViewport(entry.isIntersecting);
+  }, []);
+
+  const handleLoadedData = useCallback(() => {
+    setIsVideoLoading(false);
+  }, []);
+
+  const handleError = useCallback(() => {
+    setIsVideoError(true);
+    setIsVideoLoading(false);
+  }, []);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(handleIntersection, { 
+      threshold: 0.1,
+      rootMargin: '50px'
+    });
+
+    const currentVideo = videoRef.current;
+    if (currentVideo) {
+      observer.observe(currentVideo);
+    }
+
+    return () => {
+      if (currentVideo) {
+        observer.unobserve(currentVideo);
+      }
+    };
+  }, [handleIntersection]);
+
+  useEffect(() => {
+    const currentVideo = videoRef.current;
+    if (isVideoPlaying && isInViewport && currentVideo) {
+      currentVideo.addEventListener('loadeddata', handleLoadedData);
+      currentVideo.addEventListener('error', handleError);
+
+      return () => {
+        currentVideo.removeEventListener('loadeddata', handleLoadedData);
+        currentVideo.removeEventListener('error', handleError);
+      };
+    }
+  }, [isVideoPlaying, isInViewport, handleLoadedData, handleError]);
+
+  return { 
+    videoRef, 
+    isVideoPlaying, 
+    setIsVideoPlaying, 
+    isVideoLoading, 
+    isVideoError,
+    isInViewport 
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/index.jsx
new file mode 100644
index 0000000..0de1e89
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/software/index.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import Hero from './components/Hero'
+import ServiceInfo from './components/ServiceInfo'
+import Timeline from './components/SoftwareTimeline'
+import SoftwareAbout from './components/SoftWareAbout'
+import SoftwareIndustries from './components/SoftwareIndustries'
+import SoftwareInsights from './components/SoftwareInsights'
+import OurApproach from './components/OurApproach'
+import ScrollToTop from '@components/common/scroll/ScrollToTop'
+import ScrollToTopButton from "@components/common/scroll/ScrollToTopButton";
+import softwareSchema from './config/SoftwareSchema.json'
+import softwareContent from './config/softwareContent.json'
+
+const SoftwareDevelopment = () => {
+  
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { hero } = softwareContent;
+
+  const handleModalToggle = (isOpen) => {
+    setIsModalOpen(isOpen);
+  };
+
+  return (
+    <>
+      <Helmet>
+        {/* Primary Meta Tags */}
+        <title>Software Development Services | Tech4Biz</title>
+        <meta name="title" content="Software Development Services | Tech4Biz" />
+        <meta 
+          name="description" 
+          content="Professional software development services offering custom solutions, security implementations, and innovative technology solutions for businesses. Partner with Tech4Biz for reliable, scalable software solutions." 
+        />
+        <meta name="keywords" content="software development, custom solutions, security implementation, cloud integration, agile development, Tech4Biz" />
+        
+        {/* Canonical Tag */}
+        <link rel="canonical" href="https://tech4bizsolutions.com/software-development" />
+        
+        {/* Open Graph / Facebook */}
+        <meta property="og:title" content="Software Development Services | Tech4Biz" />
+        <meta property="og:description" content="Professional software development services offering custom solutions, security implementations, and innovative technology solutions for businesses. Partner with Tech4Biz for reliable, scalable software solutions." />
+        <meta property="og:type" content="website" />
+      
+        
+        {/* JSON-LD Schema */}
+        <script type="application/ld+json">
+          {JSON.stringify(softwareSchema)}
+        </script>
+      </Helmet>
+
+      <div>
+        <ScrollToTop/>
+        <ScrollToTopButton />
+        <div
+          className=""
+          style={{
+            position: "sticky",
+            top: "0",
+            zIndex: isModalOpen ? "1000" : "1", // Dynamically set z-index
+          }}
+        >
+          <Hero onModalToggle={handleModalToggle} />
+        </div>
+        <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <SoftwareAbout/>
+        </div>
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <OurApproach/>
+        </div>
+        
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <ServiceInfo/>
+        </div>
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <Timeline/>
+        </div>
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <SoftwareIndustries/>
+        </div>
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <SoftwareInsights/>
+        </div>
+    </div>
+  </>
+  )
+}
+
+export default SoftwareDevelopment
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/animations/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/animations/animations.js
new file mode 100644
index 0000000..ba6b5c9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/animations/animations.js
@@ -0,0 +1,46 @@
+export const slideAnimations = {
+  card: {
+    initial: { x: 100, opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    transition: { duration: 0.5 }
+  },
+  button: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.3 }
+  }
+};
+
+export const aboutAnimations = {
+  container: {
+    hidden: { opacity: 0, x: -50 },
+    visible: { 
+      opacity: 1, 
+      x: 0, 
+      transition: { duration: 0.8, ease: "easeOut" } 
+    }
+  },
+  video: {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: { 
+      opacity: 1, 
+      scale: 1, 
+      transition: { duration: 0.5, ease: "easeOut" } 
+    },
+    exit: { 
+      opacity: 0, 
+      scale: 0.9, 
+      transition: { duration: 0.5, ease: "easeIn" } 
+    }
+  },
+  loading: {
+    initial: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.5 }
+  },
+  errorState: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.5 }
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/Hero.jsx
new file mode 100644
index 0000000..1bc4490
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/Hero.jsx
@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { HiOutlinePhotograph } from 'react-icons/hi';
+import CRMModalForm from "@components/modals/CRMModalForm";
+import vlsiContent from "../config/vlsiContent.json"; // Updated import
+import { useVideoPlayer } from "../hooks/useVideoPlayer";
+
+const Hero = ({ onModalToggle }) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  // Use the custom video hook for video loading logic
+  const { 
+    videoRef, 
+    isVideoPlaying, 
+    setIsVideoPlaying, 
+    isVideoLoading, 
+    isVideoError 
+  } = useVideoPlayer();
+  const { hero } = vlsiContent; // Updated extraction
+
+  // For the Hero component, auto-play the video on mount
+  useEffect(() => {
+    setIsVideoPlaying(true);
+  }, [setIsVideoPlaying]);
+
+  const openModal = () => {
+    setIsModalVisible(true);
+    onModalToggle(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+    onModalToggle(false);
+  };
+
+  return (
+    <>
+      <div className="hero-section ser-banner-sec bg-black text-white relative z-50">
+        <div className="relative w-full h-[750px] overflow-hidden">
+          <AnimatePresence>
+            {isVideoLoading && (
+              <motion.div
+                initial={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.5 }}
+                className="absolute top-0 left-0 w-full h-full bg-gray-800 flex items-center justify-center"
+              >
+                <div className="flex flex-col items-center">
+                  <HiOutlinePhotograph className="w-20 h-20 text-gray-600 animate-pulse" />
+                  <span className="text-gray-400 mt-4">Tech4Biz is loading...</span>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {!isVideoError ? (
+            <motion.video
+              ref={videoRef}
+              className={`absolute top-0 left-0 w-full h-full object-cover transition-opacity duration-500 ${
+                isVideoLoading ? 'opacity-0' : 'opacity-100'
+              }`}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: isVideoLoading ? 0 : 1 }}
+              transition={{ duration: 0.5 }}
+              src={hero.videoUrl}
+              autoPlay
+              loop
+              muted
+              playsInline
+              preload="metadata"
+              loading="lazy"
+            >
+              <source src={hero.videoUrl} type="video/mp4" />
+              Your browser does not support the video tag.
+            </motion.video>
+          ) : (
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              className="absolute top-0 left-0 w-full h-full bg-gray-900 flex items-center justify-center"
+            >
+              <div className="text-center">
+                <HiOutlinePhotograph className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+                <span className="text-gray-400">Unable to load video</span>
+              </div>
+            </motion.div>
+          )}
+
+          <div className="absolute top-0 left-0 w-full h-full bg-black/60" />
+
+          {/* Content Section */}
+          <motion.div 
+            className="absolute inset-0 max-w-6xl mx-auto py-12 md:px-12 mt-10 flex flex-col justify-start items-start text-left px-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            <h4 className="text-sm font-light text-white mb-4">{hero.breadcrumb}</h4>
+            <hr className="mb-4 w-full border-t border-white/30" />
+            <h1 className="text-4xl md:text-4xl font-bold mb-6">
+              {hero.title}
+            </h1>
+
+            <p className="text-lg md:text-xl mb-8">
+              {hero.subtitle}
+            </p>
+
+            <button 
+              onClick={openModal} 
+              className="flex items-center gap-2 px-0 py-3 transition-transform duration-300 hover:translate-x-2"
+            >
+              <span className="text-white">{hero.ctaText}</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-10 w-10 rounded-3xl p-2 shadow-md bg-white text-black hover:bg-gray-100 transition-colors duration-300"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M13 7l5 5m0 0l-5 5m5-5H6"
+                />
+              </svg>
+            </button>
+          </motion.div>
+        </div>
+      </div>
+
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={handleModalClose}
+        source="VLSI Design Page Banner"
+      />
+    </>
+  );
+};
+
+export default Hero;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/OurApproach.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/OurApproach.jsx
new file mode 100644
index 0000000..11849b0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/OurApproach.jsx
@@ -0,0 +1,40 @@
+import React, { memo } from 'react';
+import vlsiContent from "../config/vlsiContent.json";
+
+const OurApproach = () => {
+  const { approach } = vlsiContent;
+  console.log(approach);
+
+  return (
+    <div className="relative z-[5]" style={{ background: "#1F2937" }}>
+      <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-24 px-4 md:px-12">
+        <h4 className="text-3xl text-white font-medium text-left mb-8">{approach.title}</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {approach.items && approach.items.map((item, index) => (
+            <div
+              key={index}
+              className="overflow-hidden flex flex-col justify-center items-center md:justify-start md:items-start"
+            >
+              <div className="img flex justify-center items-center md:justify-start md:items-start w-full">
+                <img
+                  style={{ filter: 'invert(1)' }}
+                  src={item.image}
+                  alt={`${item.title} - ${item.description}`}
+                  className="w-100 h-32 object-contain"
+                  loading="lazy"
+                />
+              </div>
+              <div className="py-6 px-0 text-white text-center md:text-left">
+                <h3 className="text-xl font-light mb-2">{item.title}</h3>
+                <p className="text-sm text-gray-300">{item.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Memoize the component to prevent unnecessary re-renders
+export default memo(OurApproach);
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/ServiceInfo.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/ServiceInfo.jsx
new file mode 100644
index 0000000..4e2e779
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/ServiceInfo.jsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
+import { motion } from 'framer-motion';
+import debounce from 'lodash/debounce';
+import vlsiContent from "../config/vlsiContent.json"; // Updated import
+
+const ServiceInfo = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [isSticky, setIsSticky] = useState(false);
+  const [isMobileSelectOpen, setIsMobileSelectOpen] = useState(false);
+  const sectionRefs = useRef([]);
+  const { services } = vlsiContent; // Updated extraction
+
+  // Memoize the scroll handler with debounce
+  const handleScroll = useCallback(
+    debounce(() => {
+      const element = document.getElementById('tabs-header');
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        setIsSticky(rect.top <= 0);
+      }
+      const scrollPosition = window.scrollY + 100;
+      sectionRefs.current.forEach((ref, index) => {
+        if (ref && ref.offsetTop <= scrollPosition &&
+            ref.offsetTop + ref.offsetHeight > scrollPosition) {
+          setActiveTab(index);
+        }
+      });
+    }, 100, { leading: true, maxWait: 200 }),
+    []
+  );
+
+  // Memoize the section scroll handler
+  const scrollToSection = useCallback((index) => {
+    setIsMobileSelectOpen(false);
+    const sectionRef = sectionRefs.current[index];
+    if (sectionRef) {
+      const offset = isSticky ? 80 : 0;
+      window.scrollTo({
+        top: sectionRef.offsetTop - offset,
+        behavior: 'smooth'
+      });
+    }
+    setActiveTab(index);
+  }, [isSticky]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [handleScroll]);
+
+  return (
+    <div className='bg-white' style={{ background: "#fff" }}>
+      <div className="min-h-screen">
+        <div
+          id="tabs-header"
+          className={`transition-shadow duration-300 ${isSticky ? 'sticky top-0 ' : ''}`}
+        >
+          <div className="max-w-6xl mx-auto px-10 relative pt-24 md:pt-24 sm:pt-12 xs:pt-14 max-xs:pt-16">
+          </div>
+        </div>
+
+        <div className="max-w-6xl mx-auto py-12 px-8 md:px-">
+          {services.map((service, index) => (
+            <motion.div
+              key={service.id}
+              ref={el => sectionRefs.current[index] = el}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: "-100px" }}
+              transition={{ duration: 0.5 }}
+              className="bg-white py-6 px-2 mb-8"
+            >
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <h4 className="text-3xl font-medium text-gray-800">
+                    {service.title}
+                  </h4>
+                </div>
+                <p className="text-gray-600 leading-relaxed">{service.description}</p>
+                <p className="text-gray-600 leading-relaxed">{service.descriptionTwo}</p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ServiceInfo);
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareAbout.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareAbout.jsx
new file mode 100644
index 0000000..5feaa0a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareAbout.jsx
@@ -0,0 +1,135 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { X, Play } from "lucide-react";
+import { HiOutlinePhotograph } from 'react-icons/hi';
+import vlsiContent from "../config/vlsiContent.json"; // Updated import
+import { aboutAnimations } from '../animations/animations';
+import { useVideoPlayer } from "../hooks/useVideoPlayer";
+
+const SoftwareAbout = () => {
+  const { about } = vlsiContent; // Updated extraction
+  
+  // Use the custom video hook to manage video logic
+  const { 
+    videoRef, 
+    isVideoPlaying, 
+    setIsVideoPlaying, 
+    isVideoLoading, 
+    isVideoError 
+  } = useVideoPlayer();
+
+  const handleVideoClick = () => {
+    setIsVideoPlaying(true);
+  };
+
+  const handleCloseVideo = (e) => {
+    e.stopPropagation();
+    setIsVideoPlaying(false);
+  };
+
+  return (
+    <div className='bg-black' style={{ background: "#fff" }}>
+      <div className="flex flex-col-reverse md:flex-row items-center justify-between max-w-6xl mx-auto py-16 px-4 md:px-12">
+        <motion.div
+          className="w-full md:w-1/2 text-center md:text-left ps-0"
+          variants={aboutAnimations.container}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+        >
+          <h4 className="text-3xl font-medium text-gray-800 mb-4">{about.title}</h4>
+          <p className="text-gray-600 leading-relaxed">{about.description}</p>
+        </motion.div>
+        <motion.div
+          className="w-full md:w-2/3 flex justify-end md:justify-center sm:justify-center mb-6 relative"
+          variants={aboutAnimations.container}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+        >
+          <div className="relative w-10/12 h-80">
+            {!isVideoPlaying ? (
+              <motion.div
+                className="relative group cursor-pointer"
+                onClick={handleVideoClick}
+                variants={aboutAnimations.video}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+              >
+                <img
+                  src={about.thumbnail}
+                  alt={`${about.title} - Overview of our VLSI design approach`}
+                  className="rounded-lg object-cover w-full h-80 cursor-pointer"
+                  loading="lazy"
+                />
+                <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  <Play className="text-white w-10 h-10 animate-pulse" aria-label="Play video" />
+                </div>
+              </motion.div>
+            ) : (
+              <motion.div
+                className="relative cursor-pointer"
+                variants={aboutAnimations.video}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+              >
+                <AnimatePresence>
+                  {isVideoLoading && (
+                    <motion.div
+                      {...aboutAnimations.loading}
+                      className="absolute inset-0 bg-gray-800 rounded-lg flex items-center justify-center"
+                    >
+                      <div className="flex flex-col items-center">
+                        <HiOutlinePhotograph className="w-16 h-16 text-gray-600 animate-pulse" />
+                        <span className="text-gray-400 mt-4">Tech4Biz is loading...</span>
+                      </div>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+
+                {!isVideoError ? (
+                  <motion.video
+                    ref={videoRef}
+                    controls
+                    className={`rounded-lg object-cover w-full h-80 transition-opacity duration-500 ${
+                      isVideoLoading ? 'opacity-0' : 'opacity-100'
+                    }`}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: isVideoLoading ? 0 : 1 }}
+                    transition={{ duration: 0.5 }}
+                    preload="metadata"
+                    loading="lazy"
+                  >
+                    <source src={about.videoUrl} type="video/mp4" />
+                    Your browser does not support the video tag.
+                  </motion.video>
+                ) : (
+                  <motion.div 
+                    {...aboutAnimations.errorState}
+                    className="absolute inset-0 bg-gray-900 rounded-lg flex items-center justify-center"
+                  >
+                    <div className="text-center">
+                      <HiOutlinePhotograph className="w-16 h-16 text-gray-600 mx-auto mb-4" />
+                      <span className="text-gray-400">Unable to load video</span>
+                    </div>
+                  </motion.div>
+                )}
+
+                <button
+                  onClick={handleCloseVideo}
+                  className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md hover:bg-gray-100 transition-colors duration-300"
+                >
+                  <X className="w-6 h-6 text-black" />
+                </button>
+              </motion.div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default SoftwareAbout;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareIndustries.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareIndustries.jsx
new file mode 100644
index 0000000..50e932a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareIndustries.jsx
@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+import { caseStudyCards } from "@pages/home/components/caseStudyShowcase/config/caseStudyCards.json";
+import { Link } from "react-router-dom";
+
+const SoftwareIndustries = () => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [itemsPerView, setItemsPerView] = useState(3); // Default for desktop
+
+  // Slice the caseStudyCards array to only include items from index 1 to 6
+  const slicedCaseStudies = caseStudyCards.slice(1, 7);
+
+  // Adjust itemsPerView based on screen size
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setItemsPerView(1); // Mobile view
+      } else {
+        setItemsPerView(3); // Desktop view
+      }
+    };
+
+    handleResize(); // Initial check
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const totalSlides = Math.ceil(slicedCaseStudies.length / itemsPerView); // Total groups of slides
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  };
+
+  const visibleSlides = slicedCaseStudies.slice(
+    currentSlide * itemsPerView,
+    currentSlide * itemsPerView + itemsPerView
+  );
+
+  return (
+    <div className='bg-black relative z-10' 
+    style={{background:"#fff"}}
+    >
+    <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-12 px-8 md:px-12">
+      {/* Header Section */}
+      <div className="flex justify-between items-center flex-row mb-6">
+        <div>
+          <h4 className="text-2xl font-medium">Software Solutions for Various Industries</h4>
+          <p className="mt-2 text-gray-600">
+            Explore our innovative solutions tailored for different business needs.
+          </p>
+        </div>
+        <div className="btns flex justify-between items-center gap-4">
+          {/* Navigation Buttons */}
+          <motion.button
+            className="bg-black rounded text-white px-4 py-2"
+            onClick={prevSlide}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            &#8592;
+          </motion.button>
+          <motion.button
+            className="bg-black rounded text-white px-4 py-2"
+            onClick={nextSlide}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            &#8594;
+          </motion.button>
+        </div>
+      </div>
+
+      {/* Slider Content */}
+      <div className="flex gap-4 transition-transform ease-in-out duration-500">
+        {visibleSlides.map((slide) => (
+          <motion.div
+            key={slide.id}
+            className="flex-none w-full md:w-1/3"
+            initial={{ x: 100, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <Link 
+              to={`/case-studies/${slide.caseStudySlug}`}
+              aria-label={`View case study for ${slide.title}`}
+            >
+              <div
+                className="relative w-full h-[450px] rounded-lg bg-cover bg-center"
+                style={{ backgroundImage: `url(${slide.path})` }}
+                role="img"
+                aria-label={`${slide.title} industry solution showcase`}
+              >
+                <div className="absolute bottom-4 w-11/12 left-3 text-white bg-black bg-opacity-75 p-4 rounded-md">
+                  <h5 className="text-md font-medium">{slide.title}</h5>
+                  <p className="text-sm mt-2">{slide.description.slice(0,70)}</p>
+                </div>
+              </div>
+            </Link>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+    </div>
+  );
+};
+
+export default SoftwareIndustries;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareInsights.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareInsights.jsx
new file mode 100644
index 0000000..e1a2b81
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareInsights.jsx
@@ -0,0 +1,61 @@
+import React, { memo, useCallback } from "react";
+import { motion } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import  services  from "@pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json";
+import { generateServiceSlug } from "@pages/detail-pages/DigitalSolutionsDetailPage/utils/helpers";
+
+const SoftwareInsights = () => {
+  const navigate = useNavigate();
+
+  // Memoize the card click handler
+  const handleCardClick = useCallback((service) => {
+    const serviceSlug = generateServiceSlug(service.title);
+    navigate(`/services/${serviceSlug}`);
+  }, [navigate]);
+
+  return (
+    <div className='bg-black relative z-10' style={{ background: "#fff" }}>
+      <div className='bg-black'>
+        <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-12 px-4 md:px-12">
+          {/* Section Header */}
+          <div className="text-left text-[#fff] mb-6">
+            <h4 className="text-xl font-medium">Software Insights</h4>
+            <p className="mt-2">
+              Explore innovative solutions tailored for diverse business needs.
+            </p>
+          </div>
+
+          {/* Cards Section */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+            {services.slice(0,4).map((service, index) => (
+              <motion.div
+                key={`software-insight-${service.id}-${index}`}
+                className="flex flex-col items-center p-1 rounded-lg transition-transform duration-300 cursor-pointer"
+                initial={{ y: 100, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ duration: 0.2 }}
+                whileHover={{ y: -10, boxShadow: "none" }}
+                onClick={() => handleCardClick(service)}
+              >
+                <div
+                  className="relative w-full h-[300px] rounded-lg bg-cover bg-center"
+                  style={{ backgroundImage: `url(${service.image})` }}
+                  role="img"
+                  aria-label={`${service.title} - ${service.description.slice(0, 50)}`}
+                >
+                  <div className="absolute bottom-4 w-11/12 left-3 text-white bg-black bg-opacity-75 px-2 py-2 rounded-md">
+                    <h5 className="text-md font-medium">{service.title}</h5>
+                    <p className="text-xs mt-2">{service.description.slice(0, 50)}</p>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Memoize the component
+export default memo(SoftwareInsights); 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareTimeline.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareTimeline.jsx
new file mode 100644
index 0000000..b264ef4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/components/SoftwareTimeline.jsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import vlsiContent from "../config/vlsiContent.json"; // Updated import
+
+const AccordionItem = ({ title, description, index, isExpanded, toggleExpand }) => {
+  return (
+    <div className="w-full py-3 px-0 border-b border-gray-300">
+      <div className="flex justify-between items-center cursor-pointer" onClick={() => toggleExpand(index)}>
+        <h5 className="text-lg font-medium text-gray-800">{title}</h5>
+        <span className="text-2xl font-medium text-gray-800">{isExpanded ? "-" : "+"}</span>
+      </div>
+      {isExpanded && (
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          className="mt-2"
+        >
+          <p className="text-gray-600">{description}</p>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+const Timeline = () => {
+  const { timeline } = vlsiContent; // Updated extraction
+  const [expandedIndex, setExpandedIndex] = useState(0);
+
+  const toggleExpand = (index) => {
+    setExpandedIndex(prevIndex => (prevIndex === index ? null : index));
+  };
+
+  return (
+    <div className='bg-black relative z-10' style={{ background: "#fff" }}>
+      <div className="relative w-full max-w-6xl mx-auto pt-0 pb-16 px-8 md:px-12">
+        <div className="text-left mb-8">
+          <h4 className="text-3xl font-medium text-gray-800">{timeline.title}</h4>
+          <p className="text-gray-600 mt-2">{timeline.subtitle}</p>
+        </div>
+        <div className="flex flex-col">
+          {timeline.steps.map((step, index) => (
+            <AccordionItem
+              key={index}
+              index={index}
+              title={step.title}
+              description={step.description}
+              isExpanded={expandedIndex === index}
+              toggleExpand={toggleExpand}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/config/vlsiContent.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/config/vlsiContent.json
new file mode 100644
index 0000000..ffdab8c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/config/vlsiContent.json
@@ -0,0 +1,125 @@
+{
+  "hero": {
+    "breadcrumb": "Service / VLSI Design",
+    "title": "Explore Our Advanced VLSI Design Solutions",
+    "subtitle": "We offer cutting-edge VLSI design solutions for innovation and security.",
+    "videoUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/vlsi.mp4",
+    "ctaText": "Let's Talk"
+  },
+  "about": {
+    "title": "Security for growth",
+    "description": "We understand that as innovation drives progress, security is critical. Our VLSI solutions are engineered with robust security measures to protect your digital infrastructure from potential threats while enabling business growth. We focus on delivering secure, efficient designs that keep your systems safe, allowing you to stay competitive and mitigate risks effectively.",
+    "videoUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/security-growth-vlsi.mp4",
+    "thumbnail": "/images/software/security-growth-vlsi.webp"
+  },
+  "approach": {
+    "title": "Our Approach",
+    "items": [
+      {
+        "title": "Discovery & Planning",
+        "image": "/images/icons/agile.webp",
+        "description": "Collaborative and iterative approach to software development."
+      },
+      {
+        "title": "Design & Prototype",
+        "image": "/images/icons/customsolution.webp",
+        "description": "Tailored software solutions to meet unique business needs."
+      },
+      {
+        "title": "Development & Testing",
+        "image": "/images/icons/cloudintegration.webp",
+        "description": "Seamless integration of cloud technologies for scalable solutions."
+      },
+      {
+        "title": "Deployment & Support",
+        "image": "/images/icons/quailtyassurance.webp",
+        "description": "Ensuring robust and reliable software through rigorous testing."
+      }
+    ]
+  },
+  "timeline": {
+    "title": "Our Proven Process",
+    "subtitle": "Follow Our Step-by-Step Approach to Achieve Success",
+    "steps": [
+      {
+        "title": "Step 1: VLSI Design",
+        "description": "At Tech4Biz, we specialize in expert VLSI design services, offering a full suite of solutions from concept development to final product delivery. Our experienced engineers collaborate with you at every stage of the VLSI design process to ensure your project meets all technical and business requirements. We are committed to delivering high-quality VLSI designs tailored to your unique needs, ensuring success from start to finish."
+      },
+      {
+        "title": "Step 2: CMOS Basics",
+        "description": "Tech4Biz offers essential CMOS services as part of our comprehensive VLSI design solutions, catering to both beginners and experts eager to expand their understanding of this critical technology. Our experienced team covers every aspect of CMOS technology, including its history, theoretical foundations, practical applications, and design principles."
+      },
+      {
+        "title": "Step 3: CMOS Processing",
+        "description": "Tech4Biz offers specialized CMOS processing services as part of our comprehensive VLSI design solutions. Our expert team helps you select the most effective CMOS processes and tools to ensure optimal quality and performance. We leverage a range of advanced technologies such as CMOS, Bipolar, BiCMOS, and SiGe, ensuring the success of your project throughout every phase of development."
+      },
+      {
+        "title": "Step 4: CMOS Layout Design",
+        "description": "Tech4Biz specializes in CMOS layout design services, optimizing VLSI designs for performance, power efficiency, and cost reduction. Our expert engineers utilize advanced tools and technologies to create optimal CMOS layouts, while adhering to strict quality control procedures to ensure the highest standards and best results."
+      },
+      {
+        "title": "Step 5: MOS Modeling & Few VLSI Terms",
+        "description": "Tech4Biz focuses on MOS modeling and offers an extensive array of VLSI design services, such as LVS verification, timing analysis, and power analysis. Our skilled engineers guarantee precise models for your circuits and oversee each stage of your VLSI design project, from idea to execution."
+      }
+    ]
+  },
+  "industries": {
+    "title": "Software Solutions for Various Industries",
+    "subtitle": "Explore our innovative solutions tailored for different business needs",
+    "items": [
+      {
+        "id": 1,
+        "title": "Healthcare",
+        "description": "Digital solutions for modern healthcare management",
+        "path": "/images/industries/healthcare.jpg",
+        "caseStudySlug": "healthcare-solutions"
+      }
+    ]
+  },
+  "insights": {
+    "title": "Software Insights",
+    "subtitle": "Explore innovative solutions tailored for diverse business needs",
+    "items": [
+      {
+        "id": 1,
+        "title": "Cloud Computing",
+        "description": "Leverage cloud technologies for scalable solutions",
+        "image": "/images/insights/cloud-computing.jpg"
+      }
+    ]
+  },
+  "services": [
+    {
+      "id": 1,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Security.jpg",
+      "title": "Security",
+      "subtitle": "Subtitle 1",
+      "description": "At Tech4Biz, we emphasize robust security in software development, offering advanced solutions like data encryption, access control, and comprehensive vulnerability assessments. Our expertise ensures your software is safeguarded with the latest security technologies and industry best practices.",
+      "descriptionTwo": "Our dedicated team stays ahead of emerging threats through continuous learning and innovation in the dynamic field of cybersecurity. By choosing Tech4Biz, your business benefits from proactive security solutions that protect your software, ensuring trust and reliability in a competitive market."
+    },
+    {
+      "id": 2,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Collaboration.jpg",
+      "title": "Collaboration",
+      "subtitle": "Subtitle 2",
+      "description": "At Tech4Biz, we specialize in collaborative software development solutions that are fully customized to match your unique business requirements. Our experienced team works closely with you to create tailored software solutions designed to meet your goals, ensuring a seamless development process from start to finish.",
+      "descriptionTwo": "We prioritize keeping you informed and involved throughout every stage of the software development lifecycle. With a proven track record of successful custom software development projects, Tech4Biz ensures your business objectives are met with precision and efficiency, driving sustained business growth and success."
+    },
+    {
+      "id": 3,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Data-Center.webp",
+      "title": "Data Center",
+      "subtitle": "Subtitle 3",
+      "description": "At Tech4Biz, we provide advanced data center solutions designed to ensure your applications run securely and efficiently. Our comprehensive approach integrates all aspects of data center management into a single, streamlined solution, delivering seamless operations, maximum uptime, and reliable performance. Count on our expertise to offer scalable, dependable, and secure data center solutions tailored to meet your specific business requirements.",
+      "descriptionTwo": "We work closely with you to develop customized data center solutions that address your unique needs. Whether your goals include enhancing security, improving system performance, or achieving more efficient infrastructure management, Tech4Biz ensures your data center architecture is optimized for success. Contact us today to discover how our data center services can drive your business forward."
+    },
+    {
+      "id": 4,
+      "image": "https://tech4bizsolutions.com./assets/images/services/Networking.jpg",
+      "title": "Networking",
+      "subtitle": "Subtitle 4",
+      "description": "At Tech4Biz, we deliver expert networking services designed to support the success of software development firms. A reliable network infrastructure is essential for seamless developer communication, efficient file sharing, and smooth project collaboration. Leveraging our extensive expertise, we provide custom networking solutions tailored to your business's unique needs.",
+      "descriptionTwo": "Our customized networking solutions create the foundation for streamlined project management and effective team collaboration. From essential file-sharing capabilities to advanced networking systems, Tech4Biz equips your team with the tools and connectivity needed to boost productivity, drive business growth, and ensure success."
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/config/vlsiSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/config/vlsiSchema.json
new file mode 100644
index 0000000..84d1d3c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/config/vlsiSchema.json
@@ -0,0 +1,96 @@
+{
+  "@context": "https://schema.org",
+  "mainEntity": {
+    "@type": "WebPage",
+    "name": "Explore Our Advanced VLSI Design Solutions",
+    "description": "We offer cutting-edge VLSI design solutions for innovation and security, ensuring robust and efficient designs for advanced technological needs.",
+    "provider": {
+      "@type": "Organization",
+      "name": "Tech4Biz",
+      "url": "https://tech4bizsolutions.com"
+    },
+    "offers": {
+      "@type": "AggregateOffer",
+      "offers": [
+        {
+          "@type": "Offer",
+          "name": "Security",
+          "description": "At Tech4Biz, we emphasize robust security in our VLSI designs, incorporating advanced measures to protect your digital infrastructure."
+        },
+        {
+          "@type": "Offer",
+          "name": "Collaboration",
+          "description": "Customized collaborative approaches in VLSI design to meet your unique business requirements."
+        },
+        {
+          "@type": "Offer",
+          "name": "Data Center",
+          "description": "Advanced data center solutions that integrate seamlessly with VLSI designs for enhanced performance."
+        },
+        {
+          "@type": "Offer",
+          "name": "Networking",
+          "description": "Expert networking services to support reliable and scalable VLSI design operations."
+        }
+      ]
+    },
+    "mainContentOfPage": {
+      "@type": "WebPageElement",
+      "sections": [
+        {
+          "@type": "ServiceSection",
+          "name": "Hero",
+          "description": "Highlights our VLSI design solutions and key messaging."
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "About",
+          "description": "Overview of our secure and innovative VLSI designs."
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Our Approach",
+          "description": "Step-by-step methodology behind our advanced VLSI design solutions."
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Timeline",
+          "description": "The process flow from initial VLSI design to final delivery."
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Industries",
+          "description": "Industry-specific applications of our VLSI design services."
+        },
+        {
+          "@type": "ServiceSection",
+          "name": "Software Insights",
+          "description": "Innovative trends and insights relevant to VLSI design and software development."
+        }
+      ]
+    },
+    "breadcrumb": {
+      "@type": "BreadcrumbList",
+      "itemListElement": [
+        {
+          "@type": "ListItem",
+          "position": 1,
+          "name": "Home",
+          "item": "https://tech4bizsolutions.com"
+        },
+        {
+          "@type": "ListItem",
+          "position": 2,
+          "name": "Services",
+          "item": "https://tech4bizsolutions.com/services"
+        },
+        {
+          "@type": "ListItem",
+          "position": 3,
+          "name": "VLSI Design",
+          "item": "https://tech4bizsolutions.com/services/vlsi-design"
+        }
+      ]
+    }
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/hooks/useVideoPlayer.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/hooks/useVideoPlayer.js
new file mode 100644
index 0000000..7c19ceb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/hooks/useVideoPlayer.js
@@ -0,0 +1,63 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import debounce from 'lodash/debounce';
+
+export const useVideoPlayer = () => {
+  const videoRef = useRef(null);
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+  const [isVideoLoading, setIsVideoLoading] = useState(true);
+  const [isVideoError, setIsVideoError] = useState(false);
+  const [isInViewport, setIsInViewport] = useState(false);
+
+  const handleIntersection = useCallback(([entry]) => {
+    setIsInViewport(entry.isIntersecting);
+  }, []);
+
+  const handleLoadedData = useCallback(() => {
+    setIsVideoLoading(false);
+  }, []);
+
+  const handleError = useCallback(() => {
+    setIsVideoError(true);
+    setIsVideoLoading(false);
+  }, []);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(handleIntersection, { 
+      threshold: 0.1,
+      rootMargin: '50px'
+    });
+
+    const currentVideo = videoRef.current;
+    if (currentVideo) {
+      observer.observe(currentVideo);
+    }
+
+    return () => {
+      if (currentVideo) {
+        observer.unobserve(currentVideo);
+      }
+    };
+  }, [handleIntersection]);
+
+  useEffect(() => {
+    const currentVideo = videoRef.current;
+    if (isVideoPlaying && isInViewport && currentVideo) {
+      currentVideo.addEventListener('loadeddata', handleLoadedData);
+      currentVideo.addEventListener('error', handleError);
+
+      return () => {
+        currentVideo.removeEventListener('loadeddata', handleLoadedData);
+        currentVideo.removeEventListener('error', handleError);
+      };
+    }
+  }, [isVideoPlaying, isInViewport, handleLoadedData, handleError]);
+
+  return { 
+    videoRef, 
+    isVideoPlaying, 
+    setIsVideoPlaying, 
+    isVideoLoading, 
+    isVideoError,
+    isInViewport 
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/index.jsx
new file mode 100644
index 0000000..578334f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/SoftwareVlsiDetailPage/vlsi/index.jsx
@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+import { Helmet } from 'react-helmet-async'
+import Hero from './components/Hero'
+import Timeline from './components/SoftwareTimeline'
+import VlsiAbout from './components/SoftwareAbout'
+import VlsiInfo from './components/ServiceInfo'
+import VlsiIndustries from './components/SoftwareIndustries'
+import VlsiInsights from './components/SoftwareInsights'
+import OurApproach from './components/OurApproach'
+import ScrollToTop from '@components/common/scroll/ScrollToTop'
+import ScrollToTopButton from "@components/common/scroll/ScrollToTopButton";
+
+import vlsiSchema from './config/vlsiSchema.json'
+
+const VlsiService = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+ 
+  const handleModalToggle = (isOpen) => {
+    setIsModalOpen(isOpen);
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>VLSI Design Services | Tech4Biz</title>
+        <meta name="title" content="VLSI Design Services | Tech4Biz" />
+        <meta
+          name="description"
+          content="Expert VLSI design services delivering innovative, reliable and high-performance semiconductor solutions."
+        />
+        <meta name="keywords" content="VLSI, chip design, semiconductor, IC design, Tech4Biz" />
+        <link rel="canonical" href="https://tech4bizsolutions.com/vlsi-design" />
+        {/* Open Graph / Facebook */}
+        <meta property="og:title" content="VLSI Design Services | Tech4Biz" />
+        <meta property="og:description" content="Expert VLSI design services delivering innovative, reliable and high-performance semiconductor solutions." />
+        <meta property="og:type" content="website" />
+        
+        {/* JSON-LD Schema */}
+        <script type="application/ld+json">
+          {JSON.stringify(vlsiSchema)}
+        </script>
+      </Helmet>
+      
+      <div>
+        <ScrollToTop/>
+        <ScrollToTopButton />
+        <div
+          className=""
+          style={{
+            position: "sticky",
+            top: "0",
+            zIndex: isModalOpen ? "1000" : "1", // Dynamically set z-index
+          }}
+        >
+          <Hero onModalToggle={handleModalToggle} />
+        </div>
+        <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <VlsiAbout/>
+        </div>
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <OurApproach/>
+        </div>
+        
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <VlsiInfo/>
+        </div>
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <Timeline/>
+        </div>
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <VlsiIndustries/>
+        </div>
+        
+         <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+        >
+        <VlsiInsights/>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default VlsiService
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/About.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/About.jsx
new file mode 100644
index 0000000..bd02a78
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/About.jsx
@@ -0,0 +1,216 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight, X, Play } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const BusinessServiceAbout = ({ data }) => {
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+
+  const handleVideoClick = () => {
+    setIsVideoPlaying(true);
+  };
+
+  const handleCloseVideo = (e) => {
+    e.stopPropagation();
+    setIsVideoPlaying(false);
+  };
+
+  const containerVariants = {
+    hidden: { opacity: 0, x: -50 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } },
+  };
+
+  const videoVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: { opacity: 1, scale: 1, transition: { duration: 0.5, ease: "easeOut" } },
+    exit: { opacity: 0, scale: 0.9, transition: { duration: 0.5, ease: "easeIn" } },
+  };
+
+  return (
+    <section className="py-20 px-4 md:px-8 bg-[#fff]">
+      <div className="max-w-7xl mx-auto">
+        <motion.div
+          className="grid md:grid-cols-2 gap-12 md:gap-8 items-center"
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={{
+            hidden: { opacity: 0 },
+            visible: {
+              opacity: 1,
+              transition: {
+                staggerChildren: 0.2
+              }
+            }
+          }}
+        >
+          {/* Image/Video Container */}
+          <motion.div
+            className="relative group"
+            variants={{
+              hidden: { opacity: 0, x: -50 },
+              visible: {
+                opacity: 1,
+                x: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.22, 1, 0.36, 1]
+                }
+              }
+            }}
+          >
+            <motion.div
+              className="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-purple-600/20 rounded-3xl transform rotate-3 scale-[0.98]"
+              animate={{
+                rotate: [3, -1, 3],
+                scale: [0.98, 0.99, 0.98]
+              }}
+              transition={{
+                duration: 8,
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+            />
+            <div className="relative overflow-hidden rounded-2xl bg-gray-900 aspect-[5/3]">
+              {!isVideoPlaying ? (
+                <motion.div
+                  className="relative group"
+                  onClick={handleVideoClick}
+                  variants={videoVariants}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                >
+                  <img
+                    src={data.img}
+                    alt="Feature showcase"
+                    className="w-full h-full object-cover opacity-90 group-hover:scale-105 transition-transform duration-700"
+                  />
+                  <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                    <Play className="text-white w-10 h-10 animate-pulse" />
+                  </div>
+                </motion.div>
+              ) : (
+                <motion.div
+                  className="relative"
+                  variants={videoVariants}
+                  initial="hidden"
+                  animate="visible"
+                  exit="exit"
+                >
+                  <video
+                    controls
+                    autoPlay
+                    className="rounded-lg object-cover w-full h-full"
+                  >
+                    <source src={data.video} type="video/mp4" />
+                    Your browser does not support the video tag.
+                  </video>
+                  <button
+                    onClick={handleCloseVideo}
+                    className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md"
+                  >
+                    <X className="w-6 h-6 text-black" />
+                  </button>
+                </motion.div>
+              )}
+            </div>
+          </motion.div>
+
+          {/* Content Container */}
+          <motion.div
+            className="relative"
+            variants={{
+              hidden: { opacity: 0, x: 50 },
+              visible: {
+                opacity: 1,
+                x: 0,
+                transition: {
+                  duration: 0.8,
+                  ease: [0.22, 1, 0.36, 1]
+                }
+              }
+            }}
+          >
+            <motion.span
+              className="text-blue-600 font-medium text-lg mb-4 block"
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 }
+              }}
+            >
+              {data.subTitle}
+            </motion.span>
+
+            <motion.h4
+              className="text-4xl md:text-5xl font-medium text-gray-900 mb-6 leading-tight"
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 }
+              }}
+            >
+              {data.title}
+            </motion.h4>
+
+            <motion.p
+              className="text-gray-600 text-lg leading-relaxed mb-8"
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 }
+              }}
+            >
+              {data.description}
+            </motion.p>
+
+            {/* CTA Button */}
+            <motion.button
+              className="group inline-flex items-center gap-3 text-lg font-semibold"
+              variants={{
+                hidden: { opacity: 0, y: 20 },
+                visible: { opacity: 1, y: 0 }
+              }}
+              whileHover="hover"
+            >
+              <span className="bg-gradient-to-r from-blue-600 to-blue-700 bg-clip-text text-transparent">
+                <Link to='/about'>
+                  {data.cta}
+                </Link>
+              </span>
+              <motion.div
+                className="p-2 bg-blue-600 rounded-full"
+                variants={{
+                  hover: {
+                    x: 10,
+                    transition: {
+                      type: "spring",
+                      stiffness: 400,
+                      damping: 10
+                    }
+                  }
+                }}
+              >
+                <ArrowRight className="w-4 h-4 text-white" />
+              </motion.div>
+            </motion.button>
+
+            {/* Background Decoration */}
+            <motion.div
+              className="absolute -top-20 -right-20 w-40 h-40 bg-blue-500/5 rounded-full blur-3xl"
+              animate={{
+                scale: [1, 1.2, 1],
+                opacity: [0.3, 0.2, 0.3]
+              }}
+              transition={{
+                duration: 5,
+                repeat: Infinity,
+                ease: "easeInOut"
+              }}
+            />
+          </motion.div>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default BusinessServiceAbout;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Benefits.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Benefits.jsx
new file mode 100644
index 0000000..bebe90f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Benefits.jsx
@@ -0,0 +1,126 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { Zap, Shield, Rocket, Target, Coffee, Star } from "lucide-react";
+
+// Map icon names to components
+const iconMap = {
+  Zap: <Zap className="text-gray-800 w-5 h-5" />,
+  Shield: <Shield className="text-gray-800 w-5 h-5" />,
+  Rocket: <Rocket className="text-gray-800 w-5 h-5" />,
+  Target: <Target className="text-gray-800 w-5 h-5" />,
+  Coffee: <Coffee className="text-gray-800 w-5 h-5" />,
+  Star: <Star className="text-gray-800 w-5 h-5" />,
+};
+
+const BusinessServiceBenefits = ({ data }) => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.15,
+        delayChildren: 0.3,
+      },
+    },
+  };
+
+  const itemVariants = {
+    hidden: {
+      opacity: 0,
+      scale: 0.9,
+    },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: {
+        type: "spring",
+        stiffness: 100,
+        damping: 12,
+      },
+    },
+  };
+
+  const getSizeClasses = (size) => {
+    switch (size) {
+      case "large":
+        return "md:col-span-2 md:row-span-2";
+      case "medium":
+        return "md:col-span-2 md:row-span-1";
+      default:
+        return "md:col-span-1 md:row-span-1";
+    }
+  };
+
+  return (
+    <section className="py-20 px-4 bg-[#fff]">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <motion.div
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          <motion.h4
+            className="text-4xl md:text-5xl font-medium text-gray-900 mb-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+          >
+            {data.title}
+          </motion.h4>
+          <motion.p
+            className="text-xl text-gray-600 max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 }}
+          >
+            Experience the future of digital solutions with our premium features
+          </motion.p>
+        </motion.div>
+
+        {/* Bento Grid */}
+        <motion.div
+          className="grid grid-cols-1 md:grid-cols-4 gap-4 auto-rows-[fit-content]"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+        >
+          {data.content.map((benefit, index) => (
+            <motion.div
+              key={index}
+              variants={itemVariants}
+              whileHover={{
+                scale: 1.02,
+                transition: { duration: 0.2 },
+              }}
+              className={`${getSizeClasses(benefit.size)} ${benefit.accent} bg-white shadow-xl
+                rounded-3xl p-3 hover:shadow-xl transition-shadow duration-300
+                flex flex-col justify-between overflow-hidden relative`}
+            >
+              {/* Content */}
+              <div className="relative z-10">
+                <motion.div
+                  className="h-12 w-12 rounded-2xl flex items-center justify-center mb-1"
+                  whileHover={{ rotate: 360 }}
+                  transition={{ duration: 0.5 }}
+                >
+                  {iconMap[benefit.icon] || <Star className="text-gray-800 w-5 h-5" />}
+                </motion.div>
+                <h5 className="text-xl font-medium text-gray-900 mb-2">
+                  {benefit.title}
+                </h5>
+                <p className="text-gray-600">{benefit.description}</p>
+              </div>
+
+              {/* Decorative Elements */}
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default BusinessServiceBenefits;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Hero.jsx
new file mode 100644
index 0000000..decf848
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Hero.jsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import CRMModalForm from "@components/modals/CRMModalForm";
+
+const Hero = ({data , onModalToggle }) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const openModal = () => {
+    setIsModalVisible(true);
+    onModalToggle(true); // Notify parent modal is open
+  };
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+    onModalToggle(false); // Notify parent modal is closed
+  };
+  return (
+    <>
+    <div className="ser-banner-sec bg-black text-white">
+      {/* Video Background */}
+      <div className="relative w-full h-[750px] overflow-hidden ">
+        <video
+          className="absolute top-0 left-0 w-full h-full object-cover"
+          src={data.path}
+          autoPlay
+          loop
+          muted
+        />
+        <div className="absolute top-0 left-0 w-full h-full bg-black/60" />
+
+        {/* Content Section */}
+        <div className="absolute inset-0 max-w-6xl mx-auto py-12  md:px-12 mt-10 flex flex-col justify-start items-start text-left px-6">
+          <h4 className="text-sm font-light text-white mb-4">{data.breadcrumb.title} / {data.breadcrumb.subTiltle}</h4>
+          <hr className=" mb-4 w-full border-t border-white/30" />
+          <h1 className="text-4xl md:text-4xl font-bold mb-6">
+          {data?.title}
+          </h1>
+
+        
+
+          <p className="text-lg md:text-xl mb-8">
+          {data.description}
+          </p>
+
+          <button onClick={() => openModal(true)} className="flex items-center gap-2  px-0 py-3 ">
+           <span className="text-white" > Let’s Talk</span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-10  w-10  rounded-3xl p-2 shadow-md bg-white text-black  hover:bg-gray-100"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M13 7l5 5m0 0l-5 5m5-5H6"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+      <CRMModalForm
+            isVisible={isModalVisible}
+            onClose={handleModalClose}
+            source="Serivces Page Banner" 
+          />
+          </>
+  );
+};
+
+export default Hero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/OurApproach.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/OurApproach.jsx
new file mode 100644
index 0000000..2604611
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/OurApproach.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+
+const OurApproach = ({data}) => {
+  const [ref, inView] = useInView({ triggerOnce: true, threshold: 0.1 });
+
+  const cardVariants = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 50 },
+  };
+
+  const BASE_URL =
+  window.location.hostname === 'localhost'
+    ? 'http://localhost:5173'
+    : 'https://tech4bizsolutions.com';
+
+  return (
+    <div className="bg-[#1F2937]">
+      <div className="max-w-6xl mx-auto px-5 py-10">
+        <motion.div
+          ref={ref}
+          initial="hidden"
+          animate={inView ? 'visible' : 'hidden'}
+          exit="exit"
+          transition={{ duration: 1 }}
+        >
+          <h4 className="text-4xl text-white font-medium mb-4">Our Approach</h4>
+          <p className="text-lg text-[#fff] mb-10">
+            {data.title}
+          </p>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-1">
+            {data.content.map((step, index) => (
+              <motion.div
+                key={index}
+                className="bg-transparent pt-5 px-1 rounded-lg shadow-none hover:shadow-xl transition-shadow duration-300"
+                variants={cardVariants}
+                whilehover={{ scale: 1.05 }}
+                transition={{ duration: 0.3 }}
+              >
+                <img
+                  src={`${BASE_URL}${step.image}`}
+                  alt={step.title}
+                  className="w-5/12 h-44 py-2 object-contain rounded-md mb-1"
+                  style={{
+                    filter:'invert(1)'
+                  }}
+                />
+                <h5 className="text-xl font-medium text-white mb-2">{step.title}</h5>
+                {/* <p className="text-gray-300">{step.description}</p> */}
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default OurApproach;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Overview.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Overview.jsx
new file mode 100644
index 0000000..3b8d4ac
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/Overview.jsx
@@ -0,0 +1,371 @@
+
+import React, { useState, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const BusinessServiceOverview = ({data}) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const sectionRef = useRef(null);
+  const isInitializedRef = useRef(false);
+
+
+
+
+  useEffect(() => {
+    const section = sectionRef.current;
+
+    const handleScroll = () => {
+      if (!section) return;
+
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.offsetHeight;
+      const scrollY = window.scrollY;
+
+      const relativeScroll = scrollY - sectionTop;
+      const progressPerCard = sectionHeight / data.content.length;
+
+      if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
+        const newIndex = Math.min(
+          Math.floor(relativeScroll / progressPerCard),
+          data.content.length - 1
+        );
+        setActiveIndex(newIndex);
+      }
+    };
+
+    // Trigger scroll on page load
+    if (!isInitializedRef.current && section) {
+      const sectionTop = section.offsetTop;
+      const progressPerCard = section.offsetHeight / data.content.length;
+      window.scrollTo(0, sectionTop + activeIndex * progressPerCard);
+      isInitializedRef.current = true;
+    }
+
+    // Scroll event listener
+    window.addEventListener("scroll", handleScroll);
+
+    // Initial scroll check
+    handleScroll();
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [data.content.length, activeIndex]);
+
+  const cardVariants = {
+    enter: {
+      y: -50,
+      opacity: 0,
+    },
+    center: {
+      y: 0,
+      opacity: 1,
+    },
+    exit: {
+      y: -100,
+      opacity: 0,
+    },
+  };
+
+  return (
+    <div ref={sectionRef} className="h-[700vh] relative">
+      <div className="sticky top-0 h-screen flex items-center justify-center bg-[#fff] overflow-hidden">
+        <div className="max-w-4xl w-full mx-4">
+          {/* Progress Bar */}
+          <motion.div className="h-1 bg-gray-200 rounded-full mb-12 overflow-hidden">
+            <motion.div
+              className="h-full bg-gradient-to-r from-[#2564eb9f] to-[#2563EB] origin-left"
+              animate={{
+                scaleX: (activeIndex + 1) / data.content.length,
+              }}
+              transition={{ duration: 0.5, ease: "easeInOut" }}
+            />
+          </motion.div>
+
+          {/* Card Container */}
+          <div className="relative h-[500px] w-full perspective-1000">
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={activeIndex}
+                variants={cardVariants}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{
+                  duration: 0.2,
+                  ease: [0.4, 0.0, 0.2, 1],
+                }}
+                className="absolute inset-0 bg-white rounded-3xl p-12 shadow-2xl"
+              >
+                <div className="h-full flex flex-col justify-between relative overflow-hidden">
+                  <div className="relative z-10">
+                    <motion.span
+                      className="text-blue-600 text-lg mb-4 block font-medium"
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.2 }}
+                    >
+                      {data.content[activeIndex].title}
+                    </motion.span>
+                    <motion.h2
+                      className="text-4xl md:text-5xl font-bold text-gray-900 mb-6"
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.3 }}
+                    >
+                      {data.content[activeIndex].subtitle}
+                    </motion.h2>
+                    <motion.p
+                      className="text-gray-600 text-lg leading-relaxed w-9/12"
+                      initial={{ opacity: 0, y: 20 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: 0.4 }}
+                    >
+                      {data.content[activeIndex].description}
+                    </motion.p>
+                  </div>
+
+                  <motion.div
+                    className="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-gradient-to-br from-blue-100 to-purple-100 opacity-50"
+                    animate={{
+                      scale: [1, 1.2, 1],
+                    }}
+                    transition={{
+                      duration: 20,
+                      repeat: Infinity,
+                      ease: "linear",
+                    }}
+                  />
+
+                  <motion.div
+                    className="text-gray-900 text-9xl font-bold absolute bottom-8 right-12 opacity-5"
+                    initial={{ opacity: 0, scale: 0.5 }}
+                    animate={{ opacity: 0.05, scale: 1 }}
+                    transition={{ delay: 0.5 }}
+                  >
+                    {activeIndex + 1}
+                  </motion.div>
+                </div>
+              </motion.div>
+            </AnimatePresence>
+          </div>
+
+          
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BusinessServiceOverview;
+
+// import React, { useState, useRef, useEffect } from 'react';
+// import { motion, AnimatePresence } from 'framer-motion';
+
+// const BusinessServiceOverview = () => {
+//   const [activeIndex, setActiveIndex] = useState(0);
+//   const sectionRef = useRef(null);
+//   const [hasScrolledThrough, setHasScrolledThrough] = useState(false);
+
+//   const cards = [
+//     {
+//       title: "Digital Innovation",
+//       subtitle: "Transform Your Business",
+//       description: "Revolutionize your organization with cutting-edge digital solutions that drive growth and innovation. Our comprehensive approach ensures seamless integration of modern technologies."
+//     },
+//     {
+//       title: "Cloud Solutions",
+//       subtitle: "Scale with Confidence",
+//       description: "Build robust and scalable systems with our enterprise-grade cloud infrastructure. Leverage the power of distributed computing with unmatched reliability and performance."
+//     },
+//     {
+//       title: "AI Integration",
+//       subtitle: "Smart Automation",
+//       description: "Harness the power of artificial intelligence to automate processes and gain valuable insights. Our AI solutions adapt and learn from your unique business requirements."
+//     },
+//     {
+//       title: "AI Integration",
+//       subtitle: "Smart Automation",
+//       description: "Harness the power of artificial intelligence to automate processes and gain valuable insights. Our AI solutions adapt and learn from your unique business requirements."
+//     },
+//     {
+//       title: "AI Integration",
+//       subtitle: "Smart Automation",
+//       description: "Harness the power of artificial intelligence to automate processes and gain valuable insights. Our AI solutions adapt and learn from your unique business requirements."
+//     },
+//     {
+//       title: "AI Integration",
+//       subtitle: "Smart Automation",
+//       description: "Harness the power of artificial intelligence to automate processes and gain valuable insights. Our AI solutions adapt and learn from your unique business requirements."
+//     }
+//   ];
+
+//   useEffect(() => {
+//     const section = sectionRef.current;
+//     let prevScrollY = 0;
+    
+//     const handleScroll = () => {
+//       if (!section) return;
+      
+//       const sectionTop = section.offsetTop;
+//       const sectionHeight = section.offsetHeight;
+//       const scrollY = window.scrollY;
+      
+//       // Calculate progress within the section
+//       const relativeScroll = scrollY - sectionTop;
+//       const progressPerCard = sectionHeight / cards.length;
+      
+//       if (scrollY >= sectionTop && scrollY < (sectionTop + sectionHeight)) {
+//         const newIndex = Math.min(
+//           Math.floor(relativeScroll / progressPerCard),
+//           cards.length - 1
+//         );
+//         setActiveIndex(newIndex);
+        
+//         // Prevent default scroll within the section
+//         if (scrollY > prevScrollY && !hasScrolledThrough) {
+//           window.scrollTo(0, sectionTop + (newIndex * progressPerCard));
+//         }
+//       }
+      
+//       // Check if user has scrolled through all cards
+//       if (scrollY >= (sectionTop + sectionHeight - window.innerHeight)) {
+//         setHasScrolledThrough(true);
+//       }
+      
+//       prevScrollY = scrollY;
+//     };
+
+//     window.addEventListener('scroll', handleScroll);
+//     return () => window.removeEventListener('scroll', handleScroll);
+//   }, [cards.length, hasScrolledThrough]);
+
+//   const cardVariants = {
+//     enter: {
+//       y: 100,
+//       opacity: 0
+//     },
+//     center: {
+//       y: 0,
+//       opacity: 1
+//     },
+//     exit: {
+//       y: -100,
+//       opacity: 0
+//     }
+//   };
+
+//   return (
+//     <div 
+//       ref={sectionRef} 
+//       className="h-[660vh] relative"
+//     >
+//       <div className="sticky top-0 h-screen flex items-center justify-center bg-[#fff] overflow-hidden">
+//         <div className="max-w-4xl w-full mx-4">
+//           {/* Progress Bar */}
+//           <motion.div 
+//             className="h-1 bg-gray-200 rounded-full mb-12 overflow-hidden"
+//           >
+//             <motion.div
+//               className="h-full bg-gradient-to-r from-blue-500 to-purple-500 origin-left"
+//               animate={{
+//                 scaleX: (activeIndex + 1) / cards.length
+//               }}
+//               transition={{ duration: 0.5, ease: "easeInOut" }}
+//             />
+//           </motion.div>
+
+//           {/* Card Container */}
+//           <div className="relative h-[500px] w-full perspective-1000">
+//             <AnimatePresence mode="wait">
+//               <motion.div
+//                 key={activeIndex}
+//                 variants={cardVariants}
+//                 initial="enter"
+//                 animate="center"
+//                 exit="exit"
+//                 transition={{
+//                   duration: 0.6,
+//                   ease: [0.4, 0.0, 0.2, 1]
+//                 }}
+//                 className="absolute inset-0 bg-white rounded-3xl p-12 shadow-2xl"
+//               >
+//                 {/* Card Content */}
+//                 <div className="h-full flex flex-col justify-between relative overflow-hidden">
+//                   <div className="relative z-10">
+//                     <motion.span 
+//                       className="text-blue-600 text-lg mb-4 block font-medium"
+//                       initial={{ opacity: 0, y: 20 }}
+//                       animate={{ opacity: 1, y: 0 }}
+//                       transition={{ delay: 0.2 }}
+//                     >
+//                       {cards[activeIndex].subtitle}
+//                     </motion.span>
+//                     <motion.h2 
+//                       className="text-4xl md:text-5xl font-bold text-gray-900 mb-6"
+//                       initial={{ opacity: 0, y: 20 }}
+//                       animate={{ opacity: 1, y: 0 }}
+//                       transition={{ delay: 0.3 }}
+//                     >
+//                       {cards[activeIndex].title}
+//                     </motion.h2>
+//                     <motion.p 
+//                       className="text-gray-600 text-lg leading-relaxed"
+//                       initial={{ opacity: 0, y: 20 }}
+//                       animate={{ opacity: 1, y: 0 }}
+//                       transition={{ delay: 0.4 }}
+//                     >
+//                       {cards[activeIndex].description}
+//                     </motion.p>
+//                   </div>
+                  
+//                   {/* Decorative Elements */}
+//                   <motion.div 
+//                     className="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-gradient-to-br from-blue-100 to-purple-100 opacity-50"
+//                     animate={{
+//                       scale: [1, 1.2, 1],
+//                       rotate: [0, 90, 0],
+//                     }}
+//                     transition={{
+//                       duration: 20,
+//                       repeat: Infinity,
+//                       ease: "linear"
+//                     }}
+//                   />
+                  
+//                   {/* Card Number */}
+//                   <motion.div 
+//                     className="text-gray-900 text-9xl font-bold absolute bottom-8 right-12 opacity-5"
+//                     initial={{ opacity: 0, scale: 0.5 }}
+//                     animate={{ opacity: 0.05, scale: 1 }}
+//                     transition={{ delay: 0.5 }}
+//                   >
+//                     {activeIndex + 1}
+//                   </motion.div>
+//                 </div>
+//               </motion.div>
+//             </AnimatePresence>
+//           </div>
+
+//           {/* Navigation Dots */}
+//           <div className="flex justify-center gap-3 mt-8">
+//             {cards.map((_, index) => (
+//               <motion.div
+//                 key={index}
+//                 className={`h-2 rounded-full ${
+//                   index === activeIndex ? 'w-8 bg-blue-500' : 'w-2 bg-gray-300'
+//                 }`}
+//                 initial={false}
+//                 animate={{
+//                   width: index === activeIndex ? 32 : 8
+//                 }}
+//                 transition={{ duration: 0.3 }}
+//               />
+//             ))}
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
+
+// export default BusinessServiceOverview;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/RelatedServices.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/RelatedServices.jsx
new file mode 100644
index 0000000..a98b25e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/components/RelatedServices.jsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import  services  from "@pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json";
+import { generateServiceSlug } from "@pages/detail-pages/DigitalSolutionsDetailPage/utils/helpers";
+import { Link } from 'react-router-dom';
+
+const RelatedServices = () => {
+  
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: 0.1 }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 }
+    }
+  };
+
+  // Take only first 3 services to display as related
+  const relatedServices = services.slice(0, 3);
+
+  return (
+    <div className="w-full space-y-24 py-16 px-4 bg-black text-white">
+    
+      {/* Section 7: Staggered grid with hover effects */}
+      <section className="container mx-auto">
+        <h2 className="text-3xl font-bold mb-8">Innovation Hub</h2>
+        <motion.div 
+          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+        >
+          {relatedServices.map((service, index) => (
+            <motion.div
+              key={`${service.title}-${index}`}
+              variants={itemVariants}
+              whileHover={{ scale: 1.05 }}
+              className="group relative overflow-hidden rounded-lg"
+            >
+              <Link to={`/services/${generateServiceSlug(service.title)}`}>
+              <img src={service.image} alt={service.title} className="w-full h-64 object-cover" />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent p-6 flex flex-col justify-end transform translate-y-4 group-hover:translate-y-0 transition-transform">
+                <h4 className="text-xl font-medium text-white mb-2">{service.title}</h4>
+                {/* <p className="text-gray-200 text-sm opacity-0 group-hover:opacity-100 transition-opacity">
+                  {service.description}
+                </p> */}
+              </div>
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+      </section>
+
+</div>
+  );
+
+};
+export default RelatedServices
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/data/businessServicesSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/data/businessServicesSchema.json
new file mode 100644
index 0000000..d7c271c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/data/businessServicesSchema.json
@@ -0,0 +1,169 @@
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Tech4Biz Business Services",
+  "description": "Explore our specialized business services including ASIC AI Deployment, Improved AI Efficiency, Advanced FPGA Design, and Flexible AI Solutions.",
+  "url": "https://tech4bizsolutions.com/business-services",
+  "provider": {
+    "@type": "Organization",
+    "name": "Tech4Biz",
+    "url": "https://tech4bizsolutions.com"
+  },
+  "mainEntity": {
+    "@type": "ItemList",
+    "itemListElement": [
+      {
+        "@type": "Service",
+        "position": 1,
+        "name": "Deployment of ASIC AI",
+        "url": "https://tech4bizsolutions.com/business-services/deployment-of-asic-ai",
+        "description": "Revolutionizing AI Deployment: Harness the power of ASIC boards to outperform traditional cloud solutions with unmatched performance and cost efficiency.",
+        "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/h-about.mp4",
+        "offers": {
+          "@type": "AggregateOffer",
+          "offers": [
+            {
+              "@type": "Offer",
+              "name": "Cutting-Edge Performance",
+              "description": "Leverage state-of-the-art ASIC technology designed to accelerate AI workloads, delivering results that outperform traditional CPU- and GPU-based systems."
+            },
+            {
+              "@type": "Offer",
+              "name": "Cost Efficiency",
+              "description": "Slash operational costs significantly by reducing query processing expenses, offering a highly economical alternative to traditional AI infrastructure."
+            },
+            {
+              "@type": "Offer",
+              "name": "Seamless Integration",
+              "description": "Our solutions seamlessly integrate with your existing infrastructure, minimizing disruption and ensuring smooth operations."
+            }
+          ]
+        }
+      },
+      {
+        "@type": "Service",
+        "position": 2,
+        "name": "Improve AI Efficiency with Faster Speed and Performance",
+        "url": "https://tech4bizsolutions.com/business-services/improved-efficiency",
+        "description": "Accelerate AI performance, multitasking, and processing efficiency.",
+        "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4",
+        "offers": {
+          "@type": "AggregateOffer",
+          "offers": [
+            {
+              "@type": "Offer",
+              "name": "Speed Optimization",
+              "description": "We offer solutions that accelerate AI computations, enabling faster decision-making and quicker results, even with complex AI models."
+            },
+            {
+              "@type": "Offer",
+              "name": "Multitasking Mastery",
+              "description": "Our systems are built to handle multiple tasks simultaneously, improving productivity by reducing downtime and allowing your business to process large-scale AI models seamlessly."
+            },
+            {
+              "@type": "Offer",
+              "name": "Cost Reduction",
+              "description": "By operating at lower expenses, our solutions help your business save on energy and operational costs while maintaining high performance."
+            }
+          ]
+        }
+      },
+      {
+        "@type": "Service",
+        "position": 3,
+        "name": "Advanced FPGA Design",
+        "url": "https://tech4bizsolutions.com/business-services/advanced-fpga-design",
+        "description": "Our FPGA designs utilize the latest and most recent Artificial Neural Networks (ANN) and CNN technologies to improve AI efficiency.",
+        "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4",
+        "offers": {
+          "@type": "AggregateOffer",
+          "offers": [
+            {
+              "@type": "Offer",
+              "name": "Pioneering FPGA Designs",
+              "description": "Our cutting-edge FPGA architectures integrate advanced neural networks, enabling faster, more accurate AI processing for diverse applications."
+            },
+            {
+              "@type": "Offer",
+              "name": "Superior Computation",
+              "description": "Optimized for high performance, our FPGA solutions deliver superior computational power to handle complex AI models with speed and precision."
+            },
+            {
+              "@type": "Offer",
+              "name": "Scalable Solutions",
+              "description": "Designed to grow with your business, our systems enable seamless scaling of AI workloads as demands increase, all without compromising performance."
+            }
+          ]
+        }
+      },
+      {
+        "@type": "Service",
+        "position": 4,
+        "name": "Flexible Solutions",
+        "url": "https://tech4bizsolutions.com/business-services/flexible-solutions",
+        "description": "Adaptive systems that enhance speed and deliver high-performance AI for optimal results.",
+        "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4",
+        "offers": {
+          "@type": "AggregateOffer",
+          "offers": [
+            {
+              "@type": "Offer",
+              "name": "Adaptive Technologies",
+              "description": "Our solutions evolve with your business needs, allowing your AI systems to seamlessly adapt to changes in technology and market demands."
+            },
+            {
+              "@type": "Offer",
+              "name": "High Performance",
+              "description": "We deliver AI processing solutions that provide exceptional speed, accuracy, and reliability, empowering your business with high-performance systems."
+            },
+            {
+              "@type": "Offer",
+              "name": "Flexibility",
+              "description": "Our tailored solutions are designed to meet every unique requirement, offering the flexibility to scale and adjust according to your business's specific AI needs."
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "breadcrumb": {
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Home",
+        "item": "https://tech4bizsolutions.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Services",
+        "item": "https://tech4bizsolutions.com/services"
+      },
+      {
+        "@type": "ListItem",
+        "position": 3,
+        "name": "Business Services",
+        "item": "https://tech4bizsolutions.com/business-services"
+      }
+    ]
+  },
+  "about": [
+    {
+      "@type": "Thing",
+      "name": "Our Approach",
+      "description": "Innovative ASIC architecture for superior computation, optimized performance, cost reduction, enhanced efficiency, and scalable systems."
+    },
+    {
+      "@type": "Thing",
+      "name": "Benefits",
+      "description": "Cutting-edge performance, cost efficiency, seamless integration, enhanced scalability, unmatched reliability, custom solutions, and expert support."
+    },
+    {
+      "@type": "Thing",
+      "name": "Expertise",
+      "description": "Revolutionizing AI with purpose-built hardware, unrivaled performance and cost savings, innovative ASIC-based AI processing, and future-ready AI solutions."
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/data/projectContentPage.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/data/projectContentPage.json
new file mode 100644
index 0000000..7fcefcf
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/data/projectContentPage.json
@@ -0,0 +1,587 @@
+[
+  {
+
+    "title": "Deployment of ASIC AI",
+    "slug": "deployment-of-asic-ai",
+    "meta": {
+      "title": "Deployment of ASIC AI",
+      "description": "description"
+    },
+    "banner": {
+      "title": "Deployment of ASIC AI",
+      "description": " Revolutionizing AI Deployment: Harness the power of ASIC boards to outperform traditional cloud solutions with unmatched performance and cost efficiency.",
+      "breadcrumb": {
+        "title": "Services",
+        "subTiltle": "Deployment Of Asic Ai"
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/h-about.mp4"
+    },
+    "connection": {
+      "title": "Innovative ASIC AI Solutions",
+      "subTitle": "Innovative Solutions",
+      "cta": "Discover More",
+      "description": "Tech4Biz offers breakthrough ASIC AI solutions tailored to meet the demands of modern businesses. By leveraging our advanced ASIC technology, you can unlock high-speed processing, enhanced efficiency, and seamless scalability for AI-powered systems.",
+      "img": "/images/services/services/deployment-of-asic.webp",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/deployment-of-asic.mp4"
+    },
+    "approach": {
+      "title": "Our Approach : Innovative ASIC architecture for superior computation.",
+      "content": [
+        {
+          "title": "Optimized Performance ",
+          "image": "/images/solutions/approach/app-1.png",
+          "description": "Advanced technology ensuring superior processing speed."
+        },
+        {
+          "title": "Cost Reduction",
+          "image": "/images/solutions/approach/app-2.png",
+          "description": "Scalable, budget-friendly AI solutions for sustainable growth."
+        },
+        {
+          "title": "Enhanced Efficiency",
+          "image": "/images/solutions/approach/app-3.png",
+          "description": "Minimal latency for maximum operational output."
+        },
+        {
+          "title": "Scalable Systems",
+          "image": "/images/solutions/approach/app-4.png",
+          "description": "Seamlessly adaptable infrastructure to meet evolving demands."
+        }
+      ]
+    },
+    "expertise": {
+      "title": "Advanced Solutions for a Competitive Edge",
+      "subTitle": "subTitle",
+      "content": [
+    {
+        "title": "Overview",
+        "subtitle": "Revolutionizing AI with Purpose-Built Hardware",
+        "description": "Application-Specific Integrated Circuits (ASICs) are transforming AI by delivering superior performance and efficiency compared to traditional hardware. Our solutions are purpose-built to optimize specific computational tasks, ensuring unmatched speed, cost savings, and reliability. With features like energy efficiency, high compatibility with modern AI frameworks, and scalable architecture, ASIC boards are ideal for businesses seeking innovative and future-proof AI solutions."
+    },
+    {
+        "title": "Benefits",
+        "subtitle": "Unrivaled Performance and Cost Savings",
+        "description": "ASIC technology delivers faster AI processing, significant cost savings, and reliable performance for critical tasks. Its energy-efficient design reduces power consumption, while scalable solutions adapt easily to growing data and workload demands."
+    },
+    {
+        "title": "Challenges",
+        "subtitle": "Traditional Limitations in AI Computation",
+        "description": "Traditional AI systems face high costs, slow performance, and scalability issues. Legacy infrastructure often struggles to handle advanced computations, and integrating new systems can be complex and time-consuming."
+    },
+    {
+        "title": "Solution",
+        "subtitle": "Innovative ASIC-Based AI Processing",
+        "description": "ASIC-based AI solutions provide faster processing, lower costs, and seamless scalability. Designed for simple integration with existing setups, they reduce operational challenges and are future-ready to support emerging AI technologies."
+    },
+    {
+        "title": "Conclusion",
+        "subtitle": "Future-Ready ASIC AI Solutions",
+        "description": "ASIC technology is transforming AI by delivering unparalleled performance, efficiency, and scalability. By adopting our solutions, businesses can unlock new opportunities, reduce costs, and future-proof their operations. Partner with us to harness the full potential of ASIC boards and redefine what’s possible in AI deployment. Together, we’ll lead the way into a smarter, more efficient future for your business."
+    }
+]
+
+    },
+
+    "benefits": {
+      "title": "Why Choose Tech4Biz?",
+      "subTitle": "subTitle",
+      "content": [
+        {
+          "title": "Cutting-Edge Performance",
+          "description": "Leverage state-of-the-art ASIC technology designed to accelerate AI workloads, delivering results that outperform traditional CPU- and GPU-based systems.",
+          "icon": "Zap",
+          "size": "large",
+          "accent": "bg-gradient-to-br from-amber-50 to-orange-50"
+        },
+        {
+          "title": "Cost Efficiency",
+          "description": "Slash operational costs significantly by reducing query processing expenses, offering a highly economical alternative to traditional AI infrastructure.",
+          "icon": "Shield",
+          "size": "small",
+          "accent": "bg-gradient-to-br from-blue-50 to-purple-50"
+        },
+        {
+          "title": "Seamless Integration",
+          "description": "Our We design our solutions to seamlessly integrate with your existing infrastructure, minimizing disruption and ensuring smooth operations.",
+          "icon": "Rocket",
+          "size": "small",
+          "accent": "bg-gradient-to-br from-emerald-50 to-teal-50"
+        },
+        {
+          "title": "Enhanced Scalability",
+          "description": "Whether you're a small business or a large enterprise, our solutions scale dynamically to meet your growing computational needs.",
+          "icon": "Target",
+          "size": "medium",
+          "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+        },
+        {
+          "title": "Unmatched Reliability",
+          "description": "Depend on robust and secure systems for mission-critical applications, providing peace of mind with consistent and predictable performance.",
+          "icon": "Shield",
+          "size": "small",
+          "accent": "bg-gradient-to-br from-blue-50 to-purple-50"
+        },
+        {
+          "title": "Custom Solutions",
+          "description": "We tailor our offerings to suit your specific AI requirements, ensuring a personalized and effective solution for your business challenges.",
+          "icon": "Rocket",
+          "size": "small",
+          "accent": "bg-gradient-to-br from-emerald-50 to-teal-50"
+        },
+        {
+          "title": "Expert Support",
+          "description": "From initial consultation to deployment and maintenance, our team provides end-to-end support, ensuring your journey into ASIC-based AI is seamless and hassle-free.",
+          "icon": "Target",
+          "size": "medium",
+          "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+        }
+      ]
+    },
+    "review": {
+      "title": "Transforming AI Efficiency",
+      "description": "Tech4Biz collaborated with a leading logistics company to transform its AI operations using our state-of-the-art ASIC technology. Facing high costs and latency issues with cloud platforms, the company switched to our tailored ASIC solutions and achieved.",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  },
+  {
+    "title": "Improve AI Efficiency with Faster Speed and Performance",
+    "slug": "improved-efficiency",
+    "meta": {
+      "title": "Improve AI Efficiency with Faster Speed and Performance",
+      "description": "description"
+    },
+    "banner": {
+      "title": "Improve AI Efficiency with Faster Speed and Performance",
+      "description": "Accelerate AI performance, multitasking, and processing efficiency.",
+      "breadcrumb": {
+        "title": "services",
+        "subTiltle": "Improved Ai Efficiency "
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4"
+    },
+    "connection": {
+      "title": "State-of-the-Art Solutions for Optimized AI Performance",
+      "subTitle": "Innovative Solutions",
+      "cta": "Discover More",
+      "description": "Our advanced AI solutions are designed to deliver fast processing and top-notch performance, helping large models produce quicker results while handling multitasking seamlessly.",
+      "img": "/images/services/services/improved-efficiency.webp",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/improved-efficiency.mp4"
+    },
+    "approach": {
+      "title": "Tech4Biz Approach to AI Efficiency",
+      "content": [
+        {
+          "title": "Speed Optimization",
+          "image": "/images/solutions/approach/app-1.png",
+          "description": "description"
+        },
+        {
+          "title": "Scalable Solutions",
+          "image": "/images/solutions/approach/app-2.png",
+          "description": "description"
+        },
+        {
+          "title": "Advanced Algorithms",
+          "image": "/images/solutions/approach/app-3.png",
+          "description": "description"
+        },
+        {
+          "title": "Real-time Performance",
+          "image": "/images/solutions/approach/app-4.png",
+          "description": "description"
+        }
+      ]
+    },
+    "expertise": {
+      "title": "Top Benefits of Enhanced AI Efficiency with Tech4Biz",
+      "subTitle": "Discover the top six benefits that AI efficiency brings to your business when you choose Tech4Biz",
+      "content": [
+    {
+        "title": "Overview",
+        "subtitle": "Efficient AI Solutions",
+        "description": "Our AI performance solutions redefine efficiency by offering faster processing and enhanced multitasking capabilities. Designed for businesses seeking to maximize productivity, these solutions ensure optimized performance with minimal latency. With seamless scalability, we provide future-proof AI systems that adapt to your growing needs."
+    },
+    {
+        "title": "Benefits",
+        "subtitle": "Faster, Smarter Workflows",
+        "description": "By implementing our AI solutions, businesses experience unmatched speed and productivity gains. Our technology accelerates large-scale AI computations, enabling quicker decision-making while reducing operational costs. The ability to handle multiple tasks efficiently improves overall performance and allows for scalable growth."
+    },
+    {
+        "title": "Challenges",
+        "subtitle": "Fixing AI Issues",
+        "description": "Businesses often face AI performance bottlenecks, such as slow processing speeds and scalability issues. Outdated systems struggle with multitasking, leading to inefficiency and higher costs. Overcoming these challenges requires innovative solutions that optimize performance and ensure long-term operational success."
+    },
+    {
+        "title": "Solution",
+        "subtitle": "Streamlined AI Systems",
+        "description": "Our enhanced AI systems address these challenges by offering faster processing, streamlined multitasking, and scalable solutions. We design these systems to deliver superior performance at minimal cost, enabling businesses to maintain efficiency and competitiveness. We focus on providing tailored solutions that meet your unique operational needs."
+    },
+    {
+        "title": "Conclusion",
+        "subtitle": "Achieve More, Faster",
+        "description": "Choosing our AI solutions means embracing efficiency, speed, and productivity for your business. With advanced technology and scalable solutions, we ensure faster results and smoother operations. Partner with us to unlock the full potential of AI and drive growth in an ever-evolving market."
+    }
+]
+
+    },
+
+    "benefits": {
+      "title": "Why choose us",
+      "subTitle": "Why Tech4Biz is Your Ideal Partner for AI Efficiency",
+  "content": [
+    {
+        "title": "Speed Optimization",
+        "description": "We offer solutions that accelerate AI computations, enabling faster decision-making and quicker results, even with complex AI models.",
+        "icon": "Rocket",
+        "size": "large",
+        "accent": "bg-gradient-to-br from-green-50 to-teal-50"
+    },
+    {
+        "title": "Multitasking Mastery",
+        "description": "Our systems are built to handle multiple tasks simultaneously, improving productivity by reducing downtime and allowing your business to process large-scale AI models seamlessly.",
+        "icon": "Zap",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-purple-50 to-indigo-50"
+    },
+    {
+        "title": "Cost Reduction",
+        "description": "By operating at lower expenses, our solutions help your business save on energy and operational costs while maintaining high performance.",
+        "icon": "Shield",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-orange-50 to-yellow-50"
+    },
+    {
+        "title": "Reliable Performance",
+        "description": "With dependable and secure systems, we ensure that your AI workloads are processed seamlessly. As your business grows, our solutions grow with you.",
+        "icon": "Target",
+        "size": "medium",
+        "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+    },
+    {
+        "title": "Expert Solutions",
+        "description": "We tailor our AI systems to meet your specific needs, ensuring that the solutions we offer are the perfect fit for your business goals and challenges.",
+        "icon": "Shield",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-blue-50 to-purple-50"
+    },
+    {
+        "title": "Innovation Leadership",
+        "description": "Maintain a competitive edge with our state-of-the-art technology. We continuously innovate to ensure that you benefit from the latest advancements in AI.",
+        "icon": "Rocket",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-emerald-50 to-teal-50"
+    },
+    {
+        "title": "Ongoing Support",
+        "description": "Receive continuous maintenance and real-time performance monitoring.",
+        "icon": "Target",
+        "size": "medium",
+        "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+    }
+]
+
+    },
+    "review": {
+      "title": "title",
+      "description": "A leading logistics company was struggling with AI efficiency using traditional cloud-based solutions. After transitioning to our custom ASIC AI solutions, they saw remarkable improvements. The company experienced reduced latency, enabling faster processing and real-time decision-making. Operational costs were significantly lowered, resulting in substantial savings. Additionally, productivity increased as AI models were deployed more efficiently. With Tech4Biz, the company transformed its AI operations, achieving better performance and reduced expenses, setting them up for sustained success in the future.",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  },
+  {
+    "title": "Advanced FPGA Design",
+    "slug": "advanced-fpga-design",
+    "meta": {
+      "title": "Advanced FPGA Design",
+      "description": "description"
+    },
+    "banner": {
+      "title": "Advanced FPGA Solutions for Enhanced AI Performance",
+      "description": "Our FPGA designs utilize the latest and most recent Artificial Neural Networks (ANN) and CNN technologies to improve AI efficiency. ",
+      "breadcrumb": {
+        "title": "Services",
+        "subTiltle": "Advances FGPA Design"
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4"
+    },
+    "connection": {
+      "title": "Cutting-Edge FPGA Solutions for AI Enhancement",
+      "subTitle": "Innovative Solutions",
+      "cta": "Discover More",
+      "description": "Our innovative FPGA architectures utilize Artificial Neural Networks (ANN) and Convolutional Neural Networks (CNN) to drive efficient AI computation, enabling faster, more scalable performance for your AI-driven systems.",
+      "img": "/images/services/services/advanced-fgpa.webp",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/improved-efficiency.mp4"
+    },
+    "approach": {
+      "title": "Our Approach",
+      "content": [
+        {
+          "title": "Custom Architectures",
+          "image": "/images/solutions/approach/app-1.png",
+          "description": "description"
+        },
+        {
+          "title": "AI Integration",
+          "image": "/images/solutions/approach/app-2.png",
+          "description": "description"
+        },
+        {
+          "title": "High-Speed Processing",
+          "image": "/images/solutions/approach/app-3.png",
+          "description": "description"
+        },
+        {
+          "title": "Scalable Solutions",
+          "image": "/images/solutions/approach/app-4.png",
+          "description": "description"
+        }
+      ]
+    },
+    "expertise": {
+      "title": "Why Choose Us",
+      "subTitle": "Why Tech4Biz Stands Out for FPGA Solutions",
+      "content": [
+    {
+        "title": "Overview",
+        "subtitle": "Powering AI Growth",
+        "description": "Our advanced FPGA systems are tailored to accelerate AI computations, providing exceptional processing speed and scalability. With customizable architectures, we deliver consistent, reliable performance, enabling businesses to harness the full potential of AI technologies."
+    },
+    {
+        "title": "Benefits",
+        "subtitle": "Maximizing AI Efficiency",
+        "description": "Our FPGA solutions unlock significant speed enhancements and scalability for AI computation. Designed for efficiency, these systems guarantee swift processing and the capacity to manage intricate neural networks. With cost-effective, flexible solutions, your business can scale AI applications effortlessly while maintaining reliable, high-performance results."
+    },
+    {
+        "title": "Challenges",
+        "subtitle": "Overcoming AI Barriers",
+        "description": "Traditional FPGA designs face limitations in processing speed and scalability, often struggling to meet the demands of modern AI systems. These constraints lead to inefficiencies and higher operational costs. Our advanced FPGA architectures tackle these challenges, offering solutions that support large-scale AI processing while adapting to evolving needs."
+    },
+    {
+        "title": "Solution",
+        "subtitle": "Enhancing AI Performance",
+        "description": "Our FPGA-based AI systems provide a comprehensive solution to the performance bottlenecks faced by traditional designs. Optimized for scalability and high-performance computation, our systems ensure that AI models can run faster and more efficiently, reducing operational costs."
+    },
+    {
+        "title": "Conclusion",
+        "subtitle": "Shaping AI Future",
+        "description": "With our advanced FPGA solutions, your business will be equipped to tackle the AI challenges of tomorrow. Our scalable, efficient, and secure systems optimize your AI applications for both performance and growth. Partner with us to leverage cutting-edge FPGA technology and drive innovation, staying ahead in an increasingly competitive market."
+    }
+]
+
+    },
+
+    "benefits": {
+      "title": "Why Choose Us",
+      "subTitle": "Why Tech4Biz Stands Out for FPGA Solutions",
+
+     "content": [
+    {
+        "title": "Pioneering FPGA Designs",
+        "description": "Our cutting-edge FPGA architectures integrate advanced neural networks, enabling faster, more accurate AI processing for diverse applications.",
+        "icon": "Zap",
+        "size": "large",
+        "accent": "bg-gradient-to-br from-blue-50 to-purple-50"
+    },
+    {
+        "title": "Superior Computation",
+        "description": "Optimized for high performance, our FPGA solutions deliver superior computational power to handle complex AI models with speed and precision.",
+        "icon": "Shield",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-green-50 to-teal-50"
+    },
+    {
+        "title": "Scalable Solutions",
+        "description": "Designed to grow with your business, our systems enable seamless scaling of AI workloads as demands increase, all without compromising performance.",
+        "icon": "Target",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+    },
+    {
+        "title": "Security Measures",
+        "description": "We prioritize data protection with robust security protocols, safeguarding sensitive computations, and ensuring safe AI model deployment.",
+        "icon": "Shield",
+        "size": "medium",
+        "accent": "bg-gradient-to-br from-orange-50 to-yellow-50"
+    },
+    {
+        "title": "Reliability",
+        "description": "Built for consistent, dependable performance, our FPGA systems ensure that your AI operations remain uninterrupted, even under heavy workloads.",
+        "icon": "Shield",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-blue-50 to-purple-50"
+    },
+    {
+        "title": "Expert Engineering",
+        "description": "Our team of expert engineers crafts innovative, optimized FPGA solutions tailored to your specific AI needs, ensuring peak performance and efficiency.",
+        "icon": "Rocket",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-emerald-50 to-teal-50"
+    },
+    {
+        "title": "Customized Applications",
+        "description": "We provide tailored FPGA solutions that address unique challenges, offering the flexibility and performance required for your business’s AI growth.",
+        "icon": "Target",
+        "size": "medium",
+        "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+    }
+]
+
+    },
+    "review": {
+      "title": "title",
+      "description": "A leading AI-focused tech company struggled with the high latency and inefficiency of traditional processing systems. After implementing our custom FPGA designs, they achieved remarkable improvements. The company saw a noticeable drop in processing times, better AI performance, and significant cost reductions. With Tech4Biz's FPGA solutions, they unlocked higher efficiency and faster speeds, setting the stage for sustained success in the fast-paced AI industry.",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  },
+  {
+    "title": "Flexible Solutions",
+    "slug": "flexible-solutions",
+    "meta": {
+      "title": "Flexible Solutions",
+      "description": "description"
+    },
+    "banner": {
+      "title": "Flexible AI Solutions for Seamless Performance",
+      "description": "Adaptive systems that enhance speed and deliver high-performance AI for optimal results.",
+      "breadcrumb": {
+        "title": "Services",
+        "subTiltle": "Flexible Ai solutions"
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4"
+    },
+    "connection": {
+      "title": "Cutting-Edge, Flexible AI Solutions",
+      "subTitle": "Innovative Solutions",
+      "cta": "Discover More",
+      "description": "We provide highly flexible AI systems designed to evolve with customer needs, improving software speed and ensuring effective, high-performance AI processing for optimal results.",
+      "img": "/images/services/services/flex-solutions.webp",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/flex.mp4"
+    },
+    "approach": {
+      "title": "Tech4Biz Approach to AI Flexibility",
+      "content": [
+        {
+          "title": "Customized Solutions",
+          "image": "/images/solutions/approach/app-1.png",
+          "description": "description"
+        },
+        {
+          "title": "Scalable Systems",
+          "image": "/images/solutions/approach/app-2.png",
+          "description": "description"
+        },
+        {
+          "title": "Speed Enhancement",
+          "image": "/images/solutions/approach/app-3.png",
+          "description": "description"
+        },
+        {
+          "title": "High Performance",
+          "image": "/images/solutions/approach/app-4.png",
+          "description": "description"
+        }
+      ]
+    },
+    "expertise": {
+      "title": "title",
+      "subTitle": "subTitle",
+      "content": [
+    {
+        "title": "Overview",
+        "subtitle": "AI That Adapts",
+        "description": "We design our flexible AI systems to adapt to evolving business needs, ensuring peak performance and usability across all applications. These solutions provide exceptional scalability, enabling businesses to keep pace with the rapidly changing landscape of AI technologies while maintaining consistent, high-performance results."
+    },
+    {
+        "title": "Benefits",
+        "subtitle": "Grow With AI",
+        "description": "Our adaptive AI solutions empower businesses to grow and scale seamlessly by evolving alongside their needs. These systems enhance usability, optimize performance, and offer long-term benefits, ensuring that your AI models are future-proof and can handle increasing demands without compromising on efficiency."
+    },
+    {
+        "title": "Challenges",
+        "subtitle": "Breaking AI Barriers",
+        "description": "Many traditional AI solutions are static and inflexible, which limits growth and innovation. These rigid systems often fail to meet the changing demands of modern business, resulting in inefficiencies and scalability issues. By implementing adaptable, flexible solutions, you can overcome these challenges and stay ahead of technological trends."
+    },
+    {
+        "title": "Solution",
+        "subtitle": "Seamless AI Integration",
+        "description": "We offer flexible AI systems that are scalable, high-performance, and simple to use. These systems are designed to meet dynamic business requirements, ensuring seamless integration and operational efficiency while supporting ongoing growth. Our solutions enable businesses to stay competitive and responsive in a fast-paced market."
+    },
+    {
+        "title": "Conclusion",
+        "subtitle": "AI Ready for Tomorrow",
+        "description": "Empower your business with our flexible AI systems that deliver superior performance, scalability, and reliability. Designed to adapt to the ever-changing landscape of AI, our solutions ensure that your business stays ahead of the curve and is prepared for the challenges of tomorrow’s technological demands."
+    }
+]
+
+    },
+
+    "benefits": {
+      "title": "Why Choose Us",
+      "subTitle": "Why Tech4Biz for Your AI Solutions?",
+    "content": [
+    {
+        "title": "Adaptive Technologies",
+        "description": "Our solutions evolve with your business needs, allowing your AI systems to seamlessly adapt to changes in technology and market demands. This ensures that your infrastructure remains relevant and competitive over time.",
+        "icon": "Zap",
+        "size": "large",
+        "accent": "bg-gradient-to-br from-blue-50 to-purple-50"
+    },
+    {
+        "title": "High Performance",
+        "description": "We deliver AI processing solutions that provide exceptional speed, accuracy, and reliability, empowering your business with high-performance systems that drive results in real-time.",
+        "icon": "Rocket",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-green-50 to-teal-50"
+    },
+    {
+        "title": "Flexibility",
+        "description": "Our tailored solutions are designed to meet every unique requirement, offering the flexibility to scale and adjust according to your business’s specific AI needs and goals.",
+        "icon": "Target",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+    },
+    {
+        "title": "Cost-Efficiency",
+        "description": "We help minimize operational expenses by providing solutions that maximize performance without unnecessary costs, allowing you to invest in growth while keeping expenses under control.",
+        "icon": "Shield",
+        "size": "medium",
+        "accent": "bg-gradient-to-br from-orange-50 to-yellow-50"
+    },
+    {
+        "title": "Reliability",
+        "description": "Count on consistent, dependable outcomes with our solutions. Our systems are engineered for uninterrupted performance, ensuring your AI operations are always running smoothly, no matter the challenge.",
+        "icon": "Shield",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-blue-50 to-purple-50"
+    },
+    {
+        "title": "Innovation-Driven",
+        "description": "Our forward-thinking solutions keep you at the forefront of innovation. We incorporate the latest advancements to ensure your AI systems remain cutting-edge.",
+        "icon": "Rocket",
+        "size": "small",
+        "accent": "bg-gradient-to-br from-emerald-50 to-teal-50"
+    },
+    {
+        "title": "Comprehensive Support",
+        "description": "A team of experts will provide guidance and support throughout the entire process. Our customer-centric approach ensures that we address all your needs, from implementation to optimization.",
+        "icon": "Target",
+        "size": "medium",
+        "accent": "bg-gradient-to-br from-rose-50 to-pink-50"
+    }
+]
+
+    },
+    "review": {
+      "title": "title",
+      "description": "description",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  }
+]
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/index.jsx
new file mode 100644
index 0000000..80185ca
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/buisnessSolutionsDetailPage/index.jsx
@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from 'react';
+import { Helmet } from 'react-helmet-async';
+import BusinessServiceAbout from './components/About';
+import BusinessServiceBenefits from './components/Benefits';
+import BusinessServiceOverview from './components/Overview';
+import Hero from './components/Hero';
+import OurApproach from './components/OurApproach';
+import RelatedServices from './components/RelatedServices';
+import serviceData from './data/projectContentPage.json';
+import schemaData from './data/businessServicesSchema.json';
+import { useParams } from 'react-router-dom';
+import ScrollToTop from '@components/common/scroll/ScrollToTop';
+import ScrollToTopButton from '@components/common/scroll/ScrollToTopButton';
+
+const BusinessServicesPage = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentSchema, setCurrentSchema] = useState(null);
+
+  const handleModalToggle = (isOpen) => {
+    setIsModalOpen(isOpen);
+  }
+  
+  const { slug } = useParams();
+
+  // Find the service data based on the slug
+  const service = serviceData.find(item => item.slug === slug);
+
+  // Generate schema for the current service
+  useEffect(() => {
+    if (service) {
+      // Find the corresponding service in the schema
+      const serviceSchema = schemaData.mainEntity.itemListElement.find(
+        item => item.name === service.title
+      );
+      
+      if (serviceSchema) {
+        // Create a specific schema for this service page
+        const specificSchema = {
+          "@context": "https://schema.org",
+          "@type": "Service",
+          "name": service.title,
+          "description": service.banner.description,
+          "provider": schemaData.provider,
+          "url": `https://tech4bizsolutions.com/business-solutions/${slug}`,
+          "image": service.banner.path,
+          "offers": serviceSchema.offers
+        };
+        
+        setCurrentSchema(specificSchema);
+      }
+    }
+  }, [service, slug]);
+
+  // Render content only if service is found
+  if (!service) {
+    return <div>Service not found</div>;
+  }
+  
+  return (
+    <div>
+      <Helmet>
+        <title>{service.meta.title} | Tech4Biz</title>
+        <meta name="description" content={service.meta.description} />
+        <meta property="og:title" content={`${service.meta.title} | Tech4Biz Solutions`} />
+        <meta property="og:description" content={service.banner.description} />
+        <meta property="og:type" content="website" />
+        {currentSchema && (
+          <script type="application/ld+json">
+            {JSON.stringify(currentSchema)}
+          </script>
+        )}
+      </Helmet>
+      
+      <ScrollToTop/>
+      <ScrollToTopButton />
+      <div
+        className=""
+        style={{
+          position: "sticky",
+          top: "0",
+          zIndex: isModalOpen ? "1000" : "1", // Dynamically set z-index
+        }}
+      >
+        <Hero data={service.banner} onModalToggle={handleModalToggle} />
+      </div>
+      <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+      >
+        <BusinessServiceAbout data={service.connection} />
+      </div>
+      <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+      >
+        <OurApproach data={service.approach} />
+      </div>
+      <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+      >
+        <BusinessServiceBenefits data={service.benefits} />
+      </div>
+      <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+      >
+        <BusinessServiceOverview data={service.expertise} />
+      </div>
+      <div className=''
+        style={{position:"relative",top:'0', zIndex:'4'}}
+      >
+        <RelatedServices />
+      </div>
+    </div>
+  );
+};
+
+export default BusinessServicesPage;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/JobDetail.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/JobDetail.jsx
new file mode 100644
index 0000000..d9e138e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/JobDetail.jsx
@@ -0,0 +1,113 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useParams, Link } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+
+// Custom hook
+import { useJobData } from './hooks/useJobData';
+
+// Components
+import JobHeader from './components/JobHeader';
+import JobDescription from './components/JobDescription';
+import ApplicationForm from './components/ApplicationForm';
+import RelatedJobs from './components/RelatedJobs';
+import LoadingState from '@components/common/LoadingFallback';
+import NotFoundState from './components/NotFoundState';
+// Import ShareButton component from careers page
+import ShareButton from '../../../pages/careers/components/common/ShareButton';
+
+const JobDetail = () => {
+  const { jobId } = useParams();
+  const { job, loading, relatedJobs, error } = useJobData(jobId);
+
+  if (loading) {
+    return <LoadingState />;
+  }
+
+  if (error) {
+    return (
+      <div className="bg-gray-50 py-20">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <div className="bg-white p-8 rounded-xl shadow-sm">
+            <h2 className="text-2xl font-bold text-red-600 mb-4">Error</h2>
+            <p className="text-gray-600 mb-6">{error}</p>
+            <Link 
+              to="/careers" 
+              className="inline-flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-5 rounded-lg transition-all duration-300"
+            >
+              <ArrowLeft className="w-4 h-4" />
+              Back to all positions
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!job) {
+    return <NotFoundState />;
+  }
+
+  return (
+    <div className="bg-gray-50 py-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Back button */}
+        <div className="mb-8">
+          <Link 
+            to="/careers" 
+            className="inline-flex items-center text-gray-600 hover:text-blue-600 transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to all positions
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Main content - Job details and application form */}
+          <div className="lg:col-span-2">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5 }}
+              className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-8"
+            >
+              <div className="p-8">
+                <div className="flex justify-between items-start mb-4">
+                  <div className="flex-1">
+                    <JobHeader job={job} />
+                  </div>
+                  <ShareButton job={job} />
+                </div>
+                <JobDescription job={job} />
+              </div>
+            </motion.div>
+
+            {/* Application Form */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.2 }}
+              className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden"
+            >
+              <ApplicationForm jobTitle={job.title} />
+            </motion.div>
+          </div>
+          
+          {/* Sidebar - Related jobs */}
+          <div className="lg:col-span-1">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.3 }}
+              className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden sticky top-8"
+            >
+              <RelatedJobs relatedJobs={relatedJobs} />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default JobDetail; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/ApplicationForm.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/ApplicationForm.jsx
new file mode 100644
index 0000000..815d1da
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/ApplicationForm.jsx
@@ -0,0 +1,437 @@
+import React from 'react';
+import { ArrowRight, Upload, CheckCircle, AlertCircle, ChevronDown } from 'lucide-react';
+import { useApplicationForm } from '../hooks/useApplicationForm';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { useState } from 'react';
+
+const ApplicationForm = ({ jobTitle }) => {
+  const initialFormState = {
+    firstName: '',
+    lastName: '',
+    email: '',
+    phone: '',
+    linkedin: '',
+    portfolio: '',
+    currentCompany: '',
+    currentRole: '',
+    yearsOfExperience: '',
+    coverLetter: '',
+    resume: null,
+    heardAbout: '',
+    availableStartDate: ''
+  };
+
+  const {
+    formData,
+    errors,
+    touched,
+    isSubmitting,
+    submitSuccess,
+    handleInputChange,
+    handleFileChange,
+    handleBlur,
+    handleSubmit
+  } = useApplicationForm(initialFormState);
+
+  const [captchaValue, setCaptchaValue] = useState(null);
+  const [captchaError, setCaptchaError] = useState('');
+
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    handleSubmit(e, captchaValue);
+  };
+
+  // Field error display component
+  const FieldError = ({ name }) => {
+    if (touched[name] && errors[name]) {
+      return (
+        <p className="mt-1 text-sm text-red-600 flex items-center">
+          <AlertCircle className="w-3 h-3 mr-1" />
+          {errors[name]}
+        </p>
+      );
+    }
+    return null;
+  };
+
+  // Custom select component with proper arrow styling
+  const CustomSelect = ({ id, name, value, onChange, onBlur, required, options, hasError }) => {
+    return (
+      <div className="relative">
+        <select
+          id={id}
+          name={name}
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+          required={required}
+          className={`w-full px-4 py-3 rounded-lg border appearance-none ${hasError ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all pr-10`}
+        >
+          {options}
+        </select>
+        <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500">
+          <ChevronDown className="h-4 w-4" />
+        </div>
+      </div>
+    );
+  };
+
+  if (submitSuccess) {
+    return (
+      <div className="p-8 flex flex-col items-center justify-center text-center">
+        <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
+          <CheckCircle className="w-8 h-8 text-green-600" />
+        </div>
+        <h2 className="text-2xl font-bold text-gray-900 mb-2">Application Submitted!</h2>
+        <p className="text-gray-600 mb-6">
+          Thank you for applying to the {jobTitle} position. We'll review your application and get back to you soon.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-8">
+      <h2 className="text-2xl font-bold text-gray-900 mb-6">Apply for this position</h2>
+      
+      <form onSubmit={handleFormSubmit} className="space-y-6">
+        {/* Submit Error Message */}
+        {errors.submit && (
+          <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+            <p className="text-sm text-red-600 flex items-center">
+              <AlertCircle className="w-4 h-4 mr-2" />
+              {errors.submit}
+            </p>
+          </div>
+        )}
+        {/* Personal Information */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-gray-900 mb-3">Personal Information</h3>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="firstName" className="block text-sm font-medium text-gray-700 mb-1">
+                First Name *
+              </label>
+              <input
+                type="text"
+                id="firstName"
+                name="firstName"
+                value={formData.firstName}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                required
+                className={`w-full px-4 py-3 rounded-lg border ${touched.firstName && errors.firstName ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+              />
+              <FieldError name="firstName" />
+            </div>
+            
+            <div>
+              <label htmlFor="lastName" className="block text-sm font-medium text-gray-700 mb-1">
+                Last Name *
+              </label>
+              <input
+                type="text"
+                id="lastName"
+                name="lastName"
+                value={formData.lastName}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                required
+                className={`w-full px-4 py-3 rounded-lg border ${touched.lastName && errors.lastName ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+              />
+              <FieldError name="lastName" />
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                Email Address *
+              </label>
+              <input
+                type="email"
+                id="email"
+                name="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                required
+                className={`w-full px-4 py-3 rounded-lg border ${touched.email && errors.email ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+              />
+              <FieldError name="email" />
+            </div>
+            
+            <div>
+              <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">
+                Phone Number *
+              </label>
+              <input
+                type="tel"
+                id="phone"
+                name="phone"
+                value={formData.phone}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                required
+                className={`w-full px-4 py-3 rounded-lg border ${touched.phone && errors.phone ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+                placeholder="(123) 456-7890"
+              />
+              <FieldError name="phone" />
+            </div>
+          </div>
+        </div>
+        
+        {/* Professional Information */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold text-gray-900 mb-3">Professional Information</h3>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="linkedin" className="block text-sm font-medium text-gray-700 mb-1">
+                LinkedIn Profile
+              </label>
+              <input
+                type="url"
+                id="linkedin"
+                name="linkedin"
+                value={formData.linkedin}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                className={`w-full px-4 py-3 rounded-lg border ${touched.linkedin && errors.linkedin ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+                placeholder="https://linkedin.com/in/yourprofile"
+              />
+              <FieldError name="linkedin" />
+            </div>
+            
+            <div>
+              <label htmlFor="portfolio" className="block text-sm font-medium text-gray-700 mb-1">
+                Portfolio/Website
+              </label>
+              <input
+                type="url"
+                id="portfolio"
+                name="portfolio"
+                value={formData.portfolio}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                className={`w-full px-4 py-3 rounded-lg border ${touched.portfolio && errors.portfolio ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+                placeholder="https://yourportfolio.com"
+              />
+              <FieldError name="portfolio" />
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="currentCompany" className="block text-sm font-medium text-gray-700 mb-1">
+                Current Company
+              </label>
+              <input
+                type="text"
+                id="currentCompany"
+                name="currentCompany"
+                value={formData.currentCompany}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                className={`w-full px-4 py-3 rounded-lg border ${touched.currentCompany && errors.currentCompany ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+              />
+              <FieldError name="currentCompany" />
+            </div>
+            
+            <div>
+              <label htmlFor="currentRole" className="block text-sm font-medium text-gray-700 mb-1">
+                Current Role
+              </label>
+              <input
+                type="text"
+                id="currentRole"
+                name="currentRole"
+                value={formData.currentRole}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                className={`w-full px-4 py-3 rounded-lg border ${touched.currentRole && errors.currentRole ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all`}
+              />
+              <FieldError name="currentRole" />
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label htmlFor="yearsOfExperience" className="block text-sm font-medium text-gray-700 mb-1">
+                Years of Experience *
+              </label>
+              <CustomSelect
+                id="yearsOfExperience"
+                name="yearsOfExperience"
+                value={formData.yearsOfExperience}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                required
+                hasError={touched.yearsOfExperience && errors.yearsOfExperience}
+                options={
+                  <>
+                    <option value="">Select experience</option>
+                    <option value="0-1">Exp 0-1 years</option>
+                    <option value="1-3">Exp 1-3 years</option>
+                    <option value="3-5">Exp 3-5 years</option>
+                    <option value="5-7">Exp 5-7 years</option>
+                    <option value="7-10">Exp 7-10 years</option>
+                    <option value="10+">Exp 10+ years</option>
+                  </>
+                }
+              />
+              <FieldError name="yearsOfExperience" />
+            </div>
+            
+            <div>
+              <label htmlFor="availableStartDate" className="block text-sm font-medium text-gray-700 mb-1">
+                Available Start Date
+              </label>
+              <input
+                type="date"
+                id="availableStartDate"
+                name="availableStartDate"
+                value={formData.availableStartDate}
+                onChange={handleInputChange}
+                onBlur={handleBlur}
+                className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
+                min={new Date().toISOString().split('T')[0]}
+              />
+            </div>
+          </div>
+          
+          <div>
+            <label htmlFor="heardAbout" className="block text-sm font-medium text-gray-700 mb-1">
+              How did you hear about this position?
+            </label>
+            <CustomSelect
+              id="heardAbout"
+              name="heardAbout"
+              value={formData.heardAbout}
+              onChange={handleInputChange}
+              onBlur={handleBlur}
+              hasError={false}
+              options={
+                <>
+                  <option value="">Please select</option>
+                  <option value="LinkedIn">LinkedIn</option>
+                  <option value="Indeed">Indeed</option>
+                  <option value="Glassdoor">Glassdoor</option>
+                  <option value="Company Website">Company Website</option>
+                  <option value="Employee Referral">Employee Referral</option>
+                </>
+              }
+            />
+          </div>
+        </div>
+        
+        {/* Cover Letter */}
+        <div>
+          <label htmlFor="coverLetter" className="block text-sm font-medium text-gray-700 mb-1">
+            Cover Letter
+          </label>
+          <textarea
+            id="coverLetter"
+            name="coverLetter"
+            value={formData.coverLetter}
+            onChange={handleInputChange}
+            onBlur={handleBlur}
+            rows="5"
+            className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all"
+            placeholder="Tell us why you're interested in this position and what makes you a great fit..."
+          ></textarea>
+        </div>
+        
+        {/* Resume Upload */}
+        <div>
+          <label htmlFor="resume" className="block text-sm font-medium text-gray-700 mb-1">
+            Resume/CV *
+          </label>
+          <div className={`relative border-2 border-dashed rounded-lg p-6 text-center ${touched.resume && errors.resume ? 'border-red-500 bg-red-50' : 'border-gray-300 hover:border-blue-500'} transition-colors`}>
+            <input
+              type="file"
+              id="resume"
+              name="resume"
+              onChange={handleFileChange}
+              onBlur={handleBlur}
+              accept=".pdf,.doc,.docx"
+              required
+              className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+            />
+            <div className="flex flex-col items-center">
+              <Upload className="w-8 h-8 text-gray-400 mb-2" />
+              <p className="text-sm text-gray-600">
+                {formData.resume ? (
+                  <span className="text-green-600 font-medium">{formData.resume.name}</span>
+                ) : (
+                  'Click to upload or drag and drop'
+                )}
+              </p>
+              <p className="text-xs text-gray-500 mt-1">PDF, DOC, or DOCX (max 1MB)</p>
+            </div>
+          </div>
+          {touched.resume && errors.resume && (
+            <div className="mt-2 p-2 bg-red-50 border border-red-200 rounded-lg">
+              <p className="text-sm text-red-600 flex items-center">
+                <AlertCircle className="w-4 h-4 mr-2" />
+                {errors.resume}
+              </p>
+            </div>
+          )}
+        </div>
+        
+        {/* CAPTCHA */}
+        <div className="flex flex-col items-center">
+          <ReCAPTCHA
+            sitekey="6LefdB8rAAAAAPTiztPlg1J3nIl4u0otJ290XzlF"
+            theme="light"
+            onChange={(token) => {
+              setCaptchaValue(token);
+              setCaptchaError('');
+            }}
+            onExpired={() => {
+              setCaptchaValue(null);
+              setCaptchaError('CAPTCHA has expired, please verify again.');
+            }}
+            onError={() => {
+              setCaptchaError('An error occurred while loading CAPTCHA.');
+            }}
+          />
+          {captchaError && (
+            <p className="mt-2 text-sm text-red-600 flex items-center">
+              <AlertCircle className="w-3 h-3 mr-1" />
+              {captchaError}
+            </p>
+          )}
+        </div>
+        
+        {/* Submit Button */}
+        <div className="pt-4">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className={`w-full ${isSubmitting ? 'bg-blue-400' : 'bg-blue-600 hover:bg-blue-700'} text-white font-medium py-3 px-6 rounded-lg transition-colors duration-300 flex items-center justify-center gap-2`}
+          >
+            {isSubmitting ? (
+              <>
+                <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Processing...
+              </>
+            ) : (
+              <>
+                Submit Application
+                <ArrowRight className="w-4 h-4" />
+              </>
+            )}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ApplicationForm;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/FormField.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/FormField.jsx
new file mode 100644
index 0000000..ec2d185
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/FormField.jsx
@@ -0,0 +1,93 @@
+import React from 'react';
+import { AlertCircle } from 'lucide-react';
+
+const FormField = ({ 
+  label, 
+  name, 
+  type = 'text', 
+  value, 
+  onChange, 
+  onBlur, 
+  placeholder = '', 
+  required = false, 
+  touched = {}, 
+  errors = {}, 
+  options = [], 
+  className = '',
+  min = ''
+}) => {
+  const hasError = touched[name] && errors[name];
+  
+  const baseInputClasses = `w-full px-4 py-3 rounded-lg border ${hasError ? 'border-red-500 bg-red-50' : 'border-gray-300'} focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all ${className}`;
+  
+  const renderField = () => {
+    switch (type) {
+      case 'select':
+        return (
+          <select
+            id={name}
+            name={name}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            required={required}
+            className={baseInputClasses}
+          >
+            {options.map((option, index) => (
+              <option key={index} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+        );
+      
+      case 'textarea':
+        return (
+          <textarea
+            id={name}
+            name={name}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            required={required}
+            placeholder={placeholder}
+            className={baseInputClasses}
+            rows="5"
+          ></textarea>
+        );
+      
+      default:
+        return (
+          <input
+            type={type}
+            id={name}
+            name={name}
+            value={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            required={required}
+            placeholder={placeholder}
+            className={baseInputClasses}
+            min={min}
+          />
+        );
+    }
+  };
+  
+  return (
+    <div>
+      <label htmlFor={name} className="block text-sm font-medium text-gray-700 mb-1">
+        {label} {required && '*'}
+      </label>
+      {renderField()}
+      {hasError && (
+        <p className="mt-1 text-sm text-red-600 flex items-center">
+          <AlertCircle className="w-3 h-3 mr-1" />
+          {errors[name]}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default FormField; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/JobDescription.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/JobDescription.jsx
new file mode 100644
index 0000000..5c66d3c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/JobDescription.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+const JobDescription = ({ job }) => {
+  return (
+    <>
+      {/* Job description */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold text-gray-900 mb-3">Overview</h2>
+        <p className="text-gray-600 mb-6">{job.description}</p>
+      </div>
+
+      {/* Responsibilities */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold text-gray-900 mb-3">Responsibilities</h2>
+        <ul className="list-disc pl-5 space-y-2 text-gray-600">
+          {job.responsibilities.map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Requirements */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold text-gray-900 mb-3">Requirements</h2>
+        <ul className="list-disc pl-5 space-y-2 text-gray-600">
+          {(job.requirements || job.requirement || []).map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Skills */}
+      <div className="mb-8">
+        <h2 className="text-xl font-semibold text-gray-900 mb-3">Required Skills</h2>
+        <div className="flex flex-wrap gap-2">
+          {job.skills.map((skill, index) => (
+            <span 
+              key={index} 
+              className="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-full"
+            >
+              {skill}
+            </span>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default JobDescription; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/JobHeader.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/JobHeader.jsx
new file mode 100644
index 0000000..8b1b3b1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/JobHeader.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { MapPin, Clock, Briefcase, Users, UserPlus } from 'lucide-react';
+
+const JobHeader = ({ job }) => {
+  return (
+    <div className="mb-6">
+      {job.department && (
+        <span className="inline-block px-4 py-1.5 bg-blue-50 text-blue-600 rounded-full text-sm font-medium mb-4">
+          {job.department}
+        </span>
+      )}
+      <div className="flex justify-between items-center mb-4">
+        <h1 className="text-3xl font-bold text-gray-900">{job.title}</h1>
+      </div>
+      
+      <div className="flex flex-wrap gap-4 mb-6">
+        <div className="flex items-center text-gray-600">
+          <MapPin className="w-4 h-4 mr-2 text-gray-400" />
+          {job.location}
+        </div>
+        <div className="flex items-center text-gray-600">
+          <Clock className="w-4 h-4 mr-2 text-gray-400" />
+          {job.type}
+        </div>
+        <div className="flex items-center text-gray-600">
+          <Briefcase className="w-4 h-4 mr-2 text-gray-400" />
+          {job.experience}
+        </div>
+        <div className="flex items-center text-gray-600">
+          <Users className="w-4 h-4 mr-2 text-gray-400" />
+          {job.level}
+        </div>
+        {job.Numberofpositions && (
+          <div className="flex items-center text-gray-700 bg-gray-100 px-4 py-1.5 rounded-full">
+            <UserPlus className="w-4 h-4 mr-2 text-gray-600" />
+            {job.Numberofpositions} {job.Numberofpositions === 1 ? 'Position' : 'Positions'} Available
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default JobHeader; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/NotFoundState.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/NotFoundState.jsx
new file mode 100644
index 0000000..e371a76
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/NotFoundState.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowLeft } from 'lucide-react';
+
+const NotFoundState = () => {
+  return (
+    <div className="bg-gray-50 py-20">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center py-16">
+          <h2 className="text-3xl font-bold text-gray-900 mb-4">Job Not Found</h2>
+          <p className="text-gray-600 mb-8">The job you're looking for doesn't exist or has been removed.</p>
+          <Link 
+            to="/careers" 
+            className="inline-flex items-center justify-center gap-2 bg-blue-600 text-white font-medium py-3 px-6 rounded-lg hover:bg-blue-700 transition-colors duration-300"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Back to Careers
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotFoundState; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/RelatedJobs.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/RelatedJobs.jsx
new file mode 100644
index 0000000..1422c2c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/components/RelatedJobs.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowRight, MapPin } from 'lucide-react';
+
+const RelatedJobs = ({ relatedJobs }) => {
+  return (
+    <div className="p-6">
+      <h3 className="text-lg font-semibold text-gray-900 mb-4">Similar Positions</h3>
+      
+      <div className="space-y-4">
+        {relatedJobs.length > 0 ? (
+          relatedJobs.map((relatedJob) => (
+            <Link 
+              key={relatedJob.id} 
+              to={`/careers/${relatedJob.jobSlug || relatedJob.id}`}
+              className="block p-4 border border-gray-100 rounded-lg hover:border-blue-100 hover:bg-blue-50 transition-all"
+            >
+              <div className="flex justify-between items-start mb-1">
+                <h4 className="font-medium text-gray-900">{relatedJob.title}</h4>
+              </div>
+              <div className="flex items-center text-sm text-gray-500 mb-2">
+                <MapPin className="w-3 h-3 mr-1" />
+                {relatedJob.location || 'Remote'}
+                <span className="mx-2">•</span>
+                {relatedJob.type}
+              </div>
+              <div className="flex flex-wrap gap-1 mt-2">
+                {relatedJob.skills.slice(0, 2).map((skill, i) => (
+                  <span key={i} className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
+                    {skill}
+                  </span>
+                ))}
+                {relatedJob.skills.length > 2 && (
+                  <span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
+                    +{relatedJob.skills.length - 2} more
+                  </span>
+                )}
+              </div>
+            </Link>
+          ))
+        ) : (
+          <p className="text-gray-500 text-sm">No similar positions available at the moment.</p>
+        )}
+      </div>
+      
+      <div className="mt-6 pt-6 border-t border-gray-100">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Not the right fit?</h3>
+        <p className="text-gray-600 text-sm mb-4">
+          Browse all our open positions to find the perfect role for your skills and experience.
+        </p>
+        <Link
+          to="/careers"
+          className="inline-flex items-center justify-center w-full gap-2 bg-gray-100 text-gray-800 font-medium py-3 px-4 rounded-lg hover:bg-gray-200 transition-colors duration-300 text-sm"
+        >
+          View All Positions
+          <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default RelatedJobs; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/data/jobsData.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/data/jobsData.js
new file mode 100644
index 0000000..766c0e0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/data/jobsData.js
@@ -0,0 +1,141 @@
+export const jobsData = [
+    {
+        id: 1,
+        title: 'Software Engineer',
+        description: 'We are a team of founders, operators, and angel investors who have built, scaled and successfully exited startups. We use our combined knowledge and experience to be a value add to the founders we invest in.',
+        type: 'Full Time',
+        level: 'Mid Level',
+        postedAgo: 'Just Now',
+        experience: '3-5 years',
+        location: 'Bangalore',
+        department: 'Engineering',
+        skills: ['React', 'Node.js', 'TypeScript', 'AWS'],
+        responsibilities: [
+          'Design, develop, and maintain high-quality software applications',
+          'Collaborate with cross-functional teams to define and implement new features',
+          'Write clean, efficient, and well-documented code',
+          'Participate in code reviews and contribute to engineering best practices',
+          'Troubleshoot and debug applications to optimize performance'
+        ],
+        requirements: [
+          'Bachelor\'s degree in Computer Science or related field',
+          '3-5 years of experience in software development',
+          'Strong proficiency in JavaScript, including DOM manipulation and the JavaScript object model',
+          'Experience with React.js and its core principles',
+          'Familiarity with RESTful APIs and modern authorization mechanisms',
+          'Experience with server-side frameworks like Node.js',
+          'Understanding of cloud services, particularly AWS'
+        ]
+      },
+      {
+        id: 2,
+        title: 'Tax Analysis',
+        description: 'We\'re looking for someone with an eye of detail who enjoys a fast-moving startup with flexibility and speed. You will be working with external accountants to model tax calculations of various country.',
+        type: 'Full Time',
+        level: 'Mid Level',
+        postedAgo: 'Just Now',
+        experience: '2-4 years',
+        location: 'Bangalore',
+        department: 'Finance',
+        skills: ['Tax Accounting', 'Financial Analysis', 'Excel', 'Data Modeling'],
+        responsibilities: [
+          'Develop and maintain tax calculation models for multiple countries',
+          'Collaborate with external accountants to ensure compliance with local regulations',
+          'Prepare and review tax filings and reports',
+          'Analyze tax data to identify optimization opportunities',
+          'Stay updated on changes in tax laws and regulations'
+        ],
+        requirements: [
+          'Bachelor\'s degree in Accounting, Finance, or related field',
+          '2-4 years of experience in tax accounting or analysis',
+          'Strong analytical skills and attention to detail',
+          'Proficiency in Excel and financial modeling',
+          'Knowledge of international tax principles',
+          'Ability to work in a fast-paced environment',
+          'Excellent communication skills'
+        ]
+      },
+      {
+        id: 3,
+        title: 'Customer Success Manager',
+        description: 'Position for our mid-market segment is a client facing role focused on unlocking significant value for our customers and prospects through transforming the technology that powers their lending processes.',
+        type: 'Full Time',
+        level: 'Mid Level',
+        postedAgo: '05 / 05 / 2024',
+        experience: '2+ years',
+        location: 'Bangalore',
+        department: 'Customer Success',
+        skills: ['Client Management', 'Communication', 'Problem Solving', 'CRM Software'],
+        responsibilities: [
+          'Serve as the primary point of contact for assigned customers',
+          'Develop and maintain strong relationships with key stakeholders',
+          'Ensure customer satisfaction and drive product adoption',
+          'Identify upsell and cross-sell opportunities',
+          'Collaborate with internal teams to resolve customer issues'
+        ],
+        requirements: [
+          'Bachelor\'s degree in Business, Communications, or related field',
+          '2+ years of experience in customer success or account management',
+          'Strong interpersonal and communication skills',
+          'Experience with CRM software and tools',
+          'Problem-solving mindset and ability to work under pressure',
+          'Understanding of SaaS business models',
+          'Excellent presentation and negotiation skills'
+        ]
+      },
+      {
+        id: 4,
+        title: 'Digital Marketing',
+        description: 'We are a team of founders, operators, and angel investors who have built, scaled and successfully exited startups. We use our combined knowledge and experience to be a value add to the founders we invest in.',
+        type: 'Full Time',
+        level: 'Mid Level',
+        postedAgo: 'Just Now',
+        experience: '3-6 years',
+        location: 'Bangalore',
+        department: 'Marketing',
+        skills: ['SEO', 'Content Marketing', 'Social Media', 'Analytics'],
+        responsibilities: [
+          'Develop and implement digital marketing strategies',
+          'Manage SEO/SEM, social media, and content marketing initiatives',
+          'Analyze campaign performance and optimize for better results',
+          'Create compelling content for various digital channels',
+          'Stay updated on the latest digital marketing trends and best practices'
+        ],
+        requirements: [
+          'Bachelor\'s degree in Marketing, Communications, or related field',
+          '3-6 years of experience in digital marketing',
+          'Proficiency in SEO, content marketing, and social media management',
+          'Experience with analytics tools and data-driven decision making',
+          'Strong writing and communication skills',
+          'Knowledge of marketing automation platforms',
+          'Creative mindset with attention to detail'
+        ]
+      },
+      {
+        id: 5,
+        title: 'Software Engineer',
+        description: 'We are a team of founders, operators, and angel investors who have built, scaled and successfully exited startups. We use our combined knowledge and experience to be a value add to the founders we invest in.',
+        type: 'Full Time',
+        level: 'Mid Level',
+        experience: '4-7 years',
+        location: 'Bangalore',
+        department: 'Engineering',
+        skills: ['Java', 'Spring Boot', 'Microservices', 'Docker'],
+        responsibilities: [
+          'Design and develop high-performance, scalable applications',
+          'Build and maintain microservices architecture',
+          'Implement best practices for code quality and testing',
+          'Collaborate with product and design teams to deliver features',
+          'Mentor junior developers and contribute to team growth'
+        ],
+        requirements: [
+          'Bachelor\'s degree in Computer Science or related field',
+          '4-7 years of experience in software development',
+          'Strong proficiency in Java and Spring Boot',
+          'Experience with microservices architecture and containerization',
+          'Knowledge of database design and optimization',
+          'Understanding of CI/CD pipelines',
+          'Problem-solving skills and attention to detail'
+        ]
+      }
+]; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/hooks/useApplicationForm.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/hooks/useApplicationForm.js
new file mode 100644
index 0000000..4768eaa
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/hooks/useApplicationForm.js
@@ -0,0 +1,227 @@
+import { useState } from 'react';
+import { submitCandidateApplication, uploadResume } from '../utils/candidateApplicationApi';
+import { validateApplicationForm } from '../utils/formValidation';
+
+export const useApplicationForm = (initialState) => {
+  const [formData, setFormData] = useState(initialState);
+  const [errors, setErrors] = useState({});
+  const [touched, setTouched] = useState({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitSuccess, setSubmitSuccess] = useState(false);
+
+  // Handle text input changes
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value
+    });
+    
+    // Mark field as touched
+    if (!touched[name]) {
+      setTouched({
+        ...touched,
+        [name]: true
+      });
+      
+      // Validate the field immediately
+      const fieldErrors = validateForm();
+      if (fieldErrors[name]) {
+        setErrors({
+          ...errors,
+          [name]: fieldErrors[name]
+        });
+      } else if (errors[name]) {
+        const newErrors = {...errors};
+        delete newErrors[name];
+        setErrors(newErrors);
+      }
+    }
+  };
+
+  // Handle file input changes
+  const handleFileChange = (e) => {
+    const file = e.target.files[0];
+    
+    if (file) {
+      // Check file size (1MB limit)
+      if (file.size > 1 * 1024 * 1024) {
+        setErrors({
+          ...errors,
+          resume: 'File size exceeds 1MB limit. Please select a smaller PDF file.'
+        });
+        setFormData({
+          ...formData,
+          resume: null
+        });
+        e.target.value = '';
+        return;
+      }
+      // Check file type
+      const validTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
+      if (!validTypes.includes(file.type)) {
+        setErrors({
+          ...errors,
+          resume: 'Please upload a PDF, DOC, or DOCX file'
+        });
+        setFormData({
+          ...formData,
+          resume: null
+        });
+        e.target.value = '';
+        return;
+      }
+      setFormData({
+        ...formData,
+        resume: file
+      });
+      // Clear error if previously set
+      if (errors.resume) {
+        const newErrors = {...errors};
+        delete newErrors.resume;
+        setErrors(newErrors);
+      }
+    } else {
+      setFormData({
+        ...formData,
+        resume: null
+      });
+    }
+    setTouched({
+      ...touched,
+      resume: true
+    });
+  };
+
+  // Use shared validation utility
+  const validateForm = () => validateApplicationForm(formData);
+
+  // Validate on field blur
+  const handleBlur = (e) => {
+    const { name } = e.target;
+    
+    setTouched({
+      ...touched,
+      [name]: true
+    });
+    
+    // Always validate on blur for immediate feedback
+    const fieldErrors = validateForm();
+    if (fieldErrors[name]) {
+      setErrors({
+        ...errors,
+        [name]: fieldErrors[name]
+      });
+    } else if (errors[name]) {
+      const newErrors = {...errors};
+      delete newErrors[name];
+      setErrors(newErrors);
+    }
+  };
+
+  // Submit form
+  const handleSubmit = async (e, captchaValue) => {
+    e.preventDefault();
+    // Start form submission process
+    
+    // Validate all fields
+    const formErrors = validateForm();
+    setErrors(formErrors);
+    
+    // Mark all fields as touched
+    const allTouched = Object.keys(formData).reduce((acc, key) => {
+      acc[key] = true;
+      return acc;
+    }, {});
+    setTouched(allTouched);
+    
+    // If there are validation errors, log them
+    if (Object.keys(formErrors).length > 0) {
+      return;
+    }
+    
+    // Remove CAPTCHA requirement check
+    // The captchaValue will be passed to the API if available
+    
+    // If no errors, submit the form
+    setIsSubmitting(true);
+
+    
+    try {
+      // First upload the resume file
+      let resumeId;
+      try {
+        resumeId = await uploadResume(formData.resume);
+      } catch (uploadError) {
+        setErrors({
+          ...errors,
+          resume: uploadError.message || 'File upload failed. Please try again with a smaller file or check your connection.',
+          submit: 'Resume upload failed. Please ensure your file is under 10MB and try again.'
+        });
+        setIsSubmitting(false);
+        return;
+      }
+
+      // Prepare and submit the application data
+      const applicationData = {
+        FirstName: formData.firstName,
+        LastName: formData.lastName,
+        EmailAddress: formData.email,
+        PhoneNumber: formData.phone,
+        LinkedInProfile: formData.linkedin || '',
+        Portfolio: formData.portfolio || '',
+        CurrentCompany: formData.currentCompany || '',
+        CurrentRole: formData.currentRole || '',
+        Experience: formData.yearsOfExperience ? `Exp ${formData.yearsOfExperience} years` : '', // Map to expected format
+        Howdidyouhearaboutus: formData.heardAbout || 'LinkedIn', // Use the value from the select
+        Coverletter: formData.coverLetter || '',
+        AvailableDate: formData.availableStartDate || null,
+        Resume: resumeId,
+        RecaptchaToken: captchaValue || '' // Add the CAPTCHA token if available
+      };
+
+      // Submit application to API
+      await submitCandidateApplication(applicationData);
+      
+
+      setSubmitSuccess(true);
+      
+      // Reset form after submission
+
+      setTimeout(() => {
+        setFormData(initialState);
+        setSubmitSuccess(false);
+        setTouched({});
+
+      }, 3000);
+    } catch (error) {
+
+      setErrors({
+        ...errors,
+        submit: 'Failed to submit application. Please try again.'
+      });
+    } finally {
+      setIsSubmitting(false);
+    }
+    // Scroll to the first error if validation failed
+    const firstErrorField = Object.keys(formErrors)[0];
+    const errorElement = document.getElementById(firstErrorField);
+    if (errorElement) {
+
+      errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  };
+
+  return {
+    formData,
+    errors,
+    touched,
+    isSubmitting,
+    submitSuccess,
+    handleInputChange,
+    handleFileChange,
+    handleBlur,
+    handleSubmit,
+    validateForm
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/hooks/useJobData.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/hooks/useJobData.js
new file mode 100644
index 0000000..76a1053
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/hooks/useJobData.js
@@ -0,0 +1,77 @@
+import { useState, useEffect } from 'react';
+import { fetchJobs } from '../../../careers/utils/jobsApi';
+import { fetchJobDetailBySlug, fetchJobDetailById, fetchJobDetails } from '../utils/jobDetailApi';
+
+export const useJobData = (jobIdOrSlug) => {
+  const [job, setJob] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [relatedJobs, setRelatedJobs] = useState([]);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchJob = async () => {
+      setLoading(true);
+      try {
+        // First try to fetch detailed job data by slug
+        let foundJob = await fetchJobDetailBySlug(jobIdOrSlug);
+        
+        // If not found by slug in detailed data, try by id
+        if (!foundJob && !isNaN(parseInt(jobIdOrSlug))) {
+          foundJob = await fetchJobDetailById(jobIdOrSlug);
+        }
+        
+        // If still not found, try the jobs API as fallback
+        if (!foundJob) {
+          // Try to find in the jobs API by slug
+          foundJob = await fetchJobs().then(jobs => 
+            jobs.find(job => job.jobSlug === jobIdOrSlug)
+          );
+          
+          // If not found by slug, try by id
+          if (!foundJob && !isNaN(parseInt(jobIdOrSlug))) {
+            foundJob = await fetchJobs().then(jobs => 
+              jobs.find(job => job.id === parseInt(jobIdOrSlug))
+            );
+          }
+        }
+        
+        setJob(foundJob || null);
+        
+        // Get related jobs
+        if (foundJob) {
+          // Try to get related jobs from the same department if available
+          if (foundJob.department) {
+            const allJobDetails = await fetchJobDetails();
+            const related = allJobDetails
+              .filter(j => j.department === foundJob.department && j.id !== foundJob.id)
+              .slice(0, 3);
+              
+            if (related.length > 0) {
+              setRelatedJobs(related);
+            } else {
+              // Fallback to any other jobs
+              const otherJobs = await fetchJobDetails();
+              setRelatedJobs(otherJobs.filter(j => j.id !== foundJob.id).slice(0, 3));
+            }
+          } else {
+            // If no department info, just show other jobs
+            const allJobs = await fetchJobDetails();
+            setRelatedJobs(allJobs.filter(j => j.id !== foundJob.id).slice(0, 3));
+          }
+        }
+        
+        setError(null);
+      } catch (err) {
+        console.error('Error fetching job details:', err);
+        setError('Failed to load job details. Please try again later.');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchJob();
+    window.scrollTo(0, 0);
+  }, [jobIdOrSlug]);
+
+  return { job, loading, relatedJobs, error };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/candidateApplicationApi.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/candidateApplicationApi.js
new file mode 100644
index 0000000..8600139
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/candidateApplicationApi.js
@@ -0,0 +1,124 @@
+/**
+ * API utility for submitting candidate applications to Strapi backend
+ */
+
+const API_URL = import.meta.env.PROD
+  ? "https://career.tech4bizsolutions.com/api"
+  : "/api";
+
+// Get the API token from environment or configuration
+const API_TOKEN =
+  "df8e2442bae1134085b618108c12c4701d376aa87e4984c17ea788b0581e657d2147dea0ae8abeca91b5da32c29f10e8b202f9b4b5eb3ca2acf35b92f091ca7ebbf0898915bbfb42ab448e76228c2f4d6606a28c24c8db5b0908c0615c5bba1bdc944a68989cd2327f2d2ebdf11a920ef206280625571cabaf103d5e4a3a8064";
+
+/**
+ * Submit a candidate application
+ * @param {Object} formData - The candidate's application data
+ * @param {string} formData.FirstName - Candidate's first name
+ * @param {string} formData.LastName - Candidate's last name
+ * @param {string} formData.EmailAddress - Candidate's email address
+ * @param {string} formData.PhoneNumber - Candidate's phone number
+ * @param {string} formData.LinkedInProfile - Candidate's LinkedIn profile URL
+ * @param {string} formData.Portfolio - Candidate's portfolio URL
+ * @param {string} formData.CurrentCompany - Candidate's current company
+ * @param {string} formData.CurrentRole - Candidate's current role
+ * @param {string} formData.Experience - Candidate's experience level
+ * @param {string} formData.Howdidyouhearaboutus - How the candidate heard about the position
+ * @param {string} formData.Coverletter - Candidate's cover letter
+ * @param {number} formData.Resume - Uploaded file ID for resume
+ * @param {string} formData.RecaptchaToken - reCAPTCHA verification token
+ * @returns {Promise<Object>} Response from the API
+ */
+export const submitCandidateApplication = async (formData) => {
+  try {
+    // Extract reCAPTCHA token from form data
+    const { RecaptchaToken, ...applicationData } = formData;
+    
+    // Prepare request body - only include recaptcha if token exists
+    const requestBody = {
+      data: applicationData
+    };
+    
+    // Only add recaptcha token if it exists
+    if (RecaptchaToken) {
+      requestBody.recaptcha = RecaptchaToken;
+    }
+    
+    const response = await fetch(
+      `${API_URL}/candidate-applications?populate=*`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${API_TOKEN}`,
+        },
+        body: JSON.stringify(requestBody),
+      },
+    );
+
+    if (!response.ok) {
+      // Check if the failure is due to reCAPTCHA validation
+      if (response.status === 400) {
+        const errorData = await response.json().catch(() => ({}));
+        if (errorData.error?.message?.includes('reCAPTCHA') || 
+            errorData.error?.message?.includes('captcha') ||
+            errorData.error?.message?.includes('Invalid key type')) {
+          throw new Error('CAPTCHA validation failed. Please try again.');
+        }
+      }
+      throw new Error(`API request failed with status ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    return data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+/**
+ * Upload a resume file
+ * @param {File} file - The resume file to upload
+ * @returns {Promise<number>} The uploaded file ID
+ */
+export const uploadResume = async (file) => {
+  try {
+    const formData = new FormData();
+    formData.append("files", file);
+
+    // Create an AbortController to set timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 60000); // 60 second timeout for large files
+
+    const response = await fetch(`${API_URL}/upload`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${API_TOKEN}`,
+      },
+      body: formData,
+      signal: controller.signal
+    });
+
+    // Clear the timeout
+    clearTimeout(timeoutId);
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(
+        errorData.message || 
+        errorData.error?.message || 
+        `File upload failed with status ${response.status}`
+      );
+    }
+
+    const data = await response.json();
+
+    // Return the first file's ID since we're only uploading one file
+    return data[0].id;
+  } catch (error) {
+    if (error.name === 'AbortError') {
+      throw new Error('File upload timed out. The file may be too large or the network connection is slow.');
+    }
+    throw error;
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/formValidation.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/formValidation.js
new file mode 100644
index 0000000..01db9cc
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/formValidation.js
@@ -0,0 +1,133 @@
+// Email validation regex
+export const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+// Phone validation regex
+export const phoneRegex = /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4,6}$/;
+
+// Name validation (letters, spaces, hyphens, apostrophes only)
+export const nameRegex = /^[A-Za-z\s'-]+$/;
+
+// URL validation regex
+export const urlRegex = /^(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)$/;
+
+// Company name validation (letters, numbers, spaces, some symbols)
+export const companyNameRegex = /^[A-Za-z0-9\s&.,'-]+$/;
+
+// Job title validation (letters, numbers, spaces, some symbols)
+export const jobTitleRegex = /^[A-Za-z0-9\s&.,'-]+$/;
+
+// Valid file types for resume
+export const validFileTypes = [
+  'application/pdf', 
+  'application/msword', 
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+];
+
+// Max file size (1MB)
+export const maxFileSize = 1 * 1024 * 1024;
+
+// Standard validation for the job application form
+export function validateApplicationForm(formData) {
+  const errors = {};
+
+  // First Name
+  if (!formData.firstName || !formData.firstName.trim()) {
+    errors.firstName = 'First name is required';
+  } else if (!nameRegex.test(formData.firstName.trim())) {
+    errors.firstName = 'First name should only contain letters, spaces';
+  }
+
+  // Last Name
+  if (!formData.lastName || !formData.lastName.trim()) {
+    errors.lastName = 'Last name is required';
+  } else if (!nameRegex.test(formData.lastName.trim())) {
+    errors.lastName = 'Last name should only contain letters, spaces';
+  }
+
+  // Email
+  if (!formData.email || !formData.email.trim()) {
+    errors.email = 'Email is required';
+  } else if (!emailRegex.test(formData.email)) {
+    errors.email = 'Please enter a valid email address';
+  }
+
+  // Phone
+  if (!formData.phone || !formData.phone.trim()) {
+    errors.phone = 'Phone number is required';
+  } else if (!phoneRegex.test(formData.phone)) {
+    errors.phone = 'Please enter a valid phone number';
+  }
+
+  // LinkedIn (optional, but if present, must be a valid URL)
+  if (formData.linkedin && formData.linkedin.trim()) {
+    const linkedinValue = formData.linkedin.trim();
+    if (!linkedinValue.startsWith('http://') && !linkedinValue.startsWith('https://')) {
+      errors.linkedin = 'LinkedIn URL must start with http:// or https://';
+    } else if (!linkedinValue.includes('linkedin.com')) {
+      errors.linkedin = 'Please enter a valid LinkedIn profile URL (must include linkedin.com)';
+    }
+  }
+
+  // Portfolio (optional, but if present, must be a valid URL)
+  if (formData.portfolio && formData.portfolio.trim()) {
+    const portfolioValue = formData.portfolio.trim();
+    if (!portfolioValue.startsWith('http://') && !portfolioValue.startsWith('https://')) {
+      errors.portfolio = 'Portfolio URL must start with http:// or https://';
+    } else if (!urlRegex.test(portfolioValue)) {
+      errors.portfolio = 'Please enter a valid website URL';
+    }
+  }
+
+  // Current Company (optional, but if present, should be reasonable)
+  if (formData.currentCompany && formData.currentCompany.trim()) {
+    if (!companyNameRegex.test(formData.currentCompany.trim())) {
+      errors.currentCompany = 'Please enter a valid company name (letters, numbers, spaces, common symbols)';
+    } else if (/^\d+$/.test(formData.currentCompany.trim())) {
+      errors.currentCompany = 'Company name cannot contain only numbers';
+    }
+  }
+
+  // Current Role (optional, but if present, should be reasonable)
+  if (formData.currentRole && formData.currentRole.trim()) {
+    if (!jobTitleRegex.test(formData.currentRole.trim())) {
+      errors.currentRole = 'Please enter a valid job title (letters, numbers, spaces, common symbols)';
+    } else if (/^\d+$/.test(formData.currentRole.trim())) {
+      errors.currentRole = 'Job title cannot contain only numbers';
+    }
+  }
+
+  // Resume
+  if (!formData.resume) {
+    errors.resume = 'Please upload your resume (PDF, DOC, or DOCX, max 1MB)';
+  } else {
+    if (formData.resume.size > maxFileSize) {
+      errors.resume = 'Resume file size must be under 1MB. Please compress or select a smaller file.';
+    } else if (!validFileTypes.includes(formData.resume.type)) {
+      errors.resume = 'Resume must be in PDF, DOC, or DOCX format. Please upload a supported file type.';
+    }
+  }
+
+  // Available Start Date (optional, but if present, must be a valid future date)
+  if (formData.availableStartDate) {
+    const selectedDate = new Date(formData.availableStartDate);
+    const today = new Date();
+    
+    if (isNaN(selectedDate.getTime())) {
+      errors.availableStartDate = 'Please enter a valid date';
+    } else if (selectedDate < today) {
+      errors.availableStartDate = 'Start date must be in the future';
+    }
+  }
+
+  // Cover Letter (optional, but can add min length if desired)
+  // if (formData.coverLetter && formData.coverLetter.length < 50) {
+  //   errors.coverLetter = 'Cover letter should be at least 50 characters';
+  // }
+
+  // Heard About (optional, but should be selected if dropdown is provided)
+  if (formData.heardAbout === '') {
+    errors.heardAbout = 'Please select how you heard about us';
+  }
+
+  return errors;
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/jobDetailApi.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/jobDetailApi.js
new file mode 100644
index 0000000..e0cb43b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/jobDetailApi.js
@@ -0,0 +1,106 @@
+/**
+ * API utility for fetching job detail data from Strapi backend
+ */
+
+// Updated API_URL to use direct API endpoint instead of Vite proxy
+const API_URL = import.meta.env.PROD 
+  ? 'https://career.tech4bizsolutions.com/api'
+  : '/api';
+
+/**
+ * Fetch all job details from the Strapi API
+ * @returns {Promise<Array>} Array of job detail objects
+ */
+export const fetchJobDetails = async () => {
+  try {
+    const response = await fetch(`${API_URL}/jobdataa?populate=*`);
+    
+    if (!response.ok) {
+      throw new Error(`API request failed with status ${response.status}`);
+    }
+    
+    const data = await response.json();
+    
+    // Transform the API response to match the expected format
+    if (data && data.data && data.data.jobData) {
+      return data.data.jobData.map(job => {
+        return {
+          ...job,
+          // Parse skills from string to array
+          skills: parseStringToArray(job.skills),
+          // Parse responsibilities from string to array
+          responsibilities: parseStringToArray(job.responsibilities),
+          // Parse requirements from string to array
+          requirements: parseStringToArray(job.requirement)
+        };
+      });
+    }
+    
+    return [];
+  } catch (error) {
+    console.error('Error fetching job details:', error);
+    return [];
+  }
+};
+
+/**
+ * Fetch a specific job detail by slug
+ * @param {string} slug - The job slug
+ * @returns {Promise<Object|null>} Job detail object or null if not found
+ */
+export const fetchJobDetailBySlug = async (slug) => {
+  try {
+    const jobDetails = await fetchJobDetails();
+    return jobDetails.find(job => job.jobSlug === slug) || null;
+  } catch (error) {
+    console.error('Error fetching job detail by slug:', error);
+    return null;
+  }
+};
+
+/**
+ * Fetch a specific job detail by id
+ * @param {number|string} id - The job id
+ * @returns {Promise<Object|null>} Job detail object or null if not found
+ */
+export const fetchJobDetailById = async (id) => {
+  try {
+    const jobDetails = await fetchJobDetails();
+    return jobDetails.find(job => job.id === parseInt(id)) || null;
+  } catch (error) {
+    console.error('Error fetching job detail by id:', error);
+    return null;
+  }
+};
+
+/**
+ * Parse string representation of array to actual array
+ * @param {string} str - String representation of array
+ * @returns {Array} Parsed array
+ */
+const parseStringToArray = (str) => {
+  if (!str) return [];
+  
+  try {
+    // Handle different formats of string arrays
+    if (str.includes("',")) {
+      // Format: 'item1', 'item2', 'item3'
+      return str
+        .split("',")
+        .map(item => item.trim().replace(/^'|'$/g, ''))
+        .filter(Boolean);
+    } else if (str.includes("\n")) {
+      // Format: multiline string with quotes
+      return str
+        .split("\n")
+        .map(item => item.trim().replace(/^'|'$|,$/g, ''))
+        .filter(Boolean);
+    } else {
+      // Fallback for other formats
+      return [str];
+    }
+  } catch (error) {
+    console.error('Error parsing string to array:', error, str);
+    return [];
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/recaptchaVerification.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/recaptchaVerification.js
new file mode 100644
index 0000000..4f9a694
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/careersDetailPage/utils/recaptchaVerification.js
@@ -0,0 +1,91 @@
+/**
+ * Utility for verifying reCAPTCHA v2 tokens with Google's API
+ */
+
+// reCAPTCHA secret key (IMPORTANT: Keep this secure on the server-side only)
+const RECAPTCHA_SECRET_KEY = '6LefdB8rAAAAAG-3IK2h3uvDvx35mdSeA8D3Wctd';
+
+/**
+ * Verify a reCAPTCHA token with Google's API
+ * @param {string} token - The reCAPTCHA token from the client
+ * @param {string} remoteIp - Optional IP address of the user
+ * @returns {Promise<boolean>} Whether the token is valid
+ */
+export const verifyRecaptchaToken = async (token, remoteIp) => {
+  try {
+    // URL for Google's reCAPTCHA verification API
+    const verifyUrl = 'https://www.google.com/recaptcha/api/siteverify';
+    
+    // Build the form data for the request
+    const formData = new URLSearchParams();
+    formData.append('secret', RECAPTCHA_SECRET_KEY);
+    formData.append('response', token);
+    
+    // If remote IP is provided, include it in the verification
+    if (remoteIp) {
+      formData.append('remoteip', remoteIp);
+    }
+    
+    // Make the verification request to Google
+    const response = await fetch(verifyUrl, {
+      method: 'POST',
+      body: formData,
+    });
+    
+    if (!response.ok) {
+      throw new Error(`reCAPTCHA verification failed with status ${response.status}`);
+    }
+    
+    // Parse the verification result
+    const data = await response.json();
+    
+    // Return true if the token is valid
+    return data.success === true;
+  } catch (error) {
+    console.error('Error verifying reCAPTCHA token:', error);
+    return false;
+  }
+};
+
+/**
+ * Higher-order function to create middleware that validates reCAPTCHA tokens
+ * @returns {Function} Express middleware function
+ */
+export const recaptchaMiddleware = () => {
+  return async (req, res, next) => {
+    try {
+      // Get token from request body
+      const token = req.body?.recaptcha;
+      
+      // If no token is provided, reject the request
+      if (!token) {
+        return res.status(400).json({
+          error: {
+            message: 'reCAPTCHA token is required',
+          },
+        });
+      }
+      
+      // Verify the token
+      const isValid = await verifyRecaptchaToken(token, req.ip);
+      
+      // If the token is invalid, reject the request
+      if (!isValid) {
+        return res.status(400).json({
+          error: {
+            message: 'reCAPTCHA validation failed',
+          },
+        });
+      }
+      
+      // If the token is valid, proceed to the next middleware or route handler
+      next();
+    } catch (error) {
+      return res.status(500).json({
+        error: {
+          message: 'reCAPTCHA verification error',
+        },
+      });
+    }
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/BenefitsSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/BenefitsSection.jsx
new file mode 100644
index 0000000..a516269
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/BenefitsSection.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const BenefitsSection = ({ title, content }) => {
+  return (
+    <section id="insights_4" className="max-w-6xl mx-auto px-4 py-16">
+      <motion.h2
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-sm font-bold tracking-wider text-gray-900 mb-8"
+      >
+        BENEFITS
+      </motion.h2>
+
+      <motion.h3
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="text-xl md:text-4xl font-light text-gray-900 mb-8 max-w-3xl"
+      >
+        {title}
+      </motion.h3>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2 }}
+        className="space-y-6 text-gray-600"
+      >
+        {content.map((paragraph, index) => (
+          <p key={index} className="text-lg md:text-xl leading-relaxed">
+            {paragraph}
+          </p>
+        ))}
+      </motion.div>
+    </section>
+  );
+};
+
+export default BenefitsSection;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/CaseStudyHero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/CaseStudyHero.jsx
new file mode 100644
index 0000000..1f828cd
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/CaseStudyHero.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import ShareMenu from './ShareMenu/ShareMenu';
+
+const CaseStudyHero = ({ title, heroTitle, description, video, heroImage }) => {
+  if (!title || !heroTitle) {
+    return null;
+  }
+
+  return (
+    <div className="relative min-h-screen">
+      <div
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: heroImage ? `url(${heroImage})` : 'none',
+          backgroundBlendMode: 'multiply',
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        }}
+      />
+
+      <div className="relative z-10 text-white">
+        <div className="max-w-6xl mx-auto w-full px-4 flex flex-col justify-between min-h-screen py-12">
+          <div className="max-w-4xl">
+            <p className="text-sm tracking-widest uppercase mb-2">
+              {title}
+            </p>
+            <div className="w-24 h-px bg-gray-400 mb-6" />
+            <h1 className="text-4xl md:text-6xl font-light leading-tight">
+              {heroTitle}
+            </h1>
+          </div>
+
+          <div className="relative flex justify-start">
+            <ShareMenu />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CaseStudyHero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Challenges.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Challenges.jsx
new file mode 100644
index 0000000..e079174
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Challenges.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Challenges = ({ title, content }) => {
+  return (
+    <section id="insights_2" className="bg-white max-w-6xl mx-auto px-4 py-12">
+      <motion.h2
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-sm font-bold tracking-wider text-gray-900 mb-8"
+      >
+        CHALLENGES
+      </motion.h2>
+      
+      <motion.h3
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-xl md:text-4xl font-light text-gray-900 mb-12"
+      >
+        {title}
+      </motion.h3>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="space-y-6 text-gray-600"
+      >
+        {content.map((paragraph, index) => (
+          <p key={index} className="text-lg leading-relaxed">
+            {paragraph}
+          </p>
+        ))}
+      </motion.div>
+    </section>
+  );
+};
+
+export default Challenges;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/ConclusionSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/ConclusionSection.jsx
new file mode 100644
index 0000000..0f8c043
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/ConclusionSection.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Download } from 'lucide-react';
+
+const ConclusionSection = ({ content, pdfUrl }) => {
+  return (
+    <section id="insights_5" className="max-w-6xl mx-auto px-4 py-16">
+      <motion.h2
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-sm font-bold tracking-wider text-gray-900 mb-8"
+      >
+        CONCLUSION
+      </motion.h2>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 0.2 }}
+        className="space-y-8 text-gray-600"
+      >
+        {content.map((paragraph, index) => (
+          <p
+            key={index}
+            className="text-xl md:text-2xl font-light leading-relaxed max-w-4xl"
+          >
+            {paragraph}
+          </p>
+        ))}
+
+        <motion.a
+          href={pdfUrl}
+          target="_blank"
+          rel="nofollow noopener noreferrer"
+          whileHover={{ scale: 1.02 }}
+          className="mt-12 inline-flex items-center px-6 py-3 text-sm text-gray-700 border border-gray-200 rounded-full hover:border-gray-400 hover:text-gray-900 transition-all duration-300"
+        >
+          <Download className="w-4 h-4 mr-2" />
+          Download PDF
+        </motion.a>
+      </motion.div>
+    </section>
+  );
+};
+
+export default ConclusionSection;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/HighlightsSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/HighlightsSection.jsx
new file mode 100644
index 0000000..0871a2e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/HighlightsSection.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const HighlightsSection = ({ highlights = [] }) => {
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { staggerChildren: 0.2 } }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, x: -20 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.6 } }
+  };
+
+  return (
+    <section id="insights_1" className="py-20 px-8 bg-gradient-to-b from-gray-50 to-white">
+      <div className="max-w-4xl mx-auto">
+        <motion.h2 
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-sm font-bold tracking-wider text-gray-900 mb-12"
+        >
+          HIGHLIGHTS
+        </motion.h2>
+        
+        <motion.div 
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="relative"
+        >
+          <div className="absolute left-0 top-0 bottom-0 w-0.5 bg-gradient-to-b from-blue-600 to-blue-400" />
+          
+          <ul className="space-y-8">
+            {highlights.map((highlight, index) => (
+              <motion.li
+                key={index}
+                variants={itemVariants}
+                className="flex items-start gap-6 pl-6 transform hover:-translate-x-1 transition-transform duration-300"
+              >
+                <div className="relative flex-shrink-0 mt-2">
+                  <span className="w-3 h-3 rounded-full bg-blue-600 block relative shadow-[0_0_0_4px_rgba(37,99,235,0.1)] after:content-[''] after:absolute after:w-1.5 after:h-1.5 after:rounded-full after:bg-white after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2" />
+                </div>
+                <span className="text-gray-700 leading-relaxed text-[16px] font-light md:text-[18px]">{highlight}</span>
+              </motion.li>
+            ))}
+          </ul>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default HighlightsSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Navigation/Navigation.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Navigation/Navigation.jsx
new file mode 100644
index 0000000..bd2c2c0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Navigation/Navigation.jsx
@@ -0,0 +1,142 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ArrowUp, Menu, ChevronDown } from 'lucide-react';
+import ShareMenu from '../ShareMenu/ShareMenu';
+
+const Navigation = () => {
+  const [isSticky, setIsSticky] = useState(false);
+  const [activeSection, setActiveSection] = useState('insights_1');
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  const sections = [
+    { id: 'insights_1', label: 'Highlights' },
+    { id: 'insights_0', label: 'Overview' },
+    { id: 'insights_2', label: 'Challenges' },
+    { id: 'insights_3', label: 'Solution' },
+    { id: 'insights_4', label: 'Benefits' },
+    { id: 'insights_5', label: 'Conclusion' }
+  ];
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsSticky(window.scrollY > 100);
+
+      const current = sections.find(({ id }) => {
+        const element = document.getElementById(id);
+        if (element) {
+          const rect = element.getBoundingClientRect();
+          return rect.top <= 150 && rect.bottom >= 150;
+        }
+        return false;
+      });
+
+      if (current) {
+        setActiveSection(current.id);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToSection = (sectionId) => {
+    const element = document.getElementById(sectionId);
+    element?.scrollIntoView({ behavior: 'smooth' });
+    setIsMobileMenuOpen(false);
+  };
+
+  return (
+    <>
+      {/* Desktop Navigation */}
+      <motion.nav
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: isSticky ? 1 : 0, y: isSticky ? 0 : -20 }}
+        className="fixed left-0 right-0 z-40 hidden md:block"
+        style={{
+          top: 'calc(var(--navbar-height, 63px))',
+          background:
+            'linear-gradient(180deg, rgba(231,231,231,0.95) 0%, rgba(255,255,255,0.9) 100%)',
+          backdropFilter: 'blur(8px)'
+        }}
+      >
+        <div className="max-w-3xl mx-auto px-4 py-3 flex justify-center gap-2">
+          {sections.map(({ id, label }) => (
+            <button
+              key={id}
+              onClick={() => scrollToSection(id)}
+              className={`px-6 py-2 text-sm font-medium text-gray-600 rounded-full transition-all duration-300 hover:bg-gray-50/80 hover:text-gray-900 ${
+                activeSection === id
+                  ? 'bg-blue-600 text-white shadow-md hover:bg-blue-700'
+                  : ''
+              }`}
+              style={{ minWidth: '100px' }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      </motion.nav>
+
+      {/* Mobile Navigation */}
+      <div className="fixed bottom-6 left-4 right-4 z-50 md:hidden">
+        <div className="flex items-center gap-3 max-w-full">
+          <ShareMenu isMobile={true} />
+          <button
+            className="flex-1 flex items-center justify-between px-6 py-3 bg-white rounded-full shadow-lg"
+            style={{ boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)', minWidth: 0 }}
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          >
+            <span
+              className="font-medium text-gray-900 truncate"
+              style={{ maxWidth: 'calc(100% - 24px)' }}
+            >
+              {sections.find((s) => s.id === activeSection)?.label}
+            </span>
+            <ChevronDown
+              className={`w-5 h-5 text-gray-400 transition-transform duration-300 ${
+                isMobileMenuOpen ? 'rotate-180 text-blue-600' : ''
+              }`}
+            />
+          </button>
+        </div>
+
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <>
+              <motion.div
+                className="fixed inset-0 bg-black/20 backdrop-blur-sm"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                onClick={() => setIsMobileMenuOpen(false)}
+              />
+              <motion.div
+                className="absolute bottom-full left-0 right-0 mb-3 bg-white rounded-2xl p-2 shadow-xl"
+                style={{ maxHeight: '60vh', overflowY: 'auto' }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 20 }}
+              >
+                {sections.map(({ id, label }) => (
+                  <button
+                    key={id}
+                    onClick={() => scrollToSection(id)}
+                    className={`w-full text-left px-4 py-3 text-gray-700 rounded-xl transition-colors hover:bg-gray-50 ${
+                      activeSection === id ? 'bg-blue-50 text-blue-600 font-medium' : ''
+                    }`}
+                  >
+                    {label}
+                  </button>
+                ))}
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
+      </div>
+    </>
+  );
+};
+
+export default Navigation;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Overview.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Overview.jsx
new file mode 100644
index 0000000..48c8e40
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/Overview.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const Overview = ({ title, content }) => {
+  return (
+    <section id="insights_1" className="max-w-6xl mx-auto px-4 py-12">
+      <motion.h2
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-sm font-bold tracking-wider text-gray-900 mb-8"
+      >
+        OVERVIEW
+      </motion.h2>
+      
+      <motion.h3
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="text-xl md:text-4xl font-light text-gray-900 mb-6"
+      >
+        {title}
+      </motion.h3>
+      
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+        className="space-y-6 text-gray-600"
+      >
+        {content.map((paragraph, index) => (
+          <p key={index}>{paragraph}</p>
+        ))}
+      </motion.div>
+    </section>
+  );
+};
+
+export default Overview;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/RelatedReading.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/RelatedReading.jsx
new file mode 100644
index 0000000..878cc4b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/RelatedReading.jsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { slides } from "@pages/home/components/caseStudiesSlider/config/serviceSliderSlides.json";
+
+const ArticleCard = ({ article }) => {
+  const caseStudyPath = `/slider-detail/${article.id}`;
+
+  return (
+    <Link to={caseStudyPath} className="block transition-transform duration-300 hover:-translate-y-2 group">
+      <div className="relative aspect-video mb-4 overflow-hidden rounded-lg">
+        <img src={article.image} alt={article.title} className="w-full h-full object-cover" />
+      </div>
+      <div className="space-y-2">
+        <h3 className="text-xl font-semibold text-gray-900 transition-colors duration-300 group-hover:text-blue-600">{article.title}</h3>
+        <p className="text-gray-600 line-clamp-2">{article.description}</p>
+      </div>
+    </Link>
+  );
+};
+
+const RelatedReading = ({ currentCaseStudyId }) => {
+  const [relatedCaseStudies, setRelatedCaseStudies] = useState([]);
+  
+  useEffect(() => {
+    let isMounted = true;
+    
+    const fetchRelatedContent = async () => {
+      try {
+        // Filter out current case study and get 3 random related ones
+        const filteredSlides = slides
+          .filter(slide => slide.id !== currentCaseStudyId)
+          .sort(() => Math.random() - 0.5)
+          .slice(0, 3);
+
+        if (isMounted) {
+          setRelatedCaseStudies(filteredSlides);
+        }
+      } catch (error) {
+        console.error('Error fetching related content:', error);
+      }
+    };
+
+    fetchRelatedContent();
+    
+    return () => {
+      isMounted = false;
+    };
+  }, [currentCaseStudyId]);
+
+  return (
+    <section className="py-20 px-8 bg-white">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+        className="max-w-7xl mx-auto"
+      >
+        <h2 className="text-3xl font-semibold text-gray-900 mb-12">Related Case Studies</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {relatedCaseStudies.map((article) => (
+            <ArticleCard key={article.id} article={article} />
+          ))}
+        </div>
+      </motion.div>
+    </section>
+  );
+};
+
+export default RelatedReading;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/ShareMenu/ShareMenu.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/ShareMenu/ShareMenu.jsx
new file mode 100644
index 0000000..cf1f38b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/ShareMenu/ShareMenu.jsx
@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Share2, Linkedin, Twitter, Facebook, Mail, Copy, X } from 'lucide-react';
+
+const ShareMenu = ({ isMobile }) => {
+  const [isShareOpen, setIsShareOpen] = useState(false);
+  const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
+  
+  // Get page title and description from meta tags
+  const pageTitle = document.title;
+  const metaDescription = document.querySelector('meta[name="description"]')?.content || '';
+
+  // Create a professional sharing message with hashtags
+  const createShareText = () => {
+    const hashtags = ['#Tech4Biz', '#Innovation', '#DigitalTransformation'];
+    const category = document.querySelector('meta[name="category"]')?.content;
+    if (category) {
+      hashtags.push(`#${category.replace(/[&\s]+/g, '')}`);
+    }
+
+    return `${pageTitle}\n\n${metaDescription}\n\nRead the full case study at Tech4Biz:\n${currentUrl}\n\n${hashtags.join(' ')} | via @Tech4Biz_io`;
+  };
+
+  const handleShare = (platform) => {
+    const shareText = createShareText();
+    
+    const shareUrls = {
+      twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}&text=${encodeURIComponent(shareText)}`,
+      linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(currentUrl)}`,
+      facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}&quote=${encodeURIComponent(shareText)}`,
+      email: `mailto:?subject=${encodeURIComponent(pageTitle)}&body=${encodeURIComponent(
+        `Check out this case study from Tech4Biz:\n\n${shareText}`
+      )}`
+    };
+
+    // Open share dialog in a new window
+    const width = 550;
+    const height = 400;
+    const left = (window.screen.width - width) / 2;
+    const top = (window.screen.height - height) / 2;
+    
+    if (platform === 'email') {
+      window.location.href = shareUrls[platform];
+    } else {
+      window.open(
+        shareUrls[platform],
+        'share',
+        `toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${width}, height=${height}, top=${top}, left=${left}`
+      );
+    }
+  };
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(currentUrl);
+    // Optionally show a success message
+  };
+
+  // Mobile version
+  if (isMobile) {
+    return (
+      <>
+        <button
+          className="md:hidden flex items-center justify-center p-3 bg-white rounded-full text-gray-600 hover:text-blue-600 transition-colors flex-shrink-0 h-12 w-12"
+          style={{ boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)' }}
+          onClick={() => setIsShareOpen(true)}
+          aria-label="Share"
+        >
+          <Share2 className="w-5 h-5" />
+        </button>
+
+        <AnimatePresence>
+          {isShareOpen && (
+            <>
+              <motion.div
+                className="fixed inset-0 bg-black/20 backdrop-blur-sm z-[99]"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                onClick={() => setIsShareOpen(false)}
+              />
+              <motion.div
+                className="fixed bottom-[88px] left-4 right-4 bg-white rounded-2xl shadow-xl overflow-hidden z-[100]"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: 20 }}
+              >
+                <ShareMenuContent 
+                  onClose={() => setIsShareOpen(false)}
+                  copyToClipboard={copyToClipboard}
+                  currentUrl={currentUrl}
+                  handleShare={handleShare}
+                />
+              </motion.div>
+            </>
+          )}
+        </AnimatePresence>
+      </>
+    );
+  }
+
+  // Desktop version
+  return (
+    <div className="relative hidden md:block mb-8">
+      <button
+        onClick={() => setIsShareOpen(!isShareOpen)}
+        className="flex items-center gap-2 text-white/80 hover:text-white transition-colors p-2"
+        aria-label="Share this case study"
+      >
+        <Share2 className="w-6 h-6" />
+      </button>
+
+      <AnimatePresence>
+        {isShareOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            transition={{ duration: 0.2 }}
+            className="absolute bottom-full left-full ml-2 mb-2 bg-white shadow-lg rounded-xl w-[370px]"
+          >
+            <ShareMenuContent 
+              onClose={() => setIsShareOpen(false)}
+              copyToClipboard={copyToClipboard}
+              currentUrl={currentUrl}
+              handleShare={handleShare}
+            />
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+const ShareMenuContent = ({ onClose, copyToClipboard, currentUrl, handleShare }) => (
+  <div className="p-4">
+    <div className="flex items-center justify-between mb-4">
+      <span className="font-medium text-gray-900">Share</span>
+      <button onClick={onClose}>
+        <X className="w-5 h-5 text-gray-500 hover:text-gray-700" />
+      </button>
+    </div>
+    <div className="grid grid-cols-4 gap-4 pb-4 mb-4 border-b border-gray-100">
+      <button
+        className="flex flex-col items-center gap-1 text-gray-600 hover:text-blue-600 transition-colors"
+        onClick={() => handleShare('linkedin')}
+      >
+        <Linkedin className="w-5 h-5" />
+      </button>
+      <button
+        className="flex flex-col items-center gap-1 text-gray-600 hover:text-blue-600 transition-colors"
+        onClick={() => handleShare('twitter')}
+      >
+        <Twitter className="w-5 h-5" />
+      </button>
+      <button
+        className="flex flex-col items-center gap-1 text-gray-600 hover:text-blue-600 transition-colors"
+        onClick={() => handleShare('facebook')}
+      >
+        <Facebook className="w-5 h-5" />
+      </button>
+      <button
+        className="flex flex-col items-center gap-1 text-gray-600 hover:text-blue-600 transition-colors"
+        onClick={() => handleShare('email')}
+      >
+        <Mail className="w-5 h-5" />
+      </button>
+    </div>
+    <div className="flex items-center gap-2">
+      <input
+        type="text"
+        value={currentUrl}
+        readOnly
+        className="flex-1 px-3 py-2 text-sm border rounded-lg bg-gray-50 text-gray-700"
+      />
+      <button
+        onClick={copyToClipboard}
+        className="p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-600"
+      >
+        <Copy className="w-5 h-5" />
+      </button>
+    </div>
+  </div>
+);
+
+export default ShareMenu; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/SolutionSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/SolutionSection.jsx
new file mode 100644
index 0000000..1ffd758
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/SolutionSection.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Quote } from 'lucide-react';
+
+const SolutionSection = ({ title, content, quote }) => {
+  return (
+    <section id="insights_3" className="max-w-6xl mx-auto px-4 py-16">
+      <motion.h2
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="text-sm font-bold tracking-wider text-gray-900 mb-8"
+      >
+        SOLUTION
+      </motion.h2>
+
+      <motion.h3
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.1 }}
+        className="text-xl md:text-4xl font-light text-gray-900 mb-8 max-w-3xl"
+      >
+        {title}
+      </motion.h3>
+
+      <motion.div className="space-y-6 text-gray-600">
+        {content.map((paragraph, index) => (
+          <p key={index}>{paragraph}</p>
+        ))}
+
+        <motion.figure
+          initial={{ opacity: 0, y: 40 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3, duration: 0.8 }}
+          className="my-12 p-10 bg-[#f0f7ff] rounded-2xl shadow-[0_4px_6px_rgba(0,0,0,0.05)]"
+        >
+          <div className="flex gap-6 items-start">
+            <div className="flex-shrink-0 hidden md:block">
+              <Quote className="w-10 h-10 text-blue-500" />
+            </div>
+            <blockquote className="text-[1.2rem] md:text-2xl leading-[1.2] md:leading-[1.5] font-light text-[#1e40af]  flex-grow italic">
+              "{quote.text}"
+            </blockquote>
+          </div>
+        </motion.figure>
+      </motion.div>
+    </section>
+  );
+};
+
+export default SolutionSection;
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/TransformationCTA.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/TransformationCTA.jsx
new file mode 100644
index 0000000..143c95c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/components/TransformationCTA.jsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import CRMModalForm from '../../../../components/modals/CRMModalForm';
+
+const Button = ({ children, hasArrow = false, className = '', onClick }) => (
+  <motion.button
+    whileHover={{ scale: 1.02 }}
+    whileTap={{ scale: 0.98 }}
+    className={`
+      px-6 py-3.5 border border-white/20 rounded-full
+      text-white text-[15px] font-medium tracking-wide
+      flex items-center gap-3
+      transition-all duration-300
+      hover:border-white/40 hover:bg-white/5
+      hover:shadow-[0_0_20px_rgba(255,255,255,0.08)]
+      active:shadow-none
+      ${className}
+    `}
+    onClick={onClick}
+  >
+    {children}
+    {hasArrow && <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />}
+  </motion.button>
+);
+
+const TransformationCTA = () => {
+  const navigate = useNavigate();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // Modal handlers
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  // Navigation handlers
+  const handleNavigation = (path) => {
+    navigate(path);
+  };
+
+  return (
+    <section className="bg-[#1B1B1B] relative overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-b from-white/[0.02] to-transparent" />
+      
+      <div className="relative min-h-[350px] sm:min-h-[450px] flex items-center border-b border-white/10">
+        <div className="max-w-7xl mx-auto px-5 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 w-full">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 lg:gap-20 items-start md:items-center">
+            {/* Left Section */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              className="space-y-8"
+            >
+              <div className="space-y-6">
+                <h2 className="text-white text-3xl sm:text-4xl lg:text-5xl font-light leading-[1.2]">
+                  Transformation starts here
+                </h2>
+                <p className="text-white/80 text-base sm:text-lg max-w-md">
+                  Ready for adaptive innovation?
+                </p>
+              </div>
+              
+              <div className="pt-2">
+                <Button 
+                  onClick={handleOpenModal}
+                  className="w-full sm:w-auto justify-center group"
+                >
+                  Talk to our experts
+                </Button>
+              </div>
+            </motion.div>
+
+            {/* Vertical Line Separator */}
+            <div className="hidden md:block absolute left-1/2 top-[15%] bottom-[15%] w-px bg-gradient-to-b from-white/5 via-white/10 to-white/5" />
+
+            {/* Right Section */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className="space-y-8"
+            >
+              <p className="text-white/60 text-sm tracking-wider uppercase">
+                Find out more
+              </p>
+              <div className="space-y-4">
+                <Button 
+                  hasArrow 
+                  onClick={() => handleNavigation('/about')}
+                  className="w-full sm:w-auto justify-between group"
+                >
+                  Who we are
+                </Button>
+                <Button 
+                  hasArrow 
+                  onClick={() => handleNavigation('/services')}
+                  className="w-full sm:w-auto justify-between group"
+                >
+                  What we do
+                </Button>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal Component */}
+      <CRMModalForm
+        isVisible={isModalOpen}
+        onClose={handleCloseModal}
+        source="Case Study CTA"
+      />
+    </section>
+  );
+};
+
+export default TransformationCTA;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/cloud-commerce.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/cloud-commerce.json
new file mode 100644
index 0000000..8a68b5b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/cloud-commerce.json
@@ -0,0 +1,88 @@
+{
+  "id": "cloud-commerce",
+  "category": "E-commerce Solutions",
+  "title": "Cloud-Native Commerce Platform",
+  "heroTitle": "Next-Generation Digital Commerce",
+  "description": "Scalable cloud-native commerce platform enabling seamless omnichannel experiences, real-time inventory management, and AI-driven personalization.",
+  "heroImage": "/images/casestudies/transforming-e-commerce.webp",
+  "overview": {
+    "title": "Revolutionizing Online Retail with Serverless Technology: An Adaptable, Economical, and Flexible Approach",
+    "content": [
+      "Serverless computing offers a scalable, adaptable, and economical option for e-commerce platforms, enabling them to automatically adjust to traffic needs while reducing operational expenses.",
+      "Utilizing a pay-as-you-go pricing structure along with modular microservices allows companies to swiftly refresh and launch new features, enhancing agility and guaranteeing effective resource use.",
+      "Serverless computing simplifies operational complexity by removing the necessity for infrastructure management, which allows for quicker development cycles and assists e-commerce platforms in remaining competitive within a changing market."
+    ]
+  },
+  "highlights": [
+    "Adopting a serverless, event-based approach for smooth interaction and resource scaling.",
+    "Guaranteeing peak performance during traffic surges with automatic adjustments and minimizing expenses by paying solely for actual consumption.",
+    "Breaking down the platform into microservices that can be deployed and managed independently using serverless functions for improved agility."
+  ],
+  "challenges": {
+    "title": "Obstacles in Scalability, Adaptability, and Cost-Effectiveness for Conventional E-commerce Platforms",
+    "content": [
+      "E-commerce sites face challenges managing abrupt traffic increases during peak occasions such as sales, resulting in sluggish performance and possible system failures.",
+      "Conventional monolithic structures restrict the capacity to separately scale components, impeding platform adaptability and agility.",
+      "Overseeing the infrastructure necessary for scalability and microservices is challenging and resource-demanding, frequently necessitating specialized teams and higher operational expenses.",
+      "Conventional systems involve considerable infrastructure expenses, particularly during times of low activity when resources aren't fully utilized, rendering them less economical than contemporary alternatives."
+    ]
+  },
+  "solution": {
+    "title": "Embracing Serverless and Event-Driven Architecture for Scalable and Effective E-commerce Solutions",
+    "content": [
+      "Serverless functions designed for microservices activate in response to particular events such as order placements or inventory changes, enhancing resource efficiency and removing the necessity for dedicated servers.",
+      "The system autonomously adjusts to traffic surges or higher demand, guaranteeing steady performance during busy periods like sales, promotions, or product releases.",
+      "Serverless computing eliminates the necessity for manual server management or provisioning, greatly minimizing operational complexity and allowing resources to be allocated for development and innovation.",
+      "Microservices can be updated, deployed, and scaled separately, providing enhanced flexibility in addressing business requirements and adapting to evolving market dynamics.",
+      "The pay-as-you-go approach allows companies to spend only for real usage, providing cost efficiency during low-traffic times while guaranteeing scalability in high-demand periods without excessive provisioning."
+    ],
+    "quote": {
+      "text": "Adopting serverless computing allows e-commerce platforms to scale easily, lower expenses, and enhance flexibility, guaranteeing peak performance during times of high demand.",
+      "author": "Tech4Biz Solutions",
+      "position": "Cloud Architecture Team"
+    }
+  },
+  "benefits": {
+    "title": "Harnessing the Potential of Serverless Computing for E-commerce: Essential Benefits for Scalability, Cost Savings, and Flexibility",
+    "content": [
+      "Serverless computing automatically adjusts resources to manage traffic changes, guaranteeing the platform runs smoothly during high-demand periods such as sales, holidays, or product releases, without the need for manual adjustments or outages.",
+      "The pay-as-you-go approach guarantees that companies only incur costs for the compute power they actually use, significantly lowering expenses during off-peak times and removing the necessity for excess infrastructure.",
+      "Modular microservices enable companies to create, modify, and launch features or services autonomously.",
+      "With serverless computing, companies no longer have to handle servers or concern themselves with infrastructure provisioning.",
+      "The serverless architecture speeds up development cycles by allowing developers to concentrate on coding instead of overseeing infrastructure."
+    ]
+  },
+  "conclusion": {
+    "content": [
+      "Tech4Biz Solutions' event-driven, serverless architecture for e-commerce platforms signifies a major advancement in scalability, cost-effectiveness, and adaptability.",
+      "By utilizing serverless computing, companies can guarantee peak performance during busy events while reducing infrastructure maintenance, ultimately redefining their e-commerce landscape. This contemporary architecture enhances platform performance while enabling businesses to quickly adjust to market changes, guaranteeing ongoing growth and innovation in the digital commerce arena."
+    ],
+    "pdfUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Transforming%20E-commerce%20with%20Serverless%20Computing.pdf"
+  },
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/commerce-intelligence.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/commerce-intelligence.json
new file mode 100644
index 0000000..8fe8b38
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/commerce-intelligence.json
@@ -0,0 +1,96 @@
+{
+  "id": "commerce-intelligence",
+  "category": "Business Intelligence",
+  "title": "E-commerce Analytics Platform",
+  "heroTitle": "Transforming E-Commerce Pricing",
+  "description": "Revolutionary e-commerce analytics platform leveraging AI-enabled dynamic pricing for competitive edge, enhanced revenue, and real-time market responsiveness.",
+  "heroImage": "/images/casestudies/dynamic-pricing-and-analytics.webp",
+  
+  "overview": {
+    "title": "Transforming E-Commerce Pricing: How Tech4Biz Enhanced a Premier Platform with AI-Enabled Dynamic Pricing for a Competitive Edge",
+    "content": [
+      "In the rapidly changing digital economy of today, pricing strategies are vital for sustaining a competitive advantage and enhancing revenue. To remain competitive, companies require flexible, data-informed pricing strategies that can swiftly respond to evolving market trends.",
+      "Our client, a prominent e-commerce platform, faced challenges from changing market dynamics, evolving customer preferences, and intense competition. Conventional pricing models couldn't adapt quickly, leading to stagnant income and lost chances.",
+      "Tech4Biz collaborated with the client to deploy AI-driven dynamic pricing analytics, facilitating smarter, real-time pricing choices that were better aligned with market conditions. This solution enabled the client to make quicker, more informed choices, enhancing competitiveness and promoting revenue increase."
+    ]
+  },
+
+  "highlights": [
+    "Deployed an AI-based solution for instant price modifications depending on demand, customer actions, and competitor evaluation",
+    "Consolidated various data sources, allowing for smooth analysis and rapid, well-informed pricing choices",
+    "Increased revenue and customer satisfaction by implementing tailored pricing and flexible strategies"
+  ],
+
+  "challenges": {
+    "title": "Addressing E-Commerce Pricing Issues: How Tech4Biz Facilitated Instant, Data-Informed Pricing for Competitive Edge",
+    "content": [
+      "The e-commerce sector faces ongoing changes in demand influenced by elements such as seasonality, holidays, and market trends, necessitating immediate pricing modifications to remain competitive.",
+      "Pricing strategies of competitors greatly influence customer buying choices, requiring prompt actions to sustain product attractiveness.",
+      "Customized customer expectations, such as specific offers and promotions, pose challenges in modifying pricing according to personal preferences and actions.",
+      "The client depended on conventional, manual pricing techniques and fixed models that were too sluggish to respond to real-time market fluctuations.",
+      "Obsolete pricing methods constrained the client's capability to seize new opportunities and react efficiently to competitive challenges."
+    ]
+  },
+
+  "solution": {
+    "title": "Tech4Biz implemented a comprehensive dynamic pricing analytics solution powered by AI and predictive analytics",
+    "content": [
+      "We created a scalable data ingestion system to collect information from sources such as sales records, competitor pricing, and customer interactions. Cloud-based pipelines synchronized these streams, facilitating real-time analytics for precise decision-making.",
+      "A dynamic pricing engine powered by AI adjusted prices in real-time according to changes in demand, competitor actions, and customer behaviors. It facilitated customized pricing strategies, enhancing conversion rates and integrating effortlessly with current infrastructure.",
+      "Predictive machine learning models enhanced pricing strategies by estimating demand, assessing price elasticity, and categorizing customers. This guaranteed customized pricing strategies that aligned profitability with customer contentment.",
+      "Real-time data processing pipelines provided immediate updates to pricing strategies, ensuring they remained in sync with market trends. This minimized latency and preserved competitiveness in a rapid e-commerce landscape.",
+      "Feedback loops tracked pricing performance, offering insights to enhance models and strategies. The solution developed gradually, remaining in sync with market trends, customer demands, and business objectives."
+    ],
+    "quote": {
+      "text": "Through the adoption of AI-enhanced dynamic pricing analytics, Tech4Biz revolutionized e-commerce pricing strategies, facilitating real-time, data-informed decisions that improved competitiveness, maximized revenue, and provided tailored customer experiences—allowing the client to swiftly adapt in a constantly changing market.",
+      "author": "Michael Chen",
+      "position": "Director of E-commerce"
+    }
+  },
+
+  "benefits": {
+    "title": "Enhancing Revenue Expansion and Market Responsiveness: How Tech4Biz Strengthened E-Commerce Platforms with AI-Driven Dynamic Pricing",
+    "content": [
+      "The AI-driven pricing system created fresh revenue opportunities by modifying prices in real-time, enhancing sales via data-informed tactics. Tailored promotions for distinct customer groups stimulated increased spending and repeat buys, propelling revenue expansion.",
+      "By synchronizing prices with demand predictions, the solution enhanced inventory turnover, minimizing surplus costs and avoiding stock shortages. Pricing competitively according to demand levels guaranteed effective operations and product accessibility.",
+      "Real-time pricing modifications enabled the client to remain competitive, seize market share, and draw in new customers. This flexibility guaranteed that pricing matched market trends, enhancing the client's standing in the digital marketplace.",
+      "Customized pricing approaches aligned with customer preferences improved the shopping experience and fostered loyalty. Tailored promotions enhanced relationships, boosting satisfaction and engagement.",
+      "Automation decreased the need for manual pricing tasks, conserving time and reducing mistakes while expanding alongside business growth. The solution's adaptability enabled sustained growth and responsiveness to market fluctuations."
+    ]
+  },
+
+  "conclusion": {
+    "content": [
+      "By utilizing our AI-driven predictive analytics solution, the client underwent a major change in their pricing strategies, resulting in improved revenue possibilities and better customer experiences. By utilizing dynamic pricing informed by up-to-the-minute market data, the client managed to outpace competitors and swiftly respond to shifting market circumstances, guaranteeing ongoing growth.",
+      "This strategic change enhanced customer satisfaction via tailored pricing and also offered a competitive edge that established the client as a frontrunner in the e-commerce sector. As a reliable ally, we stay committed to consistently providing value, aiding their sustained success, and assisting them in upholding their leadership in the constantly changing e-commerce sector."
+    ],
+    "pdfUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Predictive%20Analytics%20for%20Dynamic%20Pricing%20in%20E-Commerce.pdf"
+  },
+
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/index.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/index.js
new file mode 100644
index 0000000..e4b5261
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/index.js
@@ -0,0 +1,21 @@
+import securityPlatform from './security-platform.json';
+import riskAnalytics from './risk-analytics.json';
+import commerceIntelligence from './commerce-intelligence.json';
+import retailManagement from './retail-management.json';
+import speechRecognition from './speech-recognition.json';
+import learningPlatform from './learning-platform.json';
+import retailAutomation from './retail-automation.json';
+import cloudCommerce from './cloud-commerce.json';
+
+export const caseStudies = {
+  'security-platform': securityPlatform,
+  'risk-analytics': riskAnalytics,
+  'commerce-intelligence': commerceIntelligence,
+  'retail-management': retailManagement,
+  'speech-recognition': speechRecognition,
+  'learning-platform': learningPlatform,
+  'retail-automation': retailAutomation,
+  'cloud-commerce': cloudCommerce
+};
+
+export const getCaseStudyById = (id) => caseStudies[id];
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/learning-platform.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/learning-platform.json
new file mode 100644
index 0000000..cc66d1b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/learning-platform.json
@@ -0,0 +1,85 @@
+{
+  "id": "learning-platform",
+  "category": "Education Technology",
+  "title": "Metaverse AR Learning Platform",
+  "heroTitle": "Immersive Professional Training",
+  "description": "Advanced immersive learning platform leveraging Metaverse AR, digital twin technology, and AI-powered analytics for revolutionary professional training and development.",
+  "heroImage": "/images/casestudies/metaverse-and-ar.webp",
+  "overview": {
+    "title": "Revolutionizing Professional Education through Metaverse AR Immersive Learning Technologies",
+    "content": [
+      "Tech4Biz Solutions is at the forefront of revolutionizing professional education and training utilizing the capabilities of Metaverse AR and immersive learning technologies.",
+      "Through the incorporation of advanced technologies such as AR, VR, XR, AI, and digital twin scanning, we provide secure, scalable, and highly efficient training solutions across multiple sectors.",
+      "Our method not only addresses the issues associated with conventional training techniques—like expense, safety, and scalability—but also guarantees practical accuracy and instant learning results."
+    ]
+  },
+  "highlights": [
+    "Cutting-edge AR & VR Solutions: Utilizing Metaverse technology for engaging, interactive learning opportunities",
+    "Digital Twin Imaging: Developing virtual representations of people for precise assessment, education, and evaluation",
+    "Sector Utilizations: Revolutionizing healthcare, engineering, education, and regulatory sciences with immersive training settings"
+  ],
+  "challenges": {
+    "title": "Surpassing the Constraints of Conventional Training Techniques: Tackling Expenses, Expandability, Security, and Practical Experience",
+    "content": [
+      "Restricted exposure to real-world situations hinders professionals from acquiring practical experience in intricate systems, crucial for honing practical abilities and getting ready for actual challenges. Conventional training techniques frequently do not adequately replicate these environments.",
+      "The scalability issues in conventional training approaches hinder the capacity to effectively train large numbers of professionals. Restricted physical space, finite resources, and the requirement for face-to-face arrangements hinder extensive training, impeding the overall effectiveness and accessibility of the program.",
+      "Safety hazards in sectors such as healthcare and engineering create significant difficulties for hands-on training. High-risk situations like surgical procedures or intricate machinery assessments can result in accidents, restricting the scope and frequency of practical training exercises that are essential for skill enhancement.",
+      "Conventional training techniques involve significant expenses because they require physical prototypes, field testing, and logistical assistance. These costs hinder organizations from expanding training programs, especially when aiming to educate a significant number of employees in various locations."
+    ]
+  },
+  "solution": {
+    "title": "Revolutionizing Professional Education through Metaverse AR Immersive Learning Technologies for Secure, Expandable, and Analytics-Based Experiences",
+    "content": [
+      "Digital Twin Scanning: By generating virtual duplicates of individuals or equipment, Tech4Biz Solutions guarantees accurate and secure evaluations, enabling experts to simulate situations and make well-informed choices without the hazards of the real world.",
+      "Engaging Training Simulations: Utilizing AR, VR, and MR technologies, we provide interactive and captivating training settings customized for multiple sectors, boosting skill enhancement and immediate learning.",
+      "Federated Learning: Our system encourages cooperative learning among institutions while protecting data privacy, allowing professionals to exchange knowledge and enhance their skills without risking security.",
+      "Instantaneous Data Integration: By seamlessly incorporating real-time data into virtual settings, we deliver prompt feedback and insights, enhancing learning results and decision-making for professionals in various sectors."
+    ],
+    "quote": {
+      "text": "Tech4Biz Solutions revolutionizes professional development with engaging, data-informed virtual settings, guaranteeing safe, scalable, and impactful education.",
+      "author": "Dr. James Wilson",
+      "position": "Director of Digital Learning"
+    }
+  },
+  "benefits": {
+    "title": "Transforming Professional Training Through Immersive Technologies",
+    "content": [
+      "Enhanced Safety: Virtual training environments eliminate physical risks while maintaining realistic scenarios for practical skill development.",
+      "Cost Efficiency: Reduction in physical infrastructure and resource requirements through virtual simulations.",
+      "Scalable Learning: Ability to train large numbers of professionals simultaneously across different locations.",
+      "Data-Driven Insights: Real-time analytics and performance tracking for continuous improvement."
+    ]
+  },
+  "conclusion": {
+    "content": [
+      "Tech4Biz Solutions is at the forefront of revolutionizing professional education and training utilizing the capabilities of Metaverse AR and immersive learning technologies. Through the incorporation of advanced technologies such as AR, VR, XR, AI, and digital twin scanning, we provide secure, scalable, and highly efficient training solutions across multiple sectors.",
+      "Our method not only addresses the issues associated with conventional training techniques—like expense, safety, and scalability—but also guarantees practical accuracy and instant learning results. Thanks to these advancements, professionals can participate in immersive simulations, make educated choices, and improve their abilities in a secure and economical way, ultimately influencing the future of education and industry growth."
+    ]
+  },
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/retail-automation.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/retail-automation.json
new file mode 100644
index 0000000..0c99b76
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/retail-automation.json
@@ -0,0 +1,86 @@
+{
+  "id": "retail-automation",
+  "category": "Retail Technology",
+  "title": "Smart Retail Automation System",
+  "heroTitle": "Revolutionizing Retail Operations",
+  "description": "Cutting-edge retail automation platform integrating AI-powered solutions for checkout, inventory management, and customer assistance to transform retail operations.",
+  "heroImage": "/images/casestudies/smart-retail-assistant.webp",
+  "overview": {
+    "title": "Revolutionizing Retail Processes through AI-Powered Automation for Improved Efficiency and Customer Satisfaction",
+    "content": [
+      "Tech4Biz Solutions provides advanced AI models that transform retail operations by automating essential functions such as checkout, inventory control, and customer assistance, thereby enhancing processes and boosting overall productivity.",
+      "Our AI solutions improve customer engagement by offering customized suggestions and individualized experiences using technologies such as natural language processing and speech recognition, which helps build stronger customer connections and loyalty.",
+      "Our AI models are crafted to seamlessly align with your existing hardware and software, simplifying the process of adopting new technologies and facilitating smooth transitions without significant interruptions to your retail setting.",
+      "By automating everyday tasks, our solutions lower operational expenses while enhancing productivity and speed, resulting in a notable increase in profitability, quicker transactions, and a more seamless overall shopping experience."
+    ]
+  },
+  "highlights": [
+    "AI-Driven Automation: Transform your retail operations by automating processes like checkout, inventory management, and customer assistance.",
+    "Seamless Integration: Seamlessly connect with existing hardware and software utilizing Bring Your Own Device (BYOD) capabilities.",
+    "Proven Outcome: Retailers in Dubai and Los Angeles have reduced labor costs by 60% while increasing revenue by 10%."
+  ],
+  "challenges": {
+    "title": "Analyzing the Drawbacks and Challenges of Traditional Training Approaches in Contemporary Learning and Development",
+    "content": [
+      "Traditional training programs often face challenges when it comes to scaling successfully. They may require significant resources, time, and organization, limiting the ability to train large groups of professionals or staff at the same time.",
+      "Real-world training scenarios in fields like healthcare or engineering present substantial risks. Training with real patients or using actual devices can present dangers to both trainees and participants.",
+      "Traditional methods like physical prototypes or field tests lead to considerable costs. These logistical challenges, including transportation, maintenance, and setup, limit the ability to provide scalable and cost-effective training initiatives."
+    ]
+  },
+  "solution": {
+    "title": "AI-Driven Solutions to Address Retail Challenges and Enhance Operational Efficiency",
+    "content": [
+      "Tech4Biz Solutions' AI models are created for easy integration with existing hardware or software systems, ensuring minimal disruption during the implementation phase.",
+      "Our AI technology optimizes key retail functions, such as checkout, inventory management, and customer support, enabling workers to focus on more important tasks.",
+      "Our AI technology achieves substantial cost savings in various operations by automating repetitive tasks.",
+      "Our AI solutions enhance the speed and accuracy of transactions, resulting in a seamless and efficient checkout experience.",
+      "Through the use of advanced algorithms and machine learning, our AI tailors the customer experience by delivering personalized product recommendations and promotions."
+    ],
+    "quote": {
+      "text": "Integrating AI into your retail operations is now crucial, rather than optional, to stay competitive in today's fast-paced market landscape.",
+      "author": "Tech4Biz Solutions",
+      "position": "Retail Innovation Team"
+    }
+  },
+  "benefits": {
+    "title": "Leveraging AI-Powered Automation for Retail Expansion, Productivity, and Improved Customer Experience",
+    "content": [
+      "By automating everyday tasks like checkout and customer support, retailers can cut staffing expenses by as much as 60%.",
+      "AI improves operational efficiency and boosts customer satisfaction, increasing revenue by as much as 10%.",
+      "Automating the checkout procedure and various retail operations accelerates transactions, minimizes wait times, and enhances customer satisfaction.",
+      "Our AI solutions effortlessly integrate with current hardware or software, enabling retailers to easily expand operations across various locations."
+    ]
+  },
+  "conclusion": {
+    "content": [
+      "Tech4Biz Solutions' AI-powered retail automation goes beyond a mere technological enhancement; it represents a revolutionary method for improving operational efficiency, lowering expenses, and increasing customer satisfaction.",
+      "By incorporating our flexible and seamless AI solutions into your current systems, you enable your business to remain competitive in a constantly changing retail environment. The outcome is a more intelligent, efficient operation that promotes growth, enhances customer loyalty, and sets your brand up for enduring success in the digital era."
+    ]
+  },
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/retail-management.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/retail-management.json
new file mode 100644
index 0000000..82f15b4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/retail-management.json
@@ -0,0 +1,88 @@
+{
+  "id": "retail-management",
+  "category": "Retail Operations",
+  "title": "Smart Mall Management System",
+  "heroTitle": "Next-Generation Smart Mall Platform",
+  "description": "Comprehensive smart mall management system integrating IoT, AI, and cloud innovations for enhanced shopping experiences, operational efficiency, and sustainability.",
+  "heroImage": "/images/casestudies/smart-mall-revolution.webp",
+  "overview": {
+    "title": "The Smart Mall Transformation: Utilizing IoT, AI, and Cloud Innovations to Redesign Shopping Experiences, Enhance Operations, and Promote Sustainability",
+    "content": [
+      "The retail sector is experiencing a shift towards digitalization, as intelligent malls utilize IoT technology to improve customer experiences and optimize operations.",
+      "Through the incorporation of IoT sensors, AI-powered analytics, and cloud technologies, retailers can enhance inventory control, minimize energy usage, and provide tailored services to customers.",
+      "The transition to a smart mall setting not only enhances customer involvement but also enables retailers to obtain real-time data, increase revenue, and enhance sustainability efforts."
+    ]
+  },
+  "highlights": [
+    "Utilizing IoT technology and predictive analytics to build an interconnected, data-centric retail environment that improves customer experiences and maximizes operational effectiveness",
+    "Utilizing real-time stock management, energy-saving technologies, and tailored shopping experiences to enhance customer interaction and lower operating expenses",
+    "Gaining a competitive edge with AI-powered insights, adaptive pricing, and sustainability efforts, while preparing the mall for future growth and innovative opportunities"
+  ],
+  "challenges": {
+    "title": "Converting Conventional Brick-and-Mortar Retailers into Intelligent Malls Using IoT, Big Data, and Predictive Analytics for Improved Customer Experience and Operational Effectiveness",
+    "content": [
+      "Conventional physical retail stores encounter difficulties including elevated customer demands for tailored services, inefficiencies in overseeing foot traffic and stock, along with an absence of practical insights for decisions based on data.",
+      "The client sought to convert their brick-and-mortar store into a smart mall by leveraging IoT and big data to enhance different facets, including energy efficiency, customer engagement, and space management.",
+      "They aimed to find a way to collect real-time information via IoT devices, facilitate predictive analytics for inventory and product positioning, and automate energy management to boost sustainability and lower expenses.",
+      "There was an increasing demand for personalized shopping experiences, as customers anticipated customized recommendations and smooth interactions during their shopping journey."
+    ]
+  },
+  "solution": {
+    "title": "Tech4Biz's IoT-Powered Smart Mall Framework",
+    "content": [
+      "Tech4Biz transformed the mall into a linked, data-driven environment by integrating IoT sensors, smart lighting, digital displays, and predictive analytics tools to collect and assess real-time data across the shopping space.",
+      "IoT sensors tracked foot traffic, consumer behavior, and environmental conditions, providing real-time insights to improve store layouts, increase customer engagement, and elevate shopping experiences.",
+      "Utilizing data from IoT devices, the solution integrated AI-driven predictive analytics to forecast demand, improve inventory management, tailor marketing strategies, and apply dynamic pricing with personalized promotions.",
+      "Smart lighting and HVAC systems powered by IoT adjust to current conditions, reducing energy consumption, improving the environment, and lowering operational costs.",
+      "The method included interactive digital displays for tailored promotions and navigation, while location-based services presented unique offers and promotions, ensuring an engaging and seamless shopping experience."
+    ],
+    "quote": {
+      "text": "Tech4Biz's IoT-driven Smart Mall solution revolutionizes retail settings by incorporating real-time data insights, predictive analytics, intelligent lighting, and tailored promotions, streamlining inventory management, improving customer experiences, and fostering energy efficiency for a more sustainable and economical shopping experience.",
+      "author": "Emily Rodriguez",
+      "position": "Head of Retail Operations"
+    }
+  },
+  "benefits": {
+    "title": "Unleashing Retail Capabilities: Major Advantages of IoT-Powered Smart Malls for Effectiveness, Customer Interaction, Sustainability, and Immediate Insights",
+    "content": [
+      "Automated energy oversight and immediate data gathering optimized inventory control, resulting in cost reductions, lower energy use, and faster reactions to inventory shifts.",
+      "Examining customer behavior and foot traffic enabled customized promotions and offers, improving customer satisfaction, loyalty, and the overall shopping experience.",
+      "Enhanced Customer Visits and Involvement: Engaging displays and tailored promotions heightened customer interaction, leading to increased in-store foot traffic and repeat buying, while location-specific services provided timely, pertinent offers.",
+      "Sustainability and Financial Efficiency: Energy-saving systems and improved space utilization lowered operating expenses and advanced sustainability objectives, aiding the mall in aligning with net-zero efforts.",
+      "Immediate Business Insights: Retailers acquired valuable knowledge about customer behavior, sales patterns, and operational efficiency, facilitating data-informed decision-making, flexible pricing, and enhanced revenue generation."
+    ]
+  },
+  "conclusion": {
+    "content": [
+      "With the Smart Mall Revolution, Tech4Biz has introduced an innovative solution that integrates IoT, data analysis, and AI to develop a more intelligent, efficient, and customer-focused retail space.",
+      "This shift is enabling retailers to foster growth, enhance operations, and boost sustainability—all while delivering tailored, innovative shopping experiences for customers."
+    ],
+    "pdfUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Empowering%20Retail%20with%20IoT.pdf"
+  },
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/risk-analytics.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/risk-analytics.json
new file mode 100644
index 0000000..331c889
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/risk-analytics.json
@@ -0,0 +1,87 @@
+{
+  "id": "risk-analytics",
+  "category": "Financial Risk Management",
+  "title": "Predictive Risk Analytics Platform",
+  "heroTitle": "Enhancing Financial Institutions",
+  "description": "Advanced risk analytics platform promoting operational efficiency and strategic development through AI, Cloud, and Data Solutions for financial institutions worldwide.",
+  "heroImage": "/images/casestudies/Improving-financial-security.webp",
+  "overview": {
+    "title": "Enhancing Financial Institutions: Promoting Operational Efficiency and Strategic Development through AI, Cloud, and Data Solutions",
+    "content": [
+      "The worldwide banking and financial services sector is progressively embracing cutting-edge technologies to sustain a competitive advantage. At Tech4Biz, we focus on assisting financial institutions in managing this change.",
+      "We collaborated with a top financial organization to transform its operations by incorporating AI, data storage, and cloud technologies. Our goal was to boost operational effectiveness, refine investment approaches, and guarantee strong security.",
+      "Through the use of advanced AI algorithms, machine learning (ML) models, and scalable cloud infrastructure, we enabled our client to enhance their operations, make informed decisions, and position themselves as a leader in the industry."
+    ]
+  },
+  "highlights": [
+    "Financial institutions face significant pressure to protect customer data, enhance investment strategies, and lower expenses",
+    "Tech4Biz collaborated with a prominent financial organization to tackle these issues by incorporating AI-based analytics, sophisticated data warehousing, and cloud technologies",
+    "Our groundbreaking framework enabled the bank to make more informed investment choices, improve efficiency, and bolster customer confidence"
+  ],
+  "challenges": {
+    "title": "Confronting Major Issues in the Financial Sector: How Tech4Biz Assists Institutions in Overcoming Cybersecurity, Data Privacy, and Outdated System Constraints",
+    "content": [
+      "The rise in cybersecurity threats is a significant worry since financial institutions are prime targets for hackers, encountering dangers such as ransomware, phishing, and data breaches because of the sensitive nature of their information.",
+      "Data privacy and compliance present further challenges due to changing regulations like GDPR and PSD2, necessitating continuous updates and careful actions to protect customer data.",
+      "Legacy systems frequently lack the necessary flexibility and security to meet contemporary requirements, making organizations susceptible to cyber threats and hindering their capacity to expand or implement new technologies.",
+      "The growth of digital platforms has heightened the threats of fraud and identity theft, necessitating advanced, immediate detection and prevention solutions to safeguard both companies and consumers."
+    ]
+  },
+  "solution": {
+    "title": "Improving Investment Choices and Strengthening Security: Tech4Biz Solutions' AI, Data Storage, and Automation for Financial Organizations",
+    "content": [
+      "AI-powered predictive analytics employing machine learning models such as XGBoost and TensorFlow allowed the bank to predict market trends and make enhanced investment choices, leading to better ROI.",
+      "A cloud-based data repository, developed with AWS Glue for effortless integration and Amazon S3 for expandable storage, enhanced data management and offered real-time access for quicker decision-making.",
+      "Automation workflows driven by Python scripts and Ansible decreased manual input, lowered operational expenses, and increased system flexibility, resulting in greater overall efficiency.",
+      "Encryption protocols utilizing OpenSSL, access management through Apache Ranger, and routine compliance assessments guaranteed strong data protection and adherence to regulations for sensitive financial data.",
+      "Implementing a cloud-based infrastructure enabled scalability to meet expanding data requirements and safeguarded the system for the future, allowing adaptability for new technological advancements and security threats."
+    ],
+    "quote": {
+      "text": "The partnership between Tech4Biz and our institution has revolutionized our approach to financial security and risk management.",
+      "author": "Sarah Johnson",
+      "position": "Head of Risk Management"
+    }
+  },
+  "benefits": {
+    "title": "Revealing the Advantages of AI, Automation, and Cloud Technologies: Revolutionizing Financial Organizations through Improved Security, Effectiveness, and Expandable Growth",
+    "content": [
+      "AI-driven predictive analytics enabled the bank to make more precise investment choices by utilizing historical data and machine learning algorithms. The application of sophisticated algorithms such as TensorFlow and XGBoost enabled the bank to forecast market trends more precisely, enhancing their portfolio management approaches.",
+      "The adoption of strong security measures, such as data encryption and sophisticated access control systems, guaranteed the protection of sensitive financial information. These actions assisted the bank in adhering to industry regulations, bolstering customer confidence.",
+      "The automation of repetitive tasks diminished the need for human involvement, optimized operational processes, and greatly cut expenses. This enabled the bank to redirect resources towards innovative and customer-centered initiatives.",
+      "The adoption of a cloud-based data warehouse offered the bank a very scalable and adaptable solution. This framework bolstered the institution's development while minimizing the necessity for regular maintenance and updates, guaranteeing enduring sustainability."
+    ]
+  },
+  "conclusion": {
+    "content": [
+      "The partnership between Tech4Biz and the financial institution has effectively enhanced financial security via the incorporation of AI-powered analytics, sophisticated data warehousing, and cloud automation. This approach has enhanced investment methods, boosted operational effectiveness, and secured adherence to regulations.",
+      "By utilizing these technologies, the bank is now more equipped to make decisions based on data and improve customer experience. This case study highlights Tech4Biz's dedication to assisting financial institutions prosper in a changing market, enhancing their security, efficiency, and competitive advantage for enduring success."
+    ],
+    "pdfUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Revolutionizing%20Financial%20Security.pdf"
+  },
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/security-platform.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/security-platform.json
new file mode 100644
index 0000000..08d0065
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/security-platform.json
@@ -0,0 +1,82 @@
+{
+  "id": "security-platform",
+  "category": "Cybersecurity & Financial Services",
+  "title": "Defending against cyber threats",
+  "heroTitle": "Advanced Security for Financial Systems",
+  "description": "Award-winning enterprise security platform delivering AI-powered threat detection, 24/7 network monitoring, and automated incident response for maximum business protection.",
+  "heroImage": "/images/casestudies/defending-against-cyber-threats.webp",
+  "overview": {
+    "title": "Empowering Businesses to Defend Against Evolving Cyber Threats with Advanced Cybersecurity Solutions from Tech4Biz",
+    "content": [
+      "Tech4Biz offers advanced cybersecurity services to assist businesses in tackling new threats and protecting confidential data. We tackle the increasing intricacy of cyberattacks, empowering organizations to effectively protect their digital spaces.",
+      "We provide innovative, tailored solutions to improve security measures for businesses of all sizes. Our offerings assist businesses in complying with industry regulations, minimizing risks, and safeguarding their digital infrastructures.",
+      "Utilizing technologies such as machine learning, zero trust frameworks, and behavioral biometrics, we provide strong security. Our offerings enable instant protection, minimize operational interruptions, and enhance confidence in your cybersecurity."
+    ]
+  },
+  "highlights": [
+    "Active Cyber Threat Prevention: Utilize AI-powered anomaly detection and machine learning to spot and thwart cyberattacks instantly, guaranteeing ongoing security",
+    "Complete End-to-End Security: Guarantee strong cybersecurity through all-encompassing solutions, protecting all aspects from user access to back-end systems and data safety",
+    "Customized & Scalable Solutions: Obtain personalized cybersecurity frameworks tailored to your business needs, compliance obligations, and adaptable to escalating digital threats"
+  ],
+  "challenges": {
+    "title": "Addressing Increasing Cybersecurity Issues: How Tech4Biz Assists Companies in Protecting Themselves from Changing Risks Through Innovative, Contemporary, and Scalable Solutions",
+    "content": [
+      "Protecting against cyber threats demands ongoing adjustments as attacks increase in both frequency and intricacy. Companies need to protect their systems, data, and networks from threats such as ransomware, phishing, and credential stuffing.",
+      "Numerous sectors, particularly finance, healthcare, and retail, encounter increased risks because of outdated IT infrastructures. Insufficient scalability and weak integration of security systems result in exploitable weaknesses.",
+      "Tech4Biz provides customized solutions to meet changing cybersecurity requirements and guarantee regulatory adherence. Our advanced platforms utilize AI, machine learning, and zero trust architecture to actively protect digital assets."
+    ]
+  },
+  "solution": {
+    "title": "Cybersecurity Solutions Powered by AI: Safeguarding Essential Assets through Enhanced Threat Detection, Automation, and Data Encryption from Tech4Biz Solutions",
+    "content": [
+      "We performed a comprehensive cybersecurity risk evaluation to pinpoint weaknesses, facilitating the development of a tailored plan that tackled particular risks and provided strong safeguards for essential assets and client information.",
+      "Tech4Biz employed AI-driven security solutions, such as Threat Intelligence Platforms (TIP) and Security Information and Event Management (SIEM) systems, to deliver immediate threat identification and flexible defense strategies.",
+      "We implemented robust encryption protocols for data both at rest and in transit. This method protected confidential business and customer data, greatly lowering the chances of data breaches during security events.",
+      "A cloud-based security system facilitated the real-time surveillance of endpoints, servers, and applications. This approach enabled the quick detection and segregation of possible threats, enhancing overall oversight, awareness, and the capacity to respond promptly."
+    ],
+    "quote": {
+      "text": "At Tech4Biz Solutions, we integrate AI-powered security tools, continuous monitoring, and comprehensive encryption to actively combat emerging cyber threats, safeguarding vital data while equipping employees with training to identify and reduce risks before they worsen."
+    }
+  },
+  "benefits": {
+    "title": "Advantages of AI-Powered Cybersecurity: Improving Business Continuity, Expansion, and Data Protection via Tech4Biz Solutions",
+    "content": [
+      "Tools powered by AI facilitated the immediate identification of new threats, leading to quicker responses and minimizing possible harm. Automated incident handling and simplified security processes reduced the need for manual involvement, enhancing operational efficiency.",
+      "End-to-end encryption and protected cloud services shielded essential business information, reducing the chances of breaches and theft of intellectual property. Continuous monitoring guaranteed adherence to data privacy regulations, enhancing stakeholder confidence and minimizing regulatory risks.",
+      "The automation of security procedures minimized the necessity for substantial staff engagement, resulting in considerable savings. A robust cybersecurity framework guaranteed seamless business activities, safeguarding customer confidence and the firm's reputation, even amidst cyber threats."
+    ]
+  },
+  "conclusion": {
+    "content": [
+      "Cyber threats are unavoidable, but with Tech4Biz Solutions supporting you, you can remain proactive against possible dangers. Through the integration of AI-driven defense, cloud security, and live monitoring, we equip companies with the resources necessary to protect against cyber threats, guaranteeing a safe and robust digital future.",
+      "If your company aims to secure its functions and defend important information against cyber risks, reach out to Tech4Biz Solutions now to discover how we can improve your cybersecurity approach."
+    ],
+    "pdfUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/DEFENDING%20AGAINST%20CYBER%20THREATS.pdf"
+  },
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/speech-recognition.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/speech-recognition.json
new file mode 100644
index 0000000..6c13a69
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/config/speech-recognition.json
@@ -0,0 +1,89 @@
+{
+  "id": "speech-recognition",
+  "category": "AI & Machine Learning",
+  "title": "Smart Voice Technology for IoT",
+  "heroTitle": "Intelligent Voice-Enabled IoT Solutions",
+  "description": "Advanced voice recognition platform integrating IoT devices with AI-powered speech recognition, edge computing, and secure communication for seamless device control.",
+  "heroImage": "/images/casestudies/voice-recognition-ai.webp",
+  "overview": {
+    "title": "Transforming IoT Engagement: Intelligent Voice Solutions featuring Speech Recognition, Edge Computing, and Strong Security for Effortless User Interaction",
+    "content": [
+      "The Smart Voice Technology for IoT solution transforms human-machine interaction by utilizing sophisticated speech recognition, deep learning, and NLP to facilitate effortless voice control for IoT devices.",
+      "Through the incorporation of edge computing, the system delivers instant speech recognition with low latency, guaranteeing a seamless and reactive user experience in diverse IoT applications.",
+      "The approach emphasizes user privacy and data safety, utilizing strong encryption and secure communication methods to safeguard sensitive data while providing a tailored voice interaction experience."
+    ]
+  },
+  "highlights": [
+    "Intelligent Voice Technology works with IoT devices to facilitate effortless, hands-free management and automation",
+    "Voice interfaces powered by AI enhance customer engagement, streamline operations, and provide data insights",
+    "Smooth integration with current IoT platforms to improve smart home, healthcare, and business applications",
+    "Tech4Biz assists clients in staying at the forefront by utilizing the capabilities of voice-activated IoT technology"
+  ],
+  "challenges": {
+    "title": "Tackling IoT Interaction Issues: Bridging Fragmented Integration, Improving Accessibility for Every User, and Safeguarding Data Privacy in the Age of Voice-Activated Technologies",
+    "content": [
+      "Conventional interfaces such as applications and physical buttons lead to complicated interactions with IoT devices, which do not provide the flexibility and efficiency required for contemporary settings. This underscores the necessity for a more intuitive and natural way of interaction as IoT devices increase in various sectors.",
+      "Voice-enabled solutions encounter integration issues, as IoT devices frequently function independently and lack interoperability. This division hinders companies from providing a seamless, integrated user experience across different interconnected systems.",
+      "Numerous users, particularly the elderly or individuals with disabilities, struggle with conventional control methods, highlighting the necessity for more accessible and customized voice-activated solutions to enhance IoT interactions.",
+      "As voice control becomes increasingly integrated into IoT, worries about data privacy and security emerge, since voice-enabled applications handle sensitive personal data. Guaranteeing strong security while providing a smooth user experience is essential."
+    ]
+  },
+  "solution": {
+    "title": "Enabling Voice Technology for IoT Management: Effortless, Safe, and Smart User Engagements",
+    "content": [
+      "The platform enables users to manage IoT devices via voice commands, improving convenience and efficiency in smart home, appliance, and healthcare contexts.",
+      "Sophisticated NLP algorithms allow the system to comprehend a variety of voice commands, guaranteeing precise recognition across languages, dialects, and accents to meet various user requirements.",
+      "The solution consolidates various IoT devices into one platform, enhancing task automation, monitoring, and acquiring insights via voice-based inquiries for a connected user experience.",
+      "Cloud computing and machine learning enable real-time data processing, intelligent analytics, and streamlined operations, allowing businesses to enhance customer service and decision-making informed by user interactions.",
+      "End-to-end encryption and voice biometrics protect data and voice communications, guaranteeing adherence to privacy laws and improving security by allowing authorized access to IoT devices."
+    ],
+    "quote": {
+      "text": "Tech4Biz's voice-activated platform revolutionizes IoT management through hands-free operation, sophisticated natural language processing for precise voice recognition, and strong security protocols to safeguard user information, all while offering a cohesive, integrated experience across various devices.",
+      "author": "Dr. Lisa Wang",
+      "position": "Chief Technology Officer"
+    }
+  },
+  "benefits": {
+    "title": "Enabling Enterprises with Voice-Controlled IoT: A More Intelligent, Expandable, and Economical Solution",
+    "content": [
+      "Voice-activated control minimizes the need for manual inputs, enhancing accessibility for individuals with disabilities and facilitating hands-free use in sectors such as healthcare and automotive.",
+      "Automating activities like scheduling and device setup streamlines operations, while real-time analytics and voice commands facilitate quicker, data-informed choices.",
+      "Voice interfaces reduce customer support expenses by facilitating self-service, whereas automation cuts operational costs, particularly in the healthcare and manufacturing industries.",
+      "The platform easily expands to accommodate additional devices and users, guaranteeing that businesses are prepared for upcoming voice technology and IoT developments.",
+      "Voice-activated data gathering improves reporting and business insights, featuring customizable voice dashboards that provide superior device oversight and management."
+    ]
+  },
+  "conclusion": {
+    "content": [
+      "Through the adoption of Smart Voice Technology for IoT, Tech4Biz has enabled companies to develop fluid, use-friendly, and expandable solutions that elevate user experiences, boost operational efficiency, and reveal valuable insights.",
+      "Through AI and voice-activated IoT technologies, we are preparing for the upcoming wave of interconnected devices, fostering smarter and more efficient business operations."
+    ],
+    "pdfUrl": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Advanced%20Speech%20Recognition%20for%20IOT%20hardware.pdf"
+  },
+  "relatedArticles": [
+    {
+      "id": 1,
+      "title": "Enhancing Financial Institutions",
+      "image": "/images/casestudies/risk-analytics.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 2,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 3,
+      "title": "Next-Generation Smart Mall Platform",
+      "image": "/images/casestudies/retail-management.webp",
+      "slug": "slug"
+    },
+    {
+      "id": 4,
+      "title": "Transforming E-Commerce Pricing",
+      "image": "/images/casestudies/commerce-intelligence.webp",
+      "slug": "slug"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/index.jsx
new file mode 100644
index 0000000..98a1249
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/index.jsx
@@ -0,0 +1,126 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { useParams, Navigate } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
+import { getCaseStudyById } from './config/index.js';
+import ServiceErrorBoundary from '@components/common/error/ServiceErrorBoundary';
+import { LoadingFallback } from '@components/common/LoadingFallback';
+import Navigation from './components/Navigation/Navigation.jsx';
+import { getCaseStudySchema } from './utils/getCaseStudySchema.js';
+import CaseStudyHero from './components/CaseStudyHero.jsx';
+import HighlightsSection from './components/HighlightsSection.jsx';
+import Overview from './components/Overview.jsx';
+import Challenges from './components/Challenges.jsx';
+import SolutionSection from './components/SolutionSection.jsx';
+import BenefitsSection from './components/BenefitsSection.jsx';
+import ConclusionSection from './components/ConclusionSection.jsx';
+import RelatedReading from './components/RelatedReading.jsx';
+import TransformationCTA from './components/TransformationCTA.jsx';
+
+const CaseStudyDetail = () => {
+  const [caseStudyData, setCaseStudyData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { caseStudySlug } = useParams();
+
+  // Memoize data fetching function
+  const fetchCaseStudyData = useCallback(() => {
+    try {
+      const data = getCaseStudyById(caseStudySlug);
+      if (!data) {
+        throw new Error('Case study not found');
+      }
+      return data;
+    } catch (err) {
+      throw new Error('Failed to load case study data');
+    }
+  }, [caseStudySlug]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadCaseStudy = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        
+        // Simulate async behavior for consistent UX
+        const data = await new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(fetchCaseStudyData());
+          }, 100);
+        });
+
+        if (isMounted) {
+          setCaseStudyData(data);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err.message);
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadCaseStudy();
+
+    // Cleanup function
+    return () => {
+      isMounted = false;
+    };
+  }, [caseStudySlug, fetchCaseStudyData]);
+
+  // Handle loading state
+  if (isLoading) {
+    return <LoadingFallback />;
+  }
+
+  // Handle error state
+  if (error || !caseStudyData) {
+    throw new Error('Case study data not found');
+  }
+
+  const {
+    title,
+    id,
+    overview = { content: [] },
+    highlights = [],
+    challenges = { content: [] },
+    solution = { content: [] },
+    benefits = { content: [] },
+    conclusion = { content: [] }
+  } = caseStudyData;
+
+  return (
+    <ServiceErrorBoundary>
+      <Helmet>
+        <title>{`${title} - Tech4biz`}</title>
+        <meta
+          name="description"
+          content={`Detailed case study of ${title} by Tech4biz.`}
+        />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={`Detailed case study of ${title} by Tech4biz.`} />
+        <meta property="og:type" content="website" />
+        <link rel="canonical" href={`https://tech4bizsolutions.com/case-studies/${caseStudySlug}`} />
+        <script type="application/ld+json">
+          {JSON.stringify(getCaseStudySchema(caseStudyData))}
+        </script>
+      </Helmet>
+      <main className="main-content">
+        <CaseStudyHero {...caseStudyData} />
+        <Navigation />
+        <HighlightsSection highlights={highlights} />
+        <Overview {...overview} />
+        <Challenges {...challenges} />
+        <SolutionSection {...solution} />
+        <BenefitsSection {...benefits} />
+        <ConclusionSection {...conclusion} />
+        <RelatedReading currentCaseStudyId={id} />
+        <TransformationCTA />
+      </main>
+    </ServiceErrorBoundary>
+  );
+};
+
+export default CaseStudyDetail;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/utils/getCaseStudySchema.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/utils/getCaseStudySchema.js
new file mode 100644
index 0000000..7de9e19
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/caseStudyDetailPage/utils/getCaseStudySchema.js
@@ -0,0 +1,34 @@
+/**
+ * Generates structured data (JSON‑LD) for the case study page.
+ *
+ * @param {Object} caseStudyData - The current case study data object.
+ * @returns {Object} The JSON‑LD structured data object.
+ */
+export const getCaseStudySchema = (caseStudyData) => {
+  const canonicalUrl = `https://tech4bizsolutions.com/case-studies/${caseStudyData.id}`;
+  
+  return {
+    "@context": "https://schema.org",
+    "@type": "Article", // You may also choose "TechArticle" or another relevant type
+    "mainEntityOfPage": {
+      "@type": "WebPage",
+      "@id": canonicalUrl
+    },
+    "headline": caseStudyData.title,
+    "description": caseStudyData.description,
+    "image": [caseStudyData.heroImage],
+    "author": {
+      "@type": "Organization",
+      "name": "Tech4biz Solutions"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "Tech4biz Solutions",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "/images/logos/logo-light.webp" 
+      }
+    },
+    "datePublished": caseStudyData.datePublished || new Date().toISOString()
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CapabilitiesSec/ServiceCardCapabilities.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CapabilitiesSec/ServiceCardCapabilities.jsx
new file mode 100644
index 0000000..4552f5b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CapabilitiesSec/ServiceCardCapabilities.jsx
@@ -0,0 +1,63 @@
+import { motion } from 'framer-motion';
+import { FiBarChart2, FiUsers, FiCpu } from 'react-icons/fi';
+import { PhoneIcon } from '@heroicons/react/24/outline';
+
+const iconMap = {
+  FiBarChart2: FiBarChart2,
+  FiUsers: FiUsers,
+  FiCpu: FiCpu,
+  PhoneIcon: PhoneIcon
+};
+
+const CapabilityCard = ({ icon: Icon, title, description }) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true }}
+    className="p-6 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300"
+  >
+    <Icon className="w-8 h-8 text-blue-600 mb-4" />
+    <h3 className="text-xl font-semibold mb-2">{title}</h3>
+    <p className="text-[#2d2d2d] text-sm">{description}</p>
+  </motion.div>
+);
+
+export default function ServiceCardCapabilities({ data }) {
+  return (
+    <section className="py-20 px-4 max-w-7xl mx-auto">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-16">
+        <motion.div
+          initial={{ opacity: 0, x: -20 }}
+          whileInView={{ opacity: 1, x: 0 }}
+          viewport={{ once: true }}
+          className="space-y-6"
+        >
+          <span className="text-[#2d2d2d] font-semibold">{data.label}</span>
+          <h2 className="text-4xl font-bold leading-tight">
+            {data.title}
+          </h2>
+          <p className="text-[#2d2d2d]">
+            {data.description}
+          </p>
+          <p className="text-[#2d2d2d]">
+            {data.additionalText}
+          </p>
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {data.cards.map((card, index) => {
+            const IconComponent = iconMap[card.icon];
+            return (
+              <CapabilityCard
+                key={index}
+                icon={IconComponent}
+                title={card.title}
+                description={card.description}
+              />
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CaseStudiesSec/ServicecardCaseStudies.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CaseStudiesSec/ServicecardCaseStudies.jsx
new file mode 100644
index 0000000..2fb119e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CaseStudiesSec/ServicecardCaseStudies.jsx
@@ -0,0 +1,149 @@
+import { motion } from 'framer-motion';
+import { useState, useRef } from 'react';
+import { FiArrowRight, FiExternalLink, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
+import useSlider from './useSlider';
+import  productImages  from "@pages/home/components/caseStudyShowcase/config/caseStudyCards.json";
+import { Link } from 'react-router-dom';
+
+const SectionHeader = ({ title }) => (
+  <motion.div
+    initial={{ opacity: 0, y: 20 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.6 }}
+    className="mb-12 text-left"
+  >
+    <h2 className="text-lg font-semibold text-[#2d2d2d] mb-2">Featured Work</h2>
+    <h3 className="text-2xl font-bold text-gray-900">{title}</h3>
+  </motion.div>
+);
+
+const CaseStudyCard = ({ path, title, description, caseStudySlug }) => {
+  const cardVariants = {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: 0.5, ease: 'easeOut' }
+    },
+    hover: {
+      y: -8,
+      transition: { duration: 0.3, ease: 'easeInOut' }
+    }
+  };
+
+  return (
+    <motion.div
+      variants={cardVariants}
+      initial="hidden"
+      whileInView="visible"
+      whileHover="hover"
+      viewport={{ once: true }}
+      className="bg-white rounded-xl overflow-hidden shadow-sm transition-all duration-300"
+      style={{ transformOrigin: 'center bottom' }}
+    >
+      <div className="relative overflow-hidden">
+        <motion.div
+          whileHover={{ scale: 1.05 }}
+          transition={{ duration: 0.4 }}
+          className="relative"
+        >
+          <img src={path} alt={title} className="w-full h-64 object-cover transition-transform duration-500" />
+          <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+            <motion.span
+              initial={{ opacity: 0 }}
+              whileHover={{ opacity: 1 }}
+              className="text-white font-medium flex items-center gap-2"
+            >
+              View Case Study <FiExternalLink className="w-4 h-4" />
+            </motion.span>
+          </div>
+        </motion.div>
+      </div>
+
+      <motion.div className="p-6">
+        <h3 className="text-xl font-semibold text-gray-900 mb-3">{title}</h3>
+        <p className="text-gray-600 text-sm leading-relaxed mb-4 line-clamp-3">{description}</p>
+        <Link to={`/case-studies/${caseStudySlug}`}>
+          <motion.button
+            whileHover={{ x: 5 }}
+            transition={{ type: 'spring', stiffness: 400 }}
+            className="inline-flex items-center gap-2 text-blue-500 font-medium text-sm hover:text-blue-600 transition-colors"
+          >
+            Explore Details
+            <FiArrowRight className="w-4 h-4 transition-transform" />
+          </motion.button>
+        </Link>
+      </motion.div>
+    </motion.div>
+  );
+};
+
+export default function ServiceCardCaseStudies() {
+  // Destructure to get the array of case study cards and (optionally) meta details
+  const { caseStudyCards, metaConfig } = productImages;
+  const sliderRef = useRef(null);
+  
+  const { 
+    currentSlide, 
+    slidesPerView, 
+    canSlidePrev, 
+    canSlideNext, 
+    slidePrev, 
+    slideNext,
+    isSlideEnabled 
+  } = useSlider(caseStudyCards.length);
+
+  return (
+    <motion.section
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      transition={{ duration: 0.8 }}
+      className="py-24 bg-gradient-to-b from-gray-50 to-white"
+    >
+      <div className="max-w-7xl mx-auto px-4">
+        <SectionHeader title={metaConfig.title} />
+        
+        <div className="relative overflow-hidden">
+          <div className="overflow-hidden" ref={sliderRef}>
+            <motion.div
+              className="flex transition-transform duration-500 ease-in-out"
+              animate={{
+                x: `calc(-${currentSlide * (100 / slidesPerView)}%)`
+              }}
+              transition={{ type: 'tween', ease: 'easeInOut', duration: 0.5 }}
+            >
+              {caseStudyCards.map((slide, index) => (
+                <div
+                  key={index}
+                  className="flex-shrink-0 px-3 md:px-3 sm:px-2"
+                  style={{ width: `calc(100% / ${slidesPerView})` }}
+                >
+                  <CaseStudyCard {...slide} />
+                </div>
+              ))}
+            </motion.div>
+          </div>
+
+          {isSlideEnabled && (
+            <div className="flex gap-3 mt-8 ml-6 animate-fadeIn">
+              <button
+                onClick={slidePrev}
+                disabled={!canSlidePrev}
+                className={`w-9 h-9 md:w-9 md:h-9 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center bg-white border border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-500 transition-all duration-300 ${!canSlidePrev ? 'opacity-40 cursor-not-allowed hover:border-gray-200 hover:text-gray-700' : ''}`}
+              >
+                <FiChevronLeft className="w-5 h-5 md:w-5 md:h-5 sm:w-4 sm:h-4" />
+              </button>
+              <button
+                onClick={slideNext}
+                disabled={!canSlideNext}
+                className={`w-9 h-9 md:w-9 md:h-9 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center bg-white border border-gray-200 text-gray-700 hover:border-purple-500 hover:text-purple-500 transition-all duration-300 ${!canSlideNext ? 'opacity-40 cursor-not-allowed hover:border-gray-200 hover:text-gray-700' : ''}`}
+              >
+                <FiChevronRight className="w-5 h-5 md:w-5 md:h-5 sm:w-4 sm:h-4" />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </motion.section>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CaseStudiesSec/useSlider.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CaseStudiesSec/useSlider.js
new file mode 100644
index 0000000..7937a85
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/CaseStudiesSec/useSlider.js
@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+
+const useSlider = (totalSlides) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [slidesPerView, setSlidesPerView] = useState(4);
+  const [isSlideEnabled, setIsSlideEnabled] = useState(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setSlidesPerView(1);
+      } else if (window.innerWidth < 1024) {
+        setSlidesPerView(2);
+      } else {
+        setSlidesPerView(4);
+      }
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  useEffect(() => {
+    // Check if sliding is possible based on total slides and slides per view
+    setIsSlideEnabled(totalSlides > slidesPerView);
+  }, [totalSlides, slidesPerView]);
+
+  const maxSlides = totalSlides - slidesPerView;
+  const canSlidePrev = currentSlide > 0;
+  const canSlideNext = currentSlide < maxSlides;
+
+  const slidePrev = () => {
+    if (canSlidePrev) {
+      setCurrentSlide(prev => prev - 1);
+    }
+  };
+
+  const slideNext = () => {
+    if (canSlideNext) {
+      setCurrentSlide(prev => prev + 1);
+    }
+  };
+
+  return {
+    currentSlide,
+    slidesPerView,
+    canSlidePrev,
+    canSlideNext,
+    slidePrev,
+    slideNext,
+    isSlideEnabled
+  };
+};
+
+export default useSlider; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/HeroSec/ServiceCardHero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/HeroSec/ServiceCardHero.jsx
new file mode 100644
index 0000000..47408e7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/HeroSec/ServiceCardHero.jsx
@@ -0,0 +1,101 @@
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import CRMModalForm from '@/components/modals/CRMModalForm';
+
+export default function ServiceCardHero({ data }) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const openModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+  };
+  return (
+    <section className="relative min-h-[600px] w-full overflow-hidden">
+      {/* Video Background */}
+      <div className="absolute inset-0 w-full h-full">
+        {data.videoPath && (
+          <video
+            className="absolute inset-0 w-full h-full object-cover z-0"
+            autoPlay
+            loop
+            muted
+            playsInline
+          >
+            <source 
+              src={data.videoPath.replace('@', '')} 
+              type="video/webm" 
+            />
+            Your browser does not support the video tag.
+          </video>
+        )}
+        {/* Overlay */}
+        <div 
+          className="absolute inset-0 z-1"
+          style={{
+            background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.8) 100%)'
+          }}
+        ></div>
+      </div>
+
+      {/* Content */}
+      <div className="relative z-10 mx-auto max-w-7xl px-4 py-20 sm:px-6 lg:px-8">
+        <div className="max-w-2xl relative z-20">
+          <motion.h1
+            className="mb-6 text-4xl font-bold leading-tight text-white sm:text-5xl lg:text-6xl"
+            style={{ textShadow: '0 2px 4px rgba(0, 0, 0, 0.3)' }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            {data.title}
+          </motion.h1>
+          
+          <motion.p
+            className="mb-8 text-lg text-gray-200 sm:text-xl"
+            style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.3)' }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            {data.description}
+          </motion.p>
+
+          {data.ctaText && (
+            <motion.button
+              onClick={() => openModal(true)}
+              className="group flex items-center rounded-md text-white px-6 py-3 text-base font-medium bg-gradient-to-r from-blue-500 to-blue-600 transition-all hover:bg-opacity-90"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.8, delay: 0.6 }}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              {data.ctaText}
+              <svg
+                className="ml-2 h-4 w-4 transform transition-transform group-hover:translate-x-1"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </motion.button>
+          )}
+        </div>
+      </div>
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={handleModalClose}
+        source="Landing page Banner" 
+      />
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/OverviewSec/ServiceCardOverview.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/OverviewSec/ServiceCardOverview.jsx
new file mode 100644
index 0000000..aed9e91
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/OverviewSec/ServiceCardOverview.jsx
@@ -0,0 +1,77 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+
+export default function ServiceCardOverview({ data }) {
+  if (!data) return null;
+
+  return (
+    <section className="bg-white py-16 sm:py-24">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid gap-12 lg:grid-cols-2 lg:gap-8 items-center">
+          <motion.div
+            className="flex flex-col"
+            initial={{ opacity: 0, x: -20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+          >
+            <h2 className="text-base font-semibold text-[#2d2d2d]">{data.label}</h2>
+            <h3 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{data.title}</h3>
+            
+            <div className="mt-6 space-y-6 text-gray-600">
+              {data.description.map((desc, index) => (
+                <p key={index}>{desc}</p>
+              ))}
+            </div>
+
+            <motion.button
+              className="group mt-8 flex items-center rounded-md bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-2 text-base font-medium text-white transition-all hover:bg-opacity-90 w-fit"
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+            >
+              <Link to='/contact'>
+              Contact us
+              </Link>
+              <svg
+                className="ml-2 h-4 w-4 transform transition-transform group-hover:translate-x-1"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
+              </svg>
+            </motion.button>
+          </motion.div>
+
+          {/* Image */}
+          <motion.div
+            className="relative overflow-hidden rounded-lg"
+            style={{ 
+              aspectRatio: '4/3',
+              maxHeight: '400px'
+            }}
+            initial={{ opacity: 0, x: 20 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8 }}
+            viewport={{ once: true }}
+          >
+            {data.image && (
+              <img
+                src={data.image}
+                alt={`${data.title} overview`}
+                className="h-full w-full object-cover"
+                style={{ aspectRatio: '4/3' }}
+                loading="lazy"
+              />
+            )}
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/ServiceSec/ServiceCardService.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/ServiceSec/ServiceCardService.jsx
new file mode 100644
index 0000000..1e7d797
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/ServiceSec/ServiceCardService.jsx
@@ -0,0 +1,73 @@
+import { motion } from 'framer-motion';
+import  services  from "@pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json";
+import { Link } from 'react-router-dom';
+
+export default function ServiceCardService() {
+  const data = services;
+  return (
+    <section className="bg-white py-16 sm:py-24">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="max-w-3xl"
+        >
+          <h2 className="text-base font-semibold text-[#2d2d2d]">{data.title}</h2>
+          <h3 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{data.subtitle}</h3>
+          <p className="mt-4 text-lg text-gray-600">{data.description}</p>
+          <p className="mt-4 text-lg font-semibold text-gray-900">{data.subheading}</p>
+        </motion.div>
+
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {data.slice(0, 4).map((service, index) => (
+            <motion.div
+              key={service.title}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: index * 0.1 }}
+              viewport={{ once: true }}
+              className="group relative overflow-hidden rounded-lg bg-gray-50 transition-all hover:bg-purple-50"
+            >
+              <div className="aspect-[16/9] relative">
+                <img
+                  src={service.image}
+                  alt={service.title}
+                  className="absolute inset-0 h-full w-full object-cover"
+                />
+              </div>
+              <div className="p-6">
+                <h4 className="text-xl font-semibold text-gray-900">{service.title}</h4>
+                <p className="mt-2 text-gray-600">
+                  {service.description.slice(0, 50)}...
+                </p>
+                <Link to={`/services/${service.slug}`}>
+                  <motion.div
+                    whileHover={{ x: 5 }}
+                    className="mt-4 flex items-center text-[#F97316]"
+                  >
+                    <span className="text-sm font-medium">Learn more</span>
+                    <svg
+                      className="ml-2 h-4 w-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </motion.div>
+                </Link>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/SolutionSec/ServiceCardSolution.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/SolutionSec/ServiceCardSolution.jsx
new file mode 100644
index 0000000..04fa58a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/SolutionSec/ServiceCardSolution.jsx
@@ -0,0 +1,63 @@
+import { motion } from 'framer-motion';
+import { FiTool, FiPackage, FiCpu, FiLayers, FiServer, FiShield } from 'react-icons/fi';
+
+// Map of icons to use based on card title or index
+const getIconForCard = (title, index) => {
+  // Convert title to lowercase for easier matching
+  const lowerTitle = title.toLowerCase();
+  
+  if (lowerTitle.includes('industrial') || lowerTitle.includes('parts')) return FiTool;
+  if (lowerTitle.includes('medical') || lowerTitle.includes('model')) return FiPackage;
+  if (lowerTitle.includes('consumer') || lowerTitle.includes('product')) return FiCpu;
+  if (lowerTitle.includes('prototype') || lowerTitle.includes('development')) return FiLayers;
+  if (lowerTitle.includes('production') || lowerTitle.includes('mass')) return FiServer;
+  if (lowerTitle.includes('design') || lowerTitle.includes('optimization')) return FiShield;
+  
+  // Fallback icons based on index if no match
+  const fallbackIcons = [FiTool, FiPackage, FiCpu, FiLayers, FiServer, FiShield];
+  return fallbackIcons[index % fallbackIcons.length];
+};
+
+export default function ServiceCardSolution({ data }) {
+  return (
+    <section className="bg-gray-50 py-16 sm:py-24">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          viewport={{ once: true }}
+          className="max-w-3xl"
+        >
+          <h2 className="text-base font-semibold text-[#2d2d2d]">{data.title}</h2>
+          <h3 className="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            {data.subtitle}
+          </h3>
+          <p className="mt-6 text-lg leading-8 text-gray-600">{data.description}</p>
+        </motion.div>
+
+        <div className="mt-20 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {data.cards.map((card, index) => {
+            const Icon = getIconForCard(card.title, index);
+            return (
+              <motion.div
+                key={index}
+                className="group relative rounded-lg bg-white p-6 shadow-sm transition-all hover:shadow-md"
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+                viewport={{ once: true }}
+              >
+                <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-md bg-blue-50 text-blue-600">
+                  <Icon className="h-6 w-6" />
+                </div>
+                <h4 className="text-xl font-semibold text-gray-900">{card.title}</h4>
+                <p className="mt-2 text-gray-600">{card.description}</p>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/StartegicApproach.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/StartegicApproach.jsx
new file mode 100644
index 0000000..28ed0fe
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/StartegicApproach.jsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+
+const StrategicApproachh = ({ data }) => {
+
+ 
+
+  const appData = data.startegicApproach || {};
+
+  // Animation Variants
+  const fadeIn = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
+  };
+
+  const staggerContainer = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  return (
+    <div className="relative w-full h-screen">
+      {/* Background Image with Overlay */}
+      <div className="absolute inset-0">
+        <img
+          src={appData.image}
+          alt="Hero background"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-black/50" />
+      </div>
+
+      <div className="max-w-6xl mx-auto px-10 relative h-screen">
+        {/* Content Container */}
+        <motion.div
+          className="relative h-full container mx-auto px-4"
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.3 }}
+        >
+          <div className="flex flex-col justify-center items-start h-full max-w-3xl">
+            {/* Main Content */}
+            <motion.h1
+              className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6"
+              variants={fadeIn}
+            >
+              {appData?.title || "Transform Your Digital Presence"}
+            </motion.h1>
+            <motion.p
+              className="text-lg md:text-xl text-white/90 mb-8"
+              variants={fadeIn}
+            >
+              {appData?.description || "We help businesses create meaningful digital experiences that engage customers and drive growth. Let's work together to bring your vision to life."}
+            </motion.p>
+
+            {/* CTA Button */}
+            <motion.button
+              className="group flex items-center space-x-3 bg-white text-black px-6 py-3 rounded-full hover:bg-white/90 transition-all duration-300"
+              variants={fadeIn}
+            >
+              <span className="text-lg font-medium">
+                <Link to='/contact'>Let's Talk</Link>
+              </span>
+              <div className="w-8 h-8 rounded-full bg-black flex items-center justify-center">
+                <ArrowRight className="w-4 h-4 text-white group-hover:translate-x-1 transition-transform duration-300" />
+              </div>
+            </motion.button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default StrategicApproachh;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/TransformationSec/ServiceCardTransformation.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/TransformationSec/ServiceCardTransformation.jsx
new file mode 100644
index 0000000..014f5eb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/components/TransformationSec/ServiceCardTransformation.jsx
@@ -0,0 +1,78 @@
+import { motion } from 'framer-motion';
+import { FiArrowRight } from 'react-icons/fi';
+import CRMModalForm from '@/components/modals/CRMModalForm';
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const CTAButton = ({ children, className = "", to }) => (
+  <Link
+    to={to}
+    className={`flex items-center gap-2 px-6 py-2 rounded-full border border-white/20 text-white hover:bg-white/10 transition-colors group ${className}`}
+  >
+    {children}
+    <FiArrowRight className="transition-transform group-hover:translate-x-1" />
+  </Link>
+);
+
+export default function ServiceCardTransformation({ data }) {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  
+  const openModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+  };
+ 
+  return (
+    <section className="bg-[#1a1a1a] py-20 px-4">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-8">
+          <div className="space-y-4">
+            <motion.h2
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className="text-4xl lg:text-5xl font-bold text-white"
+            >
+              {data.title}
+            </motion.h2>
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className="text-gray-400"
+            >
+              {data.subtitle}
+            </motion.p>
+            <p
+              className="w-[fit-content]"
+              onClick={() => openModal(true)}
+            >
+              <CTAButton className="mt-4">
+                {data.mainCTA}
+              </CTAButton>
+            </p>
+          </div>
+          
+          <div className="flex flex-col gap-4">
+            {data.buttons.map((buttonText, index) => (
+              <CTAButton 
+                key={index}
+                to={buttonText.link}
+              >
+                {buttonText.label}
+              </CTAButton>
+            ))}
+          </div>
+        </div>
+      </div>
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={handleModalClose}
+        source="Pcba Manufacturing page Newsletter Cta " 
+      />
+    </section>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/3dPrinting.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/3dPrinting.json
new file mode 100644
index 0000000..da59b3e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/3dPrinting.json
@@ -0,0 +1,135 @@
+{
+  "id": "3dPrinting",
+  "hero": {
+    "title": "Advanced 3D Printing Solutions",
+    "description": "Cutting-edge additive manufacturing services for rapid prototyping and production",
+    "ctaText": "Let's connect",
+    "videoPath": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/3DPrintingSolutions.webm"
+  },
+  "overview": {
+    "label": "Overview",
+    "title": "Comprehensive PCBA Manufacturing Services",
+    "description": [
+      "Our state-of-the-art PCBA manufacturing facility delivers high-quality, reliable circuit board assemblies for diverse applications.",
+      "We combine advanced automation with expert craftsmanship to ensure superior quality and consistency in every project."
+    ],
+    "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/3DPrintingSolutions.webp"
+  },
+  "capabilities": {
+    "label": "Our Capabilities",
+    "title": "Comprehensive 3D Printing Solutions",
+    "description": "State-of-the-art additive manufacturing capabilities",
+    "additionalText": "Multiple materials and finishing options available",
+    "cards": [
+      {
+        "icon": "FiBarChart2",
+        "title": "Rapid Prototyping",
+        "description": "Quick turnaround for prototype development"
+      },
+      {
+        "icon": "FiCpu",
+        "title": "Production Printing",
+        "description": "Scale manufacturing with consistent quality"
+      },
+      {
+        "icon": "FiUsers",
+        "title": "Design Support",
+        "description": "Expert design optimization for 3D printing"
+      },
+      {
+        "icon": "PhoneIcon",
+        "title": "Material Selection",
+        "description": "Wide range of materials and finishes"
+      }
+    ]
+  },
+  "solutions": {
+    "title": "Our Solutions",
+    "subtitle": "Innovative 3D Printing Solutions",
+    "description": "Customized solutions for various industries",
+    "cards": [
+      {
+        "title": "Industrial Parts",
+        "description": "Functional parts for industrial applications",
+        "hasLink": true
+      },
+      {
+        "title": "Medical Models",
+        "description": "Anatomical models and surgical guides",
+        "hasLink": true
+      },
+      {
+        "title": "Consumer Products",
+        "description": "Custom product development and manufacturing",
+        "hasLink": true
+      }
+    ]
+  },
+  "services": {
+    "title": "Services",
+    "subtitle": "Specialized 3D Printing Services",
+    "description": "Comprehensive additive manufacturing solutions",
+    "subheading": "Explore our services",
+    "items": [
+      {
+        "title": "FDM Printing",
+        "description": "High-strength functional parts",
+        "image": "/images/services/fdm-printing.jpg"
+      },
+      {
+        "title": "SLA Printing",
+        "description": "High-detail prototypes and models",
+        "image": "/images/services/sla-printing.jpg"
+      },
+      {
+        "title": "SLS Printing",
+        "description": "Functional parts for industrial applications",
+        "image": "/images/services/sls-printing.jpg"
+      },
+      {
+        "title": "FDM Printing",
+        "description": "High-strength functional parts",
+        "image": "/images/services/fdm-printing.jpg"
+      }
+    ]
+  },
+  "caseStudies": {
+    "title": "Case Studies",
+    "slides": [
+      {
+        "image": "/images/case-studies/3d-case1.jpg",
+        "title": "Automotive Parts",
+        "description": "Functional parts for automotive applications"
+      },
+      {
+        "image": "/images/case-studies/3d-case2.jpg",
+        "title": "Medical Devices",
+        "description": "Custom medical device prototypes"
+      },
+      {
+        "image": "/images/case-studies/3d-case3.jpg",
+        "title": "Consumer Products",
+        "description": "High-quality consumer products with advanced 3D printing"
+      },
+      {
+        "image": "/images/case-studies/3d-case4.jpg",
+        "title": "Automotive Parts",
+        "description": "Functional parts for automotive applications"
+      }
+    ]
+  },
+  "startegicApproach": {
+"title": "Strategic Vision: Advancing PCBA Manufacturing Excellence",
+  "subTitle": "Our strategic vision integrates cutting-edge technology and manufacturing expertise to deliver innovative, reliable, and scalable PCBA solutions that meet evolving industry demands.",      "image": "/images/services/man-architect-working-project-with-vr-glasses-new-technologies.avif",
+    "readMore": "Read more"
+  },
+  "transformation": {
+    "title": "Transform Your Manufacturing",
+    "subtitle": "Experience the future of manufacturing",
+    "mainCTA": "Start Your Project",
+    "buttons": [
+      { "label": "Who We are ", "link": "/about" },
+      { "label": "What we do", "link": "/services" }
+    ]
+  }
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/pcbaManufacturing.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/pcbaManufacturing.json
new file mode 100644
index 0000000..f4462fa
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/pcbaManufacturing.json
@@ -0,0 +1,136 @@
+{
+    "id": "pcbaManufacturing",
+    "hero": {
+      "title": "PCBA Manufacturing Solutions",
+      "description": "Advanced PCB assembly and manufacturing services with cutting-edge technology and expert precision",
+      "ctaText": "Connect with our experts",
+      "videoPath": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/PCBAManufacturingSolutions.webm"
+    },
+    "overview": {
+      "label": "Overview",
+      "title": "Next-Generation 3D Printing Services",
+      "description": [
+        "We offer industrial-grade 3D printing solutions using the latest additive manufacturing technologies.",
+        "From concept to production, we help bring your ideas to life with precision and efficiency."
+      ],
+      "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/PCBAManufacturingSolutions.webp"
+    },
+    "capabilities": {
+      "label": "Our Capabilities",
+      "title": "End-to-End PCBA Manufacturing Solutions",
+      "description": "Leveraging cutting-edge technology and industry expertise to deliver superior PCBA solutions",
+      "additionalText": "From prototype to production, we ensure quality at every step",
+      "cards": [
+        {
+          "icon": "FiBarChart2",
+          "title": "Surface Mount Technology",
+          "description": "Advanced SMT assembly with high-precision component placement"
+        },
+        {
+          "icon": "FiCpu",
+          "title": "Through-Hole Assembly",
+          "description": "Reliable through-hole component mounting and soldering"
+        },
+        {
+          "icon": "FiUsers",
+          "title": "Quality Assurance",
+          "description": "Rigorous testing and inspection protocols"
+        },
+        {
+          "icon": "PhoneIcon",
+          "title": "Technical Support",
+          "description": "24/7 expert technical assistance and consultation"
+        }
+      ]
+    },
+    "solutions": {
+      "title": "Our Solutions",
+      "subtitle": "Innovative PCBA Manufacturing Solutions",
+      "description": "Tailored solutions to meet your specific manufacturing requirements",
+      "cards": [
+        {
+          "title": "Prototype Development",
+          "description": "Rapid prototyping services for quick market validation",
+          "hasLink": true
+        },
+        {
+          "title": "Mass Production",
+          "description": "High-volume manufacturing with consistent quality",
+          "hasLink": true
+        },
+        {
+          "title": "Design Optimization",
+          "description": "DFM analysis and optimization services",
+          "hasLink": true
+        }
+      ]
+    },
+    "services": {
+      "title": "Services",
+      "subtitle": "Comprehensive Manufacturing Services",
+      "description": "End-to-end PCBA manufacturing solutions",
+      "subheading": "Explore our specialized services",
+      "items": [
+        {
+          "title": "SMT Assembly",
+          "description": "High-precision surface mount technology assembly",
+          "image": "/images/services/smt-assembly.jpg"
+        },
+        {
+          "title": "Quality Testing",
+          "description": "Comprehensive testing and validation services",
+          "image": "/images/services/quality-testing.jpg"
+        },
+        {
+          "title": "Packaging and Shipping",
+          "description": "Secure packaging and efficient shipping solutions",
+          "image": "/images/services/packaging-shipping.jpg"
+        },
+        {
+          "title": "Supply Chain Management",
+          "description": "Streamlined supply chain solutions for optimal logistics",
+          "image": "/images/services/supply-chain.jpg"
+        }
+      ]
+    },
+    "caseStudies": {
+      "title": "Case Studies",
+      "slides": [
+        {
+          "image": "/images/case-studies/pcba-case1.jpg",
+          "title": "Automotive Electronics",
+          "description": "Successfully delivered complex PCBA solutions for automotive applications"
+        },
+        {
+          "image": "/images/case-studies/pcba-case2.jpg",
+          "title": "Medical Devices",
+          "description": "High-reliability PCBA manufacturing for medical equipment"
+        },
+        {
+          "image": "/images/case-studies/pcba-case3.jpg",
+          "title": "Industrial IoT Solutions",
+          "description": "Large-scale PCBA manufacturing for industrial IoT devices with advanced connectivity features"
+        },
+        {
+          "image": "/images/case-studies/pcba-case4.jpg",
+          "title": "Consumer Electronics",
+          "description": "High-volume production of PCBAs for consumer electronic products with strict quality standards"
+        }
+      ]
+    },
+    "startegicApproach":{
+      "title": "Strategic Vision: Advancing PCBA Manufacturing Excellence",
+      "subTitle": "Our strategic vision integrates cutting-edge technology and manufacturing expertise to deliver innovative, reliable, and scalable PCBA solutions that meet evolving industry demands.",
+          "image": "/images/services/man-architect-working-project-with-vr-glasses-new-technologies.avif",
+      "readMore":"Read more"
+  },
+    "transformation": {
+      "title": "Transform Your Manufacturing",
+      "subtitle": "Partner with us for innovative PCBA solutions",
+      "mainCTA": "Start Your Project",
+     "buttons": [
+      { "label": "Who We are ", "link": "/about" },
+      { "label": "What we do", "link": "/services" }
+      ]
+    }
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/serviceCardDetailSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/serviceCardDetailSchema.json
new file mode 100644
index 0000000..7e431ce
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/serviceCardDetailSchema.json
@@ -0,0 +1,123 @@
+{
+    "@context": "https://schema.org",
+    "@type": "WebPage",
+    "name": "Tech4Biz Service Details",
+    "description": "Explore our comprehensive PCBA Manufacturing and Advanced 3D Printing Solutions, leveraging cutting-edge technology and expert precision.",
+    "url": "https://tech4bizsolutions.com/service-details",
+    "provider": {
+        "@type": "Organization",
+        "name": "Tech4Biz",
+        "url": "https://tech4bizsolutions.com"
+    },
+    "mainEntity": {
+        "@type": "ItemList",
+        "itemListElement": [
+            {
+                "@type": "Service",
+                "position": 1,
+                "name": "PCBA Manufacturing Solutions",
+                "url": "https://tech4bizsolutions.com/service-details/pcbaManufacturing",
+                "description": "Advanced PCB assembly and manufacturing services with cutting-edge technology and expert precision. We offer end-to-end PCBA manufacturing solutions, from prototype development to mass production, ensuring quality at every step.",
+                "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/PCBAManufacturingSolutions.webp",
+                "offers": {
+                    "@type": "AggregateOffer",
+                    "offers": [
+                        {
+                            "@type": "Offer",
+                            "name": "Surface Mount Technology",
+                            "description": "Advanced SMT assembly with high-precision component placement."
+                        },
+                        {
+                            "@type": "Offer",
+                            "name": "Through-Hole Assembly",
+                            "description": "Reliable through-hole component mounting and soldering."
+                        },
+                        {
+                            "@type": "Offer",
+                            "name": "Quality Assurance",
+                            "description": "Rigorous testing and inspection protocols."
+                        },
+                        {
+                            "@type": "Offer",
+                            "name": "Technical Support",
+                            "description": "24/7 expert technical assistance and consultation."
+                        }
+                    ]
+                }
+            },
+            {
+                "@type": "Service",
+                "position": 2,
+                "name": "Advanced 3D Printing Solutions",
+                "url": "https://tech4bizsolutions.com/service-details/3dPrinting",
+                "description": "Cutting-edge additive manufacturing services for rapid prototyping and production. Our state-of-the-art 3D printing capabilities include rapid prototyping, production printing, design support, and material selection.",
+                "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/3DPrintingSolutions.webp",
+                "offers": {
+                    "@type": "AggregateOffer",
+                    "offers": [
+                        {
+                            "@type": "Offer",
+                            "name": "Rapid Prototyping",
+                            "description": "Quick turnaround for prototype development."
+                        },
+                        {
+                            "@type": "Offer",
+                            "name": "Production Printing",
+                            "description": "Scale manufacturing with consistent quality."
+                        },
+                        {
+                            "@type": "Offer",
+                            "name": "Design Support",
+                            "description": "Expert design optimization for 3D printing."
+                        },
+                        {
+                            "@type": "Offer",
+                            "name": "Material Selection",
+                            "description": "Wide range of materials and finishes."
+                        }
+                    ]
+                }
+            }
+        ]
+    },
+    "breadcrumb": {
+        "@type": "BreadcrumbList",
+        "itemListElement": [
+            {
+                "@type": "ListItem",
+                "position": 1,
+                "name": "Home",
+                "item": "https://tech4bizsolutions.com"
+            },
+            {
+                "@type": "ListItem",
+                "position": 2,
+                "name": "Services",
+                "item": "https://tech4bizsolutions.com/services"
+            },
+            {
+                "@type": "ListItem",
+                "position": 3,
+                "name": "Service Details",
+                "item": "https://tech4bizsolutions.com/service-details"
+            }
+        ]
+    },
+    "about": [
+        {
+            "@type": "Thing",
+            "name": "Strategic Vision",
+            "description": "Our strategic vision integrates cutting-edge technology and manufacturing expertise to deliver innovative, reliable, and scalable PCBA and 3D Printing solutions that meet evolving industry demands."
+        },
+        {
+            "@type": "Thing",
+            "name": "Capabilities",
+            "description": "Comprehensive solutions and advanced technologies across PCBA Manufacturing and 3D Printing domains."
+        },
+        {
+            "@type": "Thing",
+            "name": "Benefits",
+            "description": "Delivering tangible value through innovative solutions, proven expertise, and exceptional quality standards."
+        }
+    ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/serviceConfig.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/serviceConfig.js
new file mode 100644
index 0000000..0f49b91
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/config/serviceConfig.js
@@ -0,0 +1,8 @@
+export const serviceConfig = {
+    baseImagePath: '/images/services/',
+    defaultCTA: 'Contact us',
+    routes: {
+      pcbaManufacturing: '/service-details/pcbaManufacturing',
+      threeDPrinting: '/service-details/3dPrinting'
+    }
+  };
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/hooks/useScrollAnimation.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/hooks/useScrollAnimation.js
new file mode 100644
index 0000000..a5b3e8d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/hooks/useScrollAnimation.js
@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { useAnimation } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+
+const useScrollAnimation = (threshold = 0.1) => {
+  const controls = useAnimation();
+  const [ref, inView] = useInView({
+    threshold,
+    triggerOnce: true,
+  });
+
+  useEffect(() => {
+    if (inView) {
+      controls.start({
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 0.5,
+          ease: "easeOut"
+        }
+      });
+    }
+  }, [controls, inView]);
+
+  // Default animation variants
+  const variants = {
+    hidden: {
+      opacity: 0,
+      y: 20
+    },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 0.5,
+        ease: "easeOut"
+      }
+    }
+  };
+
+  return {
+    ref,
+    controls,
+    variants,
+    inView
+  };
+};
+
+export default useScrollAnimation;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/hooks/useServiceData.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/hooks/useServiceData.js
new file mode 100644
index 0000000..8c4c025
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/hooks/useServiceData.js
@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+
+const useServiceData = () => {
+  const [serviceData, setServiceData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const { serviceId } = useParams();
+
+  useEffect(() => {
+    const fetchServiceData = async () => {
+      try {
+        setLoading(true);
+        // Dynamically import the JSON file based on serviceId
+        const data = await import(`../config/${serviceId}.json`);
+        setServiceData(data.default);
+        setError(null);
+      } catch (err) {
+        setError('Failed to load service data');
+        console.error('Error loading service data:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (serviceId) {
+      fetchServiceData();
+    }
+  }, [serviceId]);
+
+  return { serviceData, loading, error };
+};
+
+export default useServiceData;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/index.jsx
new file mode 100644
index 0000000..a328924
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/manufacturingSolutionsDetailPage/index.jsx
@@ -0,0 +1,107 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import ServiceCardHero from './components/HeroSec/ServiceCardHero';
+import ServiceCardOverview from './components/OverviewSec/ServiceCardOverview';
+import ServiceCardCapabilities from './components/CapabilitiesSec/ServiceCardCapabilities';
+import ServiceCardSolution from './components/SolutionSec/ServiceCardSolution';
+import ServiceCardService from './components/ServiceSec/ServiceCardService';
+import ServiceCardCaseStudies from './components/CaseStudiesSec/ServicecardCaseStudies';
+import ServiceCardTransformation from './components/TransformationSec/ServiceCardTransformation';
+import useServiceData from './hooks/useServiceData';
+import ScrollToTop from '@components/common/scroll/ScrollToTop';
+import ScrollToTopButton from '@components/common/scroll/ScrollToTopButton';
+import StrategicApproachh from './components/StartegicApproach';
+import serviceCardDetailSchema from './config/serviceCardDetailSchema.json';
+import { Helmet } from 'react-helmet-async';
+
+const ServiceDetails = () => {
+  const { serviceId } = useParams();
+  const { serviceData, loading, error } = useServiceData(serviceId);
+
+  // Find the specific service in the schema
+  const getServiceSchema = () => {
+    if (!serviceData) return serviceCardDetailSchema;
+    
+    // Find the matching service in the schema
+    const serviceEntity = serviceCardDetailSchema.mainEntity.itemListElement.find(
+      item => item.url.includes(serviceId)
+    );
+    
+    if (serviceEntity) {
+      return {
+        "@context": "https://schema.org",
+        "@type": "Service",
+        ...serviceEntity
+      };
+    }
+    
+    return serviceCardDetailSchema;
+  };
+
+  const currentSchema = getServiceSchema();
+
+  if (loading) {
+    return (
+      <div className="min-h-[60vh] flex items-center justify-center text-2xl text-gray-600">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-[60vh] flex items-center justify-center text-xl text-red-600">
+        {error}
+      </div>
+    );
+  }
+
+  if (!serviceData) {
+    return (
+      <div className="min-h-[60vh] flex items-center justify-center text-2xl text-gray-600">
+        Service not found
+      </div>
+    );
+  }
+
+  return (
+    <main className="w-full overflow-x-hidden">
+      <Helmet>
+        {/* Basic meta tags */}
+        <title>{`${serviceData.hero.title} | Tech4Biz Manufacturing Solutions`}</title>
+        <meta name="description" content={serviceData.hero.description} />
+        <meta name="keywords" content={`${serviceData.hero.title}, manufacturing solutions, Tech4Biz, ${serviceData.overview.title}`} />
+        
+        {/* Canonical Tag */}
+        <link 
+          rel="canonical" 
+          href={`https://tech4bizsolutions.com/service-details/${serviceId}`} 
+        />
+        
+        {/* Open Graph meta tags */}
+        <meta property="og:title" content={`${serviceData.hero.title} | Tech4Biz Manufacturing Solutions`} />
+        <meta property="og:description" content={serviceData.hero.description} />
+        <meta property="og:type" content="website" />
+        
+        {/* JSON-LD Schema */}
+        <script type="application/ld+json">
+          {JSON.stringify(currentSchema)}
+        </script>
+      </Helmet>
+      
+      <ScrollToTop />
+      <ScrollToTopButton />
+
+      <ServiceCardHero data={serviceData.hero} />
+      <ServiceCardOverview data={serviceData.overview} />
+      <ServiceCardCapabilities data={serviceData.capabilities} />
+      <ServiceCardSolution data={serviceData.solutions} />
+      <StrategicApproachh data={serviceData}/>
+      <ServiceCardService data={serviceData.services} />
+      <ServiceCardCaseStudies data={serviceData.caseStudies} />
+      <ServiceCardTransformation data={serviceData.transformation} />
+    </main>
+  );
+};
+
+export default ServiceDetails;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/content-section1.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/content-section1.jsx
new file mode 100644
index 0000000..ae58351
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/content-section1.jsx
@@ -0,0 +1,243 @@
+"use client"
+import { motion } from "framer-motion"
+import { FiShare2, FiPlus } from "react-icons/fi"
+import { FaFacebookF } from "react-icons/fa"
+import { FaXTwitter, FaPinterest, FaLinkedinIn } from "react-icons/fa6"
+
+const BlogContentSection = () => {
+  return (
+    <div className="max-w-screen-xl mx-auto px-4 md:px-8 py-8 md:py-12 flex flex-col md:flex-row gap-8">
+      {/* Left Sidebar - Fixed */}
+      <motion.div
+        className="md:w-[320px] md:sticky md:top-24 md:self-start"
+        initial={{ opacity: 0, x: -20 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        {/* Table of Contents */}
+        <div className="border border-gray-200 rounded-md p-5 mb-6">
+          <h3 className="text-lg font-medium mb-4">Table Of Content</h3>
+
+          <div className="space-y-4 text-gray-600">
+            <p className="font-medium">A Glimpse into the World of Luxury Real Estate</p>
+
+            <p className="text-sm">Unveiling the Epitome of Modern Living: The Grandview Estate</p>
+
+            <p className="text-sm">Designing Your Dream Oasis: A Guide to Curating Your Dream Home</p>
+
+            <p className="text-sm">Navigating the Luxury Property Market: Expert Tips for Discerning Buyers</p>
+
+            <p className="text-sm">A Glimpse into the Future: Emerging Trends in Luxury Living</p>
+          </div>
+        </div>
+
+        {/* Share Article */}
+        <div className="mb-6">
+          <p className="text-center font-medium mb-3">Share Article</p>
+          <div className="flex justify-center gap-3">
+            <button className="hover:opacity-80 transition-opacity">
+              <FaXTwitter size={20} />
+            </button>
+            <button className="hover:opacity-80 transition-opacity">
+              <FaPinterest size={20} />
+            </button>
+            <button className="hover:opacity-80 transition-opacity">
+              <FaFacebookF size={20} />
+            </button>
+            <button className="hover:opacity-80 transition-opacity">
+              <FaLinkedinIn size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* Newsletter Subscription */}
+        <div className="bg-gray-900 text-white rounded-md p-5">
+          <h3 className="text-lg font-medium mb-2 text-center">Subscribe to Our Newsletter</h3>
+          <p className="text-sm text-gray-300 mb-4 text-center">
+            Get the latest news and updates delivered straight to your inbox.
+          </p>
+
+          <div className="space-y-3">
+            <input type="email" placeholder="Enter Your Email" className="w-full px-4 py-2 rounded-md text-black" />
+            <button className="bg-white text-black px-4 py-2 rounded-md w-full hover:bg-gray-100 transition-colors">
+              Subscribe
+            </button>
+          </div>
+
+          <p className="text-xs text-gray-400 mt-3 text-center">We use your information only as described in this policy.</p>
+        </div>
+      </motion.div>
+
+      {/* Right Content Area - Scrollable */}
+      <motion.div
+        className="md:flex-1"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.2 }}
+      >
+        {/* Main Article Content */}
+        <div className="space-y-8">
+          <div>
+            <h1 className="text-3xl md:text-4xl font-medium text-gray-800 mb-4">
+              A Glimpse into the World of Luxury Real Estate
+            </h1>
+            <p className="text-gray-600 leading-relaxed">
+              The world of luxury real estate is an alluring realm where dreams take shape and aspirations find their
+              home. It's a symphony of exquisite designs, unparalleled amenities, and prime locations, all orchestrated
+              to create a lifestyle that surpasses expectations. Whether you seek a sprawling estate nestled amidst
+              rolling hills or a penthouse perched atop a bustling metropolis, the quest for the perfect luxury property
+              is an adventure in itself.
+            </p>
+          </div>
+
+          {/* Property Image */}
+          <div className="relative">
+            <img
+              src="/images/banners/Img-2.webp"
+              alt="The Grand Reserve Luxury Estate"
+              className="w-full h-auto rounded-md object-cover"
+            />
+          </div>
+
+          {/* Grandview Estate Section */}
+          <div>
+            <h2 className="text-2xl md:text-3xl font-medium text-gray-800 mb-4">
+              Unveiling the Epitome of Modern Living: The Grandview Estate
+            </h2>
+            <p className="text-gray-600 leading-relaxed mb-6">
+              Nestled amidst the picturesque landscape of California, The Grandview Estate stands as a testament to
+              modern luxury living. With its breathtaking panoramic views, expansive living spaces, and state-of-the-art
+              amenities, this masterpiece of design redefines the concept of opulence. From the moment you step through
+              the grand entrance, you're enveloped in an atmosphere of refined elegance, where every detail exudes
+              sophistication.
+            </p>
+
+            <h3 className="text-xl font-medium text-gray-800 mb-3">Key Features:</h3>
+            <ul className="list-disc pl-6 text-gray-600 space-y-2">
+              <li>A private resort-style pool and spa complex</li>
+              <li>Smart home technology for seamless living</li>
+              <li>Unparalleled security and privacy</li>
+              <li>Breathtaking panoramic views of the California coastline</li>
+              <li>Expansive living areas adorned with exquisite finishes</li>
+            </ul>
+          </div>
+
+          {/* Dream Oasis Section */}
+          <div className="pt-8">
+            <h2 className="text-2xl md:text-3xl font-medium text-gray-800 mb-4">
+              Designing Your Dream Oasis: A Guide to Curating Your Dream Home
+            </h2>
+            <p className="text-gray-600 leading-relaxed mb-6">
+              Crafting your dream home is an art form, a fusion of personal style and functional living. Whether you're
+              starting from scratch or revamping an existing space, the journey of creating your dream oasis is an
+              exciting one. Here are some key steps to guide you:
+            </p>
+
+            <ol className="list-decimal pl-6 text-gray-600 space-y-3 mb-6">
+              <li>
+                <span className="font-medium">Define Your Vision:</span> Envision the lifestyle you desire and the
+                elements that bring you joy.
+              </li>
+              <li>
+                <span className="font-medium">Seek Inspiration:</span> Explore design magazines, visit showrooms, and
+                draw inspiration from nature.
+              </li>
+              <li>
+                <span className="font-medium">Collaborate with Experts:</span> Engage the expertise of interior
+                designers and architects to bring your vision to life.
+              </li>
+              <li>
+                <span className="font-medium">Embrace Sustainable Practices:</span> Incorporate eco-friendly materials
+                and sustainable practices into your design.
+              </li>
+              <li>
+                <span className="font-medium">Prioritize Personalization:</span> Infuse your home with unique touches
+                that reflect your personality and interests.
+              </li>
+            </ol>
+
+            {/* Interior Design Images */}
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
+              <img
+                src="/images/banners/Img-1.webp"
+                alt="Luxury Bedroom Design"
+                className="w-full h-60 object-cover rounded-md"
+              />
+              <img src="/images/banners/Img-4.webp" alt="Luxury Living Room" className="w-full h-60 object-cover rounded-md" />
+            </div>
+          </div>
+
+          {/* Luxury Property Market Section */}
+          <div className="pt-4">
+            <h2 className="text-2xl md:text-3xl font-medium text-gray-800 mb-4">
+              Navigating the Luxury Property Market: Expert Tips for Discerning Buyers
+            </h2>
+            <p className="text-gray-600 leading-relaxed mb-6">
+              Venturing into the luxury property market requires careful consideration and a discerning eye. Here are
+              some expert tips to guide your search:
+            </p>
+
+            <ol className="list-decimal pl-6 text-gray-600 space-y-3">
+              <li>
+                <span className="font-medium">Define Your Budget:</span> Establish a clear budget that aligns with your
+                financial goals.
+              </li>
+              <li>
+                <span className="font-medium">Enlist a Reputable Agent:</span> Partner with an experienced real estate
+                agent who specializes in luxury properties.
+              </li>
+              <li>
+                <span className="font-medium">Understand Market Trends:</span> Stay informed about current market trends
+                and emerging neighborhoods.
+              </li>
+              <li>
+                <span className="font-medium">Prioritize Location and Amenities:</span> Consider the lifestyle you
+                desire and the amenities that enhance it.
+              </li>
+              <li>
+                <span className="font-medium">Schedule Thorough Inspections:</span> Ensure the property undergoes
+                thorough inspections to identify any potential issues.
+              </li>
+            </ol>
+          </div>
+
+                    {/* Luxury Property Market Section */}
+                    <div className="pt-4">
+            <h2 className="text-2xl md:text-3xl font-medium text-gray-800 mb-4">
+              Navigating the Luxury Property Market: Expert Tips for Discerning Buyers
+            </h2>
+            <p className="text-gray-600 leading-relaxed mb-6">
+              Venturing into the luxury property market requires careful consideration and a discerning eye. Here are
+              some expert tips to guide your search:
+            </p>
+
+            <ol className="list-decimal pl-6 text-gray-600 space-y-3">
+              <li>
+                <span className="font-medium">Define Your Budget:</span> Establish a clear budget that aligns with your
+                financial goals.
+              </li>
+              <li>
+                <span className="font-medium">Enlist a Reputable Agent:</span> Partner with an experienced real estate
+                agent who specializes in luxury properties.
+              </li>
+              <li>
+                <span className="font-medium">Understand Market Trends:</span> Stay informed about current market trends
+                and emerging neighborhoods.
+              </li>
+              <li>
+                <span className="font-medium">Prioritize Location and Amenities:</span> Consider the lifestyle you
+                desire and the amenities that enhance it.
+              </li>
+              <li>
+                <span className="font-medium">Schedule Thorough Inspections:</span> Ensure the property undergoes
+                thorough inspections to identify any potential issues.
+              </li>
+            </ol>
+          </div>
+        </div>
+      </motion.div>
+    </div>
+  )
+}
+
+export default BlogContentSection
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/cta.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/cta.jsx
new file mode 100644
index 0000000..c2199c3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/cta.jsx
@@ -0,0 +1,101 @@
+"use client"
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { FaXTwitter, FaInstagram, FaFacebook, FaLinkedin } from "react-icons/fa6"
+
+const NewsletterCTA = () => {
+  const [email, setEmail] = useState("");
+  
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle subscription logic here
+    console.log("Subscribing email:", email);
+    setEmail("");
+  };
+
+  return (
+    <motion.div
+      className="bg-[#222222] text-white py-16"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.3 }}
+    >
+      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-12 px-4">
+        <div className="md:w-1/2 w-full flex flex-col items-center md:items-start">
+          <h2 className="text-4xl font-bold mb-6 text-center md:text-left">
+            Ready to Get
+            <br />
+            Our New Stuff?
+          </h2>
+          <div className="w-full max-w-md">
+            <form onSubmit={handleSubmit}>
+              <div className="flex flex-col sm:flex-row items-center gap-3">
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Your email address"
+                  className="w-full py-3 px-4 bg-white text-gray-800 rounded-md border-0 focus:ring-2 focus:ring-[#2563EB] outline-none transition-all"
+                  required
+                />
+                <motion.button
+                  type="submit"
+                  className="w-full sm:w-auto bg-[#2563EB] text-white font-medium py-3 px-6 rounded-md transition-colors duration-200 hover:bg-[#1d4ed8]"
+                  whileHover={{ y: -2 }}
+                  whileTap={{ y: 1 }}
+                >
+                  Subscribe
+                </motion.button>
+              </div>
+              <p className="mt-2 text-sm text-gray-400 text-center md:text-left">
+                We respect your privacy. Unsubscribe at any time.
+              </p>
+            </form>
+          </div>
+        </div>
+        <div className="md:w-1/2 w-full mt-8 md:mt-0 flex flex-col items-center md:items-start">
+          <div className="flex justify-end mb-2">
+            <div className="flex space-x-2">
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaXTwitter className="w-5 h-5" />
+              </motion.a>
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaInstagram className="w-5 h-5" />
+              </motion.a>
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaFacebook className="w-5 h-5" />
+              </motion.a>
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaLinkedin className="w-5 h-5" />
+              </motion.a>
+            </div>
+          </div>
+
+          <h3 className="text-lg font-semibold mb-2">Stuffus for Homes and Needs</h3>
+          <p className="text-gray-300">
+            We'll listen to your needs, identify the best approach, and then create a bespoke smart EV charging solution
+            that's right for you.
+          </p>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
+
+export default NewsletterCTA
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/herosection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/herosection.jsx
new file mode 100644
index 0000000..131abcd
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/components/herosection.jsx
@@ -0,0 +1,73 @@
+"use client"
+import { motion } from "framer-motion"
+
+const HeroSection = () => {
+  return (
+    <motion.div
+      className="relative w-full bg-gray-50 py-16 md:py-24"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.8 }}
+    >
+      <div className="max-w-6xl mx-auto px-6 md:px-12 lg:px-16">
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          {/* Main heading and subtitle */}
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-2">
+            News and insights
+          </h1>
+          <p className="text-2xl md:text-3xl lg:text-4xl text-gray-500 font-normal">
+            from our experts
+          </p>
+          
+          {/* Article title */}
+          <motion.h2 
+            className="text-2xl md:text-3xl font-semibold text-gray-800 mt-16 md:mt-20 max-w-3xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.6 }}
+          >
+            Sophia Mesabhi from Untitled Ventures
+          </motion.h2>
+
+          {/* Article metadata */}
+          <motion.div 
+            className="mt-4 flex flex-col md:flex-row md:items-center gap-4 md:gap-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.6, duration: 0.6 }}
+          >
+            <div className="text-sm md:text-base text-gray-600">
+              <span className="mr-1">Published on</span>
+              <span className="font-medium">10 April 2025</span>
+            </div>
+            
+            <div className="text-sm md:text-base text-gray-600 flex items-center">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span>12 min read</span>
+            </div>
+          </motion.div>
+
+          {/* Tags */}
+          <motion.div 
+            className="flex flex-wrap gap-2 mt-4 md:mt-6"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 0.6 }}
+          >
+            <span className="px-4 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-800">Design</span>
+            <span className="px-4 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-800">Retail</span>
+            <span className="px-4 py-1.5 text-xs font-medium rounded-full bg-gray-100 text-gray-800">Interviews</span>
+          </motion.div>
+        </motion.div>
+      </div>
+    </motion.div>
+  )
+}
+
+export default HeroSection
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/index.jsx
new file mode 100644
index 0000000..d8f85c3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/newsandblogdetailpage/index.jsx
@@ -0,0 +1,13 @@
+import HeroSection from "./components/herosection";
+import ContentSection1 from "./components/content-section1"
+import CTA from "./components/cta"
+
+export default function NewsAndBlogsDetailPage() {
+    return (
+      <>
+        <HeroSection />
+        <ContentSection1 />
+        <CTA />
+      </>
+    );
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Benefits.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Benefits.jsx
new file mode 100644
index 0000000..ad00c88
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Benefits.jsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { motion } from 'framer-motion';
+const BenefitCard = ({ title, description, index }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className={`relative group p-6 mt-4 bg-[#f3f4f65b] rounded-2xl transform transition-all duration-300
+        hover:shadow-xl hover:-translate-y-1 ${
+          index % 2 === 0 ? 'lg:translate-y-8' : ''
+        }`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Decorative Background Element */}
+      <div 
+        className={`absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-50 
+          rounded-2xl transition-opacity duration-300 ${
+            isHovered ? 'opacity-100' : 'opacity-0'
+          }`}
+      />
+      
+      {/* Content */}
+      <div className="relative z-10">
+        <div className="w-12 h-12 mb-4 bg-blue-100 rounded-xl flex items-center justify-center">
+          <span className="text-blue-600 font-bold text-xl">{(index + 1).toString().padStart(2, '0')}</span>
+        </div>
+        <h5 className="text-xl font-medium text-gray-900 mb-3">{title}</h5>
+        <p className="text-gray-600 leading-relaxed">{description}</p>
+      </div>
+    </div>
+  );
+};
+
+const Benefits = ({ data }) => {
+  const { slug } = useParams(); // Extract slug from the URL
+  const benefitData = data?.find((item) => item.slug === slug) || [];
+  return (
+    <div className="min-h-screen bg-white py-20">
+      <div className="container mx-auto px-4">
+        {/* Header Section */}
+        <div className="max-w-6xl mx-auto text-left mb-16">
+          <h4 className="text-4xl font-medium text-gray-900 mb-6">
+            {benefitData.benefits.title}
+          </h4>
+          <p className="text-xl text-gray-600">
+          {benefitData.benefits.subTitle}
+          </p>
+        </div>
+
+        {/* Benefits Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
+          {benefitData.benefits?.content?.map((benefit, index) => (
+            <BenefitCard
+              key={index}
+              index={index}
+              title={benefit.title}
+              description={benefit.description}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* Decorative Elements */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute top-10 left-10 w-64 h-64 bg-blue-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob" />
+        <div className="absolute top-10 right-10 w-64 h-64 bg-purple-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000" />
+        <div className="absolute bottom-10 left-20 w-64 h-64 bg-pink-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000" />
+      </div>
+    </div>
+  );
+};
+
+export default Benefits;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Capabilities.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Capabilities.jsx
new file mode 100644
index 0000000..07e31f3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Capabilities.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { 
+    Laptop, 
+    Smartphone, 
+    Lock, 
+    Cloud, 
+    Code, 
+    Settings ,
+    Monitor, Edit, Grid, Clock, Flag , Lightbulb,Layers, Box, ShieldCheck, FastForward, Package, Globe
+} from 'lucide-react';
+
+const InfoSection = ({ data }) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {data.map((item, index) => (
+        <div key={index} className="flex flex-col items-start p-6 bg-white rounded-lg shadow-md">
+          <div className="p-3 bg-blue-100 rounded-full">
+            {item.icon && <item.icon className="w-6 h-6 text-blue-600" />}
+          </div>
+          <h3 className="mt-4 text-xl font-semibold">{item.title}</h3>
+          <p className="mt-2 text-gray-600">{item.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const Capabilities = () => {
+  const capabilities = [
+    {
+      icon: Layers,
+      title: "Layer Management",
+      description: "Advanced PCB layer management for complex EV designs"
+    },
+    {
+      icon: Box,
+      title: "Component Design",
+      description: "Precision component design for EV circuit boards"
+    },
+    {
+      icon: ShieldCheck,
+      title: "Safety Standards",
+      description: "Compliance with automotive safety standards"
+    },
+    {
+      icon: FastForward,
+      title: "Performance",
+      description: "Optimized performance for EV applications"
+    },
+    {
+      icon: Package,
+      title: "Package Design",
+      description: "Efficient package design for thermal management"
+    },
+    {
+      icon: Globe,
+      title: "Global Standards",
+      description: "Adherence to international EV standards"
+    }
+  ];
+
+  return (
+    <div className="py-16 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center">
+          <h2 className="text-3xl font-bold text-gray-900">
+            Our PCB Design Capabilities
+          </h2>
+          <p className="mt-4 text-xl text-gray-600">
+            Comprehensive solutions for electric vehicle PCB design
+          </p>
+        </div>
+        <div className="mt-12">
+          <InfoSection data={capabilities} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Capabilities;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/CaseStudies.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/CaseStudies.jsx
new file mode 100644
index 0000000..71a9fce
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/CaseStudies.jsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight } from 'lucide-react';
+import  productImages  from "@pages/home/components/caseStudyShowcase/config/caseStudyCards.json";
+import { Link } from "react-router-dom";
+
+const CaseStudies = () => {
+  const data = productImages.caseStudyCards.slice(1, 7);
+
+  return (
+    <div className="w-full bg-white">
+      {/* Desktop Layout */}
+      <div className="hidden lg:flex flex-row h-screen w-screen overflow-hidden">
+        {data.slice(1, 5).map((card, index) => (
+          <motion.div 
+            key={index}
+            className="flex-1 h-full group relative overflow-hidden cursor-pointer"
+            whileHover={{ flex: 1.5 }}
+            transition={{ duration: 0.8, ease: "easeOut" }}
+          >
+            <motion.div 
+              className="absolute inset-0"
+              whileHover={{ scale: 1.0 }}
+              transition={{ duration: 0.8 }}
+            >
+              <img
+                src={card.path}
+                alt={card.title}
+                className="w-full h-full object-cover"
+              />
+            </motion.div>
+            <Link to={`/case-studies/${card.caseStudySlug}`}>
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
+                <div className="absolute bottom-0 left-0 right-0 p-8 transform group-hover:translate-y-0 transition-transform duration-300">
+                  <h4 className="text-white text-2xl font-medium mb-4">{card.title}</h4>
+                  <p className="text-white/90 mb-6 line-clamp-3">{card.description}</p>
+                  <motion.button className="group flex items-center space-x-3 bg-white text-black px-6 py-3 rounded-full hover:bg-white/90 transition-all duration-300">
+                    <span className="text-lg font-medium">View Details</span>
+                    <div className="w-8 h-8 rounded-full bg-black flex items-center justify-center">
+                      <ArrowRight className="w-4 h-4 text-white group-hover:translate-x-1 transition-transform duration-300" />
+                    </div>
+                  </motion.button>
+                </div>
+              </div>
+            </Link>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Mobile/Tablet Layout */}
+      <div className="lg:hidden grid grid-cols-1 md:grid-cols-2">
+        {data.slice(3, 7).map((card, index) => (
+          <motion.div
+            key={index}
+            className="relative aspect-video"
+            whileHover={{ y: -8 }}
+            transition={{ duration: 0.3 }}
+          >
+            <motion.div 
+              className="absolute inset-0"
+              whileHover={{ scale: 1.05 }}
+              transition={{ duration: 0.3 }}
+            >
+              <img
+                src={card.path}
+                alt={card.title}
+                className="w-full h-full object-cover"
+              />
+            </motion.div>
+            <Link to={`/case-studies/${card.caseStudySlug}`}>
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent">
+                <div className="absolute bottom-0 left-0 right-0 p-4 md:p-6">
+                  <h3 className="text-white text-xl md:text-2xl font-bold mb-2">{card.title}</h3>
+                  <p className="text-white/90 text-sm md:text-base mb-4 line-clamp-2">{card.description}</p>
+                  <motion.button className="group flex items-center space-x-3 bg-white text-black px-6 py-3 rounded-full hover:bg-white/90 transition-all duration-300">
+                    <span className="text-lg font-medium">Let's Talk</span>
+                    <div className="w-8 h-8 rounded-full bg-black flex items-center justify-center">
+                      <ArrowRight className="w-4 h-4 text-white group-hover:translate-x-1 transition-transform duration-300" />
+                    </div>
+                  </motion.button>
+                </div>
+              </div>
+            </Link>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CaseStudies;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Hero.jsx
new file mode 100644
index 0000000..c040b49
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Hero.jsx
@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom";
+import CRMModalForm from "@/components/modals/CRMModalForm";
+
+const Hero = ({ data, slug }) => {
+   const [isModalVisible, setIsModalVisible] = useState(false);
+        
+      const openModal = ()=>{
+    setIsModalVisible(true);
+      }
+    
+      const handleModalClose = () => {
+        setIsModalVisible(false);
+      };
+  // Find the banner data based on the slug
+  const filteredData = data.find((item) => item.slug === slug);
+  const banner = filteredData?.banner || {}; 
+
+  // Animation Variants
+  const fadeIn = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
+  };
+
+  const staggerContainer = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  return (
+    <>
+    <div className="ser-banner-sec bg-black text-white">
+      {/* Video Background */}
+      <div className="relative w-full h-[850px] overflow-hidden">
+        <video
+          className="absolute top-0 left-0 w-full h-full object-cover"
+          src={banner?.path}
+          autoPlay
+          loop
+          muted
+        />
+        <div className="absolute top-0 left-0 w-full h-full bg-black/60" />
+
+        {/* Content Section */}
+        <motion.div
+          className="absolute inset-0 max-w-6xl mx-auto py-12 md:px-12 mt-10 flex flex-col justify-start items-start text-left px-6"
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.3 }}
+        >
+          <motion.h4
+            className="text-sm font-light text-white mb-4"
+            variants={fadeIn}
+          >
+            {`${banner.breadcrumb?.title || ""} / ${
+              banner.breadcrumb?.subTiltle || ""
+            }`}
+          </motion.h4>
+          <motion.hr
+            className="mb-4 w-full border-t border-white/30"
+            variants={fadeIn}
+          />
+          <motion.h1
+            className="text-4xl md:text-4xl font-bold mb-6"
+            variants={fadeIn}
+          >
+            {banner?.title || ""}
+          </motion.h1>
+          <motion.p className="text-lg md:text-xl mb-8" variants={fadeIn}>
+            {banner.description || ""}
+          </motion.p>
+          <motion.button
+            className="flex items-center gap-2 px-0 py-3"
+            variants={fadeIn}
+            onClick={() => openModal(true)}
+          >
+            <span className="text-white">
+              <Link to='#'  >Let’s Talk</Link>
+            </span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-10 w-10 rounded-3xl p-2 shadow-md bg-white text-black hover:bg-gray-100"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2"
+                d="M13 7l5 5m0 0l-5 5m5-5H6"
+              />
+            </svg>
+          </motion.button>
+        </motion.div>
+      </div>
+     
+    </div>
+     <CRMModalForm
+     isVisible={isModalVisible}
+     onClose={handleModalClose}
+     source="Serivces Page Banner" 
+   />
+    </>
+  );
+};
+
+export default Hero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/NewsLetter.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/NewsLetter.jsx
new file mode 100644
index 0000000..d0d5f3c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/NewsLetter.jsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useFormHandler } from '../utils/subscription';
+import { notification } from 'antd';
+import { subscribeToNewsletter } from '@/utils/newsletterApi';
+
+const Newsletter = () => {
+  const located = "Services Page Newsletter"; // Example located prop
+
+  const { email, error, handleInputChange, submitForm, resetForm } = useFormHandler({
+    located,
+    handleSubmit: subscribeToNewsletter,
+  });
+
+  return (
+    <div className="w-full bg-gradient-to-br from-gray-50 via-gray-50 to-gray-100 py-24">
+      <motion.div 
+        className="container mx-auto px-4 lg:px-8 max-w-7xl"
+        initial={{ opacity: 0, y: 50 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+      >
+        <div className="flex flex-col lg:flex-row items-center">
+          {/* Content Section - Now using full width */}
+          <motion.div 
+            className="w-full space-y-8"
+            initial={{ opacity: 0, x: -50 }}
+            whileInView={{ opacity: 1, x: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6, delay: 0.2 }}
+          >
+            <div className="space-y-4">
+              <span className="inline-block px-4 py-1 bg-[#F97316] text-white rounded-full text-sm font-semibold tracking-wide">
+                Newsletter
+              </span>
+              <h2 className="text-4xl lg:text-5xl font-bold text-gray-900 leading-tight">
+                Stay Ahead with Our Weekly Updates
+              </h2>
+              <p className="text-lg text-gray-600">
+                Get the latest updates, news, and special offers sent straight to your inbox. 
+                Join our community of over 10,000+ happy subscribers today.
+              </p>
+            </div>
+
+            <div className="space-y-4 w-full md:w-1/2">
+              <div className="flex flex-col sm:flex-row gap-3">
+                <input 
+                  type="email" 
+                  placeholder="Enter your email address"
+                  value={email}
+                  onChange={handleInputChange}
+                  className="flex-1 px-6 py-4 rounded-xl border-2 border-gray-200 focus:outline-none focus:border-gray-200 text-gray-800 placeholder-gray-400"
+                />
+                <motion.button 
+                  className="px-8 py-4 bg-[#F97316] text-white font-semibold rounded-xl hover:bg-[#F97316] transform transition-all duration-300 shadow-lg hover:shadow-xl"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                  onClick={submitForm}
+                >
+                  Subscribe Now
+                </motion.button>
+              </div>
+              {error && (
+                <p className="text-red-500 text-sm">{error}</p>
+              )}
+              <p className="text-sm text-gray-500">
+                By subscribing, you agree to our{' '}
+                <a href="#" className="text-[#F97316] hover:text-[#F97316] font-medium underline decoration-2 underline-offset-2">
+                  Privacy Policy
+                </a>
+              </p>
+            </div>
+          </motion.div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Newsletter;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/OurApproach.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/OurApproach.jsx
new file mode 100644
index 0000000..4e94475
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/OurApproach.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const OurApproach = ({ data }) => {
+  const { slug } = useParams(); // Extract slug from the URL
+  const approachData = data.find((approach) => approach.slug === slug) || {};
+
+  const approach = approachData.approach || {};
+
+  return (
+    <div className=""
+      style={{ background: "#1F2937" }}
+    >
+      <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-24 px-4 md:px-12 py-12">
+        <h4 className="text-3xl text-white font-medium text-left mb-8">{approach.title}</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {approach?.content.length > 0 && approach?.content.map((item, index) => (
+            <div
+              key={index}
+              className="overflow-hidden flex flex-col justify-center items-center md:justify-start md:items-start"
+            >
+              <div className="img flex justify-center items-center md:justify-start md:items-start w-full">
+                <img
+                  style={{ filter: 'invert(1)' }}
+                  src={item.image}
+                  alt={item.title}
+                  className="w-100 h-32 object-contain"
+                />
+              </div>
+              <div className="py-6 px-0 text-white text-center md:text-left">
+                <h3 className="text-xl font-light mb-2">{item.title}</h3>
+                <p className="text-gray-400">{item.description}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OurApproach;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/ServiceInfo.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/ServiceInfo.jsx
new file mode 100644
index 0000000..2ed9dcd
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/ServiceInfo.jsx
@@ -0,0 +1,150 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronDown } from 'lucide-react';
+import { softwareData } from "../config/data";
+
+const ServiceInfo = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [isSticky, setIsSticky] = useState(false);
+  const [isMobileSelectOpen, setIsMobileSelectOpen] = useState(false);
+  const sectionRefs = useRef([]);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const element = document.getElementById('tabs-header');
+      if (element) {
+        const rect = element.getBoundingClientRect();
+        setIsSticky(rect.top <= 0);
+      }
+
+      const scrollPosition = window.scrollY + 100;
+      sectionRefs.current.forEach((ref, index) => {
+        if (ref && ref.offsetTop <= scrollPosition && 
+            ref.offsetTop + ref.offsetHeight > scrollPosition) {
+          setActiveTab(index);
+        }
+      });
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  const scrollToSection = (index) => {
+    setIsMobileSelectOpen(false);
+    const sectionRef = sectionRefs.current[index];
+    if (sectionRef) {
+      const offset = isSticky ? 80 : 0;
+      window.scrollTo({
+        top: sectionRef.offsetTop - offset,
+        behavior: 'smooth'
+      });
+    }
+    setActiveTab(index);
+  };
+
+  return (
+    <div className='bg-black' 
+    style={{background:"#fff"}}
+    >
+    <div className="min-h-screen">
+      <div 
+        id="tabs-header"
+        className={` transition-shadow duration-300 ${
+          isSticky ? 'sticky top-0 ' : ''
+        }`}
+      >
+        <div className=" max-w-6xl mx-auto px-10 relative pt-24 md:pt-24 sm:pt-12 xs:pt-14 max-xs:pt-16">
+       {/* Desktop Tabs */}
+       <div className="hidden md:flex w-11/12 justify-center gap-4 bg-white shadow-md z-50 overflow-x-auto no-scrollbar absolute top-16 py-3">
+  {softwareData.map((service, index) => (
+    <button
+      key={service.id}
+      className={`px-6 py-1 text-sm  font-light whitespace-nowrap border-2 rounded-full transition-all ${
+        activeTab === index 
+          ? 'bg-[#2563EB] text-[#fff] border-[#2563EB]' 
+          : 'bg-transparent text-[#161616] border-transparent hover:text-[#fff] hover:bg-[#5389ff]'
+      }`}
+      onClick={() => scrollToSection(index)}
+    >
+      {service.title}
+    </button>
+  ))}
+</div>
+
+
+{/* Mobile Select */}
+<div className="relative md:hidden py-2">
+  <button
+    onClick={() => setIsMobileSelectOpen(!isMobileSelectOpen)}
+    className="w-full px-4 py-2 bg-white border rounded-lg shadow-sm flex justify-between items-center"
+  >
+    <span className="text-gray-700 font-medium">
+      {softwareData[activeTab].title}
+    </span>
+    <ChevronDown 
+      className={`w-5 h-5 transition-transform ${isMobileSelectOpen ? 'rotate-180' : ''}`}
+    />
+  </button>
+  
+  {isMobileSelectOpen && (
+    <motion.div 
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="absolute top-full left-0 right-0 mt-1 bg-white border rounded-lg shadow-lg z-50"
+    >
+      {softwareData.map((service, index) => (
+        <button
+          key={service.id}
+          className={`w-full px-4 py-2 text-left rounded-full transition-all ${
+            index === activeTab 
+              ? 'text-blue-600 bg-blue-50' 
+              : 'text-gray-700 hover:bg-gray-100 hover:text-gray-800'
+          }`}
+          onClick={() => scrollToSection(index)}
+        >
+          {service.title}
+        </button>
+      ))}
+    </motion.div>
+  )}
+</div>
+
+        </div>
+      </div>
+
+      <div className=" max-w-6xl mx-auto py-12 px-8 md:px-">
+        {softwareData.map((service, index) => (
+          <motion.div
+            key={service.id}
+            ref={el => sectionRefs.current[index] = el}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 0.5 }}
+            className="bg-white  py-6 px-2 mb-8"
+          >
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <h2 className="text-3xl font-bold text-gray-800">
+                  {service.title}
+                </h2>
+                
+              </div>
+              
+              <p className="text-gray-600 leading-relaxed">
+                {service.description}
+              </p>
+              <p className="text-gray-600 leading-relaxed">
+                {service.descriptionTwo}
+              </p>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+    </div>
+  );
+};
+
+export default ServiceInfo;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftWareAbout.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftWareAbout.jsx
new file mode 100644
index 0000000..7d567c0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftWareAbout.jsx
@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { useParams } from "react-router-dom";
+import { X, Play } from "lucide-react";
+
+const ServicesAbout = ({ data }) => {
+  const { slug } = useParams(); // Extract slug from the URL
+  const serviceData = data.find((service) => service.slug === slug) || {};
+
+  const connection = serviceData.connection || {};
+
+  const containerVariants = {
+    hidden: { opacity: 0, x: -50 },
+    visible: { opacity: 1, x: 0, transition: { duration: 0.8, ease: "easeOut" } },
+  };
+
+  const videoVariants = {
+    hidden: { opacity: 0, scale: 0.9 },
+    visible: { opacity: 1, scale: 1, transition: { duration: 0.5, ease: "easeOut" } },
+    exit: { opacity: 0, scale: 0.9, transition: { duration: 0.5, ease: "easeIn" } },
+  };
+
+  const [isVideoPlaying, setIsVideoPlaying] = useState(false);
+
+  const handleVideoClick = () => {
+    setIsVideoPlaying(true);
+  };
+
+  const handleCloseVideo = (e) => {
+    e.stopPropagation();
+    setIsVideoPlaying(false);
+  };
+
+  return (
+    <div className="bg-black" style={{ background: "#fff" }}>
+      <div className="flex flex-col-reverse md:flex-row items-center justify-between max-w-6xl mx-auto py-16 px-4 md:px-12">
+        <motion.div
+          className="w-full md:w-1/2 text-center md:text-left ps-0"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+        >
+          <h4 className="text-3xl font-medium text-gray-800 mb-4">{connection?.title}</h4>
+          <p className="text-gray-600 leading-relaxed">{connection?.description}</p>
+        </motion.div>
+        <motion.div
+          className="w-full md:w-2/3 flex justify-end md:justify-center mb-0 sm:justify-center mb-6 relative"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+        >
+          <div className="relative">
+            {!isVideoPlaying ? (
+              <motion.div
+                className="relative group"
+                onClick={handleVideoClick}
+                variants={videoVariants}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+              >
+                <img
+                  src={connection.img}
+                  alt="Video Thumbnail"
+                  className="rounded-lg object-cover w-full h-80"
+                />
+                <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                  <Play className="text-white w-10 h-10 animate-pulse" />
+                </div>
+              </motion.div>
+            ) : (
+              <motion.div
+                className="relative"
+                variants={videoVariants}
+                initial="hidden"
+                animate="visible"
+                exit="exit"
+              >
+                <video
+                  controls
+                  autoPlay
+                  className="rounded-lg object-cover w-full h-80"
+                >
+                  <source src={connection.video} type="video/mp4" />
+                  Your browser does not support the video tag.
+                </video>
+                <button
+                  onClick={handleCloseVideo}
+                  className="absolute top-2 right-2 bg-white rounded-full p-1 shadow-md"
+                >
+                  <X className="w-6 h-6 text-black" />
+                </button>
+              </motion.div>
+            )}
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default ServicesAbout;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareIndustries.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareIndustries.jsx
new file mode 100644
index 0000000..7595e29
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareIndustries.jsx
@@ -0,0 +1,141 @@
+import React, { useState, useEffect } from "react";
+import { motion } from "framer-motion";
+
+const slides = [
+  {
+    id: 1,
+    title: "Innovative Solutions",
+    description: "Delivering cutting-edge technology for tomorrow's needs.",
+    image: "https://via.placeholder.com/400",
+  },
+  {
+    id: 2,
+    title: "Scalable Systems",
+    description: "Building platforms that grow with your business.",
+    image: "https://via.placeholder.com/400",
+  },
+  {
+    id: 3,
+    title: "Future-Ready Software",
+    description: "Empowering industries with futuristic applications.",
+    image: "https://via.placeholder.com/400",
+  },
+  {
+    id: 4,
+    title: "Cloud Services",
+    description: "Reliable cloud solutions for your business.",
+    image: "https://via.placeholder.com/400",
+  },
+  {
+    id: 5,
+    title: "Data Analytics",
+    description: "Turning data into actionable insights.",
+    image: "https://via.placeholder.com/400",
+  },
+  {
+    id: 6,
+    title: "AI-Powered Tools",
+    description: "Innovating with artificial intelligence.",
+    image: "https://via.placeholder.com/400",
+  },
+];
+
+const SoftwareIndustries = () => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [itemsPerView, setItemsPerView] = useState(3); // Default for desktop
+
+  // Adjust itemsPerView based on screen size
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setItemsPerView(1); // Mobile view
+      } else {
+        setItemsPerView(3); // Desktop view
+      }
+    };
+
+    handleResize(); // Initial check
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const totalSlides = Math.ceil(slides.length / itemsPerView); // Total groups of slides
+
+  const nextSlide = () => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  };
+
+  const prevSlide = () => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  };
+
+  const visibleSlides = slides.slice(
+    currentSlide * itemsPerView,
+    currentSlide * itemsPerView + itemsPerView
+  );
+
+  return (
+    <div className='bg-black' 
+    style={{background:"#fff"}}
+    >
+    <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-12 px-8 md:px-12">
+      {/* Header Section */}
+      <div className="flex justify-between items-center flex-row mb-6">
+        <div>
+          <h2 className="text-2xl font-bold">Software Solutions for Various Industries</h2>
+          <p className="mt-2 text-gray-600">
+            Explore our innovative solutions tailored for different business needs.
+          </p>
+        </div>
+        <div className="btns flex justify-between items-center gap-4">
+          {/* Navigation Buttons */}
+          <motion.button
+            className="bg-black rounded text-white px-4 py-2"
+            onClick={prevSlide}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            &#8592;
+          </motion.button>
+          <motion.button
+            className="bg-black rounded text-white px-4 py-2"
+            onClick={nextSlide}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
+          >
+            &#8594;
+          </motion.button>
+        </div>
+      </div>
+
+      {/* Slider Content */}
+      <div className="flex gap-4 transition-transform ease-in-out duration-500">
+        {visibleSlides.map((slide) => (
+          <motion.div
+            key={slide.id}
+            className="flex-none w-full md:w-1/3"
+            initial={{ x: 100, opacity: 0 }}
+            animate={{ x: 0, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div
+              className="relative w-full h-[450px] rounded-lg bg-cover bg-center"
+              style={{ backgroundImage: `url(${slide.image})` }}
+            >
+              <div className="absolute bottom-4 w-11/12 left-3 text-white bg-black bg-opacity-75 p-4 rounded-md">
+                <h3 className="text-md font-semibold">{slide.title}</h3>
+                <p className="text-sm mt-2">{slide.description}</p>
+              </div>
+            </div>
+          </motion.div>
+        ))}
+      </div>
+    </div>
+    </div>
+  );
+};
+
+export default SoftwareIndustries;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareInsights .jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareInsights .jsx
new file mode 100644
index 0000000..040298f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareInsights .jsx	
@@ -0,0 +1,67 @@
+import React from "react";
+import { motion } from "framer-motion";
+import  services  from "@pages/detail-pages/DigitalSolutions/config/offeredServiceContent.json";
+import { generateServiceSlug } from "@pages/detail-pages/DigitalSolutionsDetailPage/utils/helpers";
+import { Link } from 'react-router-dom';
+
+const SoftwareInsights = () => {
+
+  return (
+    <div className='bg-black' 
+    style={{background:"#fff"}}
+    >
+    <div className='bg-black' 
+    // style={{background:"#1F2937"}}
+    >
+   <div className="relative w-full overflow-hidden max-w-6xl mx-auto py-12 px-4 md:px-12">
+      {/* Section Header */}
+      <div className="text-left text-[#fff] mb-6">
+        <h2 className="text-2xl font-bold ">Software Insights</h2>
+        <p className="mt-2 ">
+          Explore innovative solutions tailored for diverse business needs.
+        </p>
+      </div>
+
+      {/* Cards Section */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      {services.slice(3, 7).map((slide) => (
+  <motion.div
+    key={slide.id || `service-${slide.title}`}
+    className="flex flex-col items-center p-1 rounded-lg transition-transform duration-300 cursor-pointer"
+    initial={{ y: 100, opacity: 0 }}
+    animate={{ y: 0, opacity: 1 }}
+    transition={{ duration: 0.2 }}
+    whilehover={{ y: -10, boxShadow: "none" }}
+  >
+    <div
+      className="relative w-full h-[300px] rounded-lg bg-cover bg-center"
+      style={{ backgroundImage: `url(${slide.image})` }}
+    >
+      <Link to={`/services/${generateServiceSlug(slide.title)}`}>
+      <div className="absolute bottom-4 w-11/12 left-3 text-white bg-black bg-opacity-75 px-2 py-2 rounded-md">
+        <h5 className="text-md font-medium">{slide.title}</h5>
+        <p className="text-xs mt-2">{slide.description.slice(0,30)}...</p>
+      </div>
+    </Link>
+    </div>
+  </motion.div>
+))}
+
+      </div>
+
+      {/* View More Topics Section */}
+      {/* <div className="mt-8 flex items-center justify-center space-x-2">
+        <a href="#" className=" font-medium text-sm bg-black text-white shadow-md rounded-md px-6 py-2 flex align-items-center" >View More Topics <MoveUp  className="w-4 h-4 ms-1 pt-1  "/>
+      
+
+        </a>
+        
+      </div> */}
+    </div>
+        </div>
+        </div>
+ 
+  );
+};
+
+export default SoftwareInsights;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareTimeline.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareTimeline.jsx
new file mode 100644
index 0000000..98d9129
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/SoftwareTimeline.jsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+import { useParams } from "react-router-dom";
+
+const AccordionItem = ({ title, description, index, isExpanded, toggleExpand }) => {
+  return (
+    <div className="w-full py-3 px-0 border-b border-gray-300">
+      <div
+        className="flex justify-between items-center cursor-pointer"
+        onClick={() => toggleExpand(index)}
+      >
+        <h5 className="text-lg font-medium text-gray-800">{title}</h5>
+        <span className="text-2xl font-medium text-gray-800">
+          {isExpanded ? "-" : "+"}
+        </span>
+      </div>
+      {isExpanded && (
+        <motion.div
+          initial={{ height: 0, opacity: 0 }}
+          animate={{ height: "auto", opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          className="mt-2"
+        >
+          <p className="text-gray-600">{description}</p>
+        </motion.div>
+      )}
+    </div>
+  );
+};
+
+const Timeline = ({ data }) => {
+  const { slug } = useParams(); // Extract slug from the URL
+  const expertiseData = data.find((expertise) => expertise.slug === slug) || {};
+
+  const [expandedIndex, setExpandedIndex] = useState(0);
+
+  const toggleExpand = (index) => {
+    setExpandedIndex((prevIndex) => (prevIndex === index ? null : index));
+  };
+
+  return (
+    <div className='bg-black' 
+      style={{background:"#fff"}}
+    >
+      <div className="relative w-full  max-w-6xl mx-auto pt-16 pb-16 px-8 md:px-12 ">
+        {/* Section Title and Description */}
+        <div className="text-left mb-8">
+          <h4 className="text-3xl font-medium text-gray-800">{expertiseData?.expertise?.title}</h4>
+          <p className="text-gray-600 mt-2">
+            {expertiseData?.expertise?.subTitle}
+          </p>
+        </div>
+
+        {/* Accordion Items */}
+        <div className="flex flex-col">
+          {expertiseData.expertise?.content.length > 0 && expertiseData.expertise?.content.map((item, index) => (
+            <AccordionItem
+              key={index}
+              index={index}
+              title={item.title}
+              description={item.description}
+              isExpanded={expandedIndex === index}
+              toggleExpand={toggleExpand}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Timeline;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/StartegicApproach.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/StartegicApproach.jsx
new file mode 100644
index 0000000..90c6896
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/StartegicApproach.jsx
@@ -0,0 +1,82 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+
+const StrategicApproach = ({ data }) => {
+  const { slug } = useParams(); // Extract slug from the URL
+  const approachData = data?.find((item) => item.slug === slug) || {};
+
+  const appData = approachData.startegicApproach || {};
+
+  // Animation Variants
+  const fadeIn = {
+    hidden: { opacity: 0, y: 50 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } },
+  };
+
+  const staggerContainer = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.2,
+      },
+    },
+  };
+
+  return (
+    <div className="relative w-full h-screen">
+      {/* Background Image with Overlay */}
+      <div className="absolute inset-0">
+        <img
+          src={appData.image}
+          alt="Hero background"
+          className="w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-black/50" />
+      </div>
+
+      <div className="max-w-6xl mx-auto px-10 relative h-screen">
+        {/* Content Container */}
+        <motion.div
+          className="relative h-full container mx-auto px-4"
+          variants={staggerContainer}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.3 }}
+        >
+          <div className="flex flex-col justify-center items-start h-full max-w-3xl">
+            {/* Main Content */}
+            <motion.h1
+              className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6"
+              variants={fadeIn}
+            >
+              {appData?.title || "Transform Your Digital Presence"}
+            </motion.h1>
+            <motion.p
+              className="text-lg md:text-xl text-white/90 mb-8"
+              variants={fadeIn}
+            >
+              {appData?.description || "We help businesses create meaningful digital experiences that engage customers and drive growth. Let's work together to bring your vision to life."}
+            </motion.p>
+
+            {/* CTA Button */}
+            <motion.button
+              className="group flex items-center space-x-3 bg-white text-black px-6 py-3 rounded-full hover:bg-white/90 transition-all duration-300"
+              variants={fadeIn}
+            >
+              <span className="text-lg font-medium">
+                <Link to='/contact'>Let's Discuss</Link>
+              </span>
+              <div className="w-8 h-8 rounded-full bg-black flex items-center justify-center">
+                <ArrowRight className="w-4 h-4 text-white group-hover:translate-x-1 transition-transform duration-300" />
+              </div>
+            </motion.button>
+          </div>
+        </motion.div>
+      </div>
+    </div>
+  );
+};
+
+export default StrategicApproach;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Testimonial .jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Testimonial .jsx
new file mode 100644
index 0000000..a41c81b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/components/Testimonial .jsx	
@@ -0,0 +1,108 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Quote, Star, Award, BadgeCheck } from 'lucide-react';
+
+const Testimonial = ({color}) => {
+  return (
+    <div className="w-full bg-[#fff] py-12">
+      <motion.div 
+        className="container mx-auto px-0"
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.8 }}
+      >
+        <div className="relative max-w-5xl mx-auto">
+          {/* Floating Elements */}
+          <motion.div
+            className="absolute -top-10 left-0 text-indigo-500/10"
+            initial={{ scale: 0, rotate: -20 }}
+            whileInView={{ scale: 1, rotate: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.7, delay: 0.2 }}
+          >
+            <Quote color='#fff' size={120} />
+          </motion.div>
+
+          {/* Main Card */}
+          <motion.div 
+            className="relative z-10 bg-gradient-to-br from-white/5 to-white/10 backdrop-blur-xl rounded-3xl py-10 px-0 md:py-14 border border-white/10"
+            initial={{ y: 60 }}
+            whileInView={{ y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+          >
+
+            <div className="flex flex-col lg:flex-row items-center gap-12">
+              {/* Quote Content */}
+              <div className="flex-1 z-50">
+                <motion.div
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: 0.4 }}
+                >
+                  <p className="text-xl md:text-2xl text--[#161616] leading-relaxed font-light mb-8">
+                    "The level of innovation and creativity they bring to every project is simply 
+                    <span className="font-medium text-[#F97316]"> extraordinary</span>. Their approach has revolutionized how we think about design and functionality. 
+                    It's rare to find a team that combines such technical expertise with creative vision."
+                  </p>
+                </motion.div>
+                
+                {/* Author Info */}
+                <motion.div
+                  initial={{ opacity: 0, x: -20 }}
+                  whileInView={{ opacity: 1, x: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: 0.5 }}
+                  className="flex items-center gap-6"
+                >
+                  <div>
+                    <h4 className="text-[#161616] font-medium text-lg">Yasha Khandelwal</h4>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className="text-[#F97316] font-medium">Chief Executive Officer</span>
+                      <Award className="w-4 h-4 text-[#F97316]" />
+                    </div>
+                    <p className="text-sm text-[#161616] mt-1">Tech4Biz Solutions</p>
+                  </div>
+                </motion.div>
+              </div>
+
+              {/* Image Section */}
+              <motion.div 
+                className="relative group"
+                initial={{ opacity: 0, scale: 0.9 }}
+                whileInView={{ opacity: 1, scale: 1 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.6, delay: 0.5 }}
+                whilehover={{ scale: 1.02 }}
+              >
+                <div className="w-56 h-56 md:w-64 md:h-64 rounded-2xl overflow-hidden relative">
+                  <div className="absolute inset-0 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 group-hover:opacity-70 transition-opacity duration-500" />
+                  <img
+                    src="https://dummyimage.com/16:9x1080/"
+                    alt="Sarah Anderson"
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                {/* Decorative Frames */}
+                <motion.div 
+                  className="absolute -bottom-3 -right-3 w-full h-full border-2 border-indigo-500/20 rounded-2xl"
+                  whilehover={{ scale: 1.1 }}
+                  transition={{ duration: 0.4 }}
+                />
+                <motion.div 
+                  className="absolute -top-3 -left-3 w-full h-full border-2 border-purple-500/20 rounded-2xl"
+                  whilehover={{ scale: 0.9 }}
+                  transition={{ duration: 0.4 }}
+                />
+              </motion.div>
+            </div>
+          </motion.div>
+        </div>
+      </motion.div>
+    </div>
+  );
+};
+
+export default Testimonial;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/ServicesSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/ServicesSchema.json
new file mode 100644
index 0000000..43ab528
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/ServicesSchema.json
@@ -0,0 +1,138 @@
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Tech4Biz Services",
+  "description": "Explore our comprehensive range of services including AI Innovation, Quantum Computing, 3D Engineering Design, and EV PCB Board solutions.",
+  "url": "https://tech4bizsolutions.com/services",
+  "provider": {
+    "@type": "Organization",
+    "name": "Tech4Biz",
+    "url": "https://tech4bizsolutions.com"
+  },
+  "mainEntity": {
+    "@type": "ItemList",
+    "itemListElement": [
+      {
+        "@type": "Service",
+        "position": 1,
+        "name": "AI Innovation in Healthcare",
+        "url": "https://tech4bizsolutions.com/services/revolutionizing-healcare-through-ai",
+        "description": "AI is revolutionizing patient care by creating connected experiences that integrate data seamlessly. With real-time insights and streamlined processes, healthcare is becoming more efficient, personalized, and accessible.",
+        "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/h-banner.mp4",
+        "thumbnailUrl": "https://tech4bizsolutions.com/images/tech4biz-video-thumbnail.webp",
+        "offers": {
+          "@type": "AggregateOffer",
+          "offers": [
+            {
+              "@type": "Offer",
+              "name": "Enhanced Patient Interaction",
+              "description": "AI makes healthcare experiences more personal and engaging."
+            },
+            {
+              "@type": "Offer",
+              "name": "Advanced AI Solutions",
+              "description": "Cutting-edge technologies improve treatment processes and care quality."
+            },
+            {
+              "@type": "Offer",
+              "name": "Proven Expertise",
+              "description": "Years of leadership in healthcare and AI innovation."
+            }
+          ]
+        }
+      },
+      {
+        "@type": "Service",
+        "position": 2,
+        "name": "Quantum Computing Solutions",
+        "url": "https://tech4bizsolutions.com/services/acceleration-in-quantam-computing",
+        "description": "Quantum computing is reshaping connected experiences by enabling real-time data processing and precise data analysis, leading to faster, smarter decision-making.",
+        "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/q-banner.mp4",
+        "thumbnailUrl": "https://tech4bizsolutions.com/images/tech4biz-video-thumbnail.webp",
+        "offers": {
+          "@type": "AggregateOffer",
+          "offers": [
+            {
+              "@type": "Offer",
+              "name": "Advanced Algorithms",
+              "description": "Crafting efficient quantum algorithms for solving complex challenges."
+            },
+            {
+              "@type": "Offer",
+              "name": "Quantum Cryptography",
+              "description": "Revolutionizing security with quantum-resistant encryption protocols."
+            },
+            {
+              "@type": "Offer",
+              "name": "Optimized Performance",
+              "description": "Using quantum systems to maximize computational power."
+            }
+          ]
+        }
+      },
+      {
+        "@type": "Service",
+        "position": 3,
+        "name": "3D Engineering Design",
+        "url": "https://tech4bizsolutions.com/services/3d-engineering-design",
+        "description": "3D Engineering Design bridges the gap between concept and reality, offering industries a seamless and connected experience with advanced tools and precise modeling.",
+        "image": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4",
+        "thumbnailUrl": "https://tech4bizsolutions.com/images/tech4biz-video-thumbnail.webp",
+        "offers": {
+          "@type": "AggregateOffer",
+          "offers": [
+            {
+              "@type": "Offer",
+              "name": "Creative Solutions",
+              "description": "Delivering innovative designs tailored to unique user needs."
+            },
+            {
+              "@type": "Offer",
+              "name": "Precision Engineering",
+              "description": "Ensuring accuracy for flawless project execution."
+            },
+            {
+              "@type": "Offer",
+              "name": "Collaborative Design",
+              "description": "Integrating team efforts through shared 3D platforms."
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "breadcrumb": {
+    "@type": "BreadcrumbList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Home",
+        "item": "https://tech4bizsolutions.com"
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "name": "Services",
+        "item": "https://tech4bizsolutions.com/services"
+      }
+    ]
+  },
+  "about": [
+    {
+      "@type": "Thing",
+      "name": "Strategic Approach",
+      "description": "Our strategic vision combines innovation with expertise to create smarter, more efficient systems."
+    },
+    {
+      "@type": "Thing", 
+      "name": "Capabilities",
+      "description": "Comprehensive solutions and advanced technologies across multiple domains."
+    },
+    {
+      "@type": "Thing",
+      "name": "Benefits",
+      "description": "Delivering tangible value through innovative solutions and proven expertise."
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/data.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/data.js
new file mode 100644
index 0000000..b7ab925
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/data.js
@@ -0,0 +1,36 @@
+export const softwareData = [
+    {
+      id: 1,
+      image: "https://tech4bizsolutions.com./assets/images/services/Security.jpg",
+      title: "Security  ",
+      subtitle: "Subtitle 1",
+      description: " At Tech4Biz, we emphasize robust security in software development, offering advanced solutions like data encryption, access control, and comprehensive vulnerability assessments. Our expertise ensures your software is safeguarded with the latest security technologies and industry best practices.",
+      descriptionTwo:"Our dedicated team stays ahead of emerging threats through continuous learning and innovation in the dynamic field of cybersecurity. By choosing Tech4Biz, your business benefits from proactive security solutions that protect your software, ensuring trust and reliability in a competitive market."
+    },
+    {
+      id: 2,
+      image: "https://tech4bizsolutions.com./assets/images/services/Collaboration.jpg",
+      title: "Collaboration",
+      subtitle: "Subtitle 2",
+      description: "At Tech4Biz, we specialize in collaborative software development solutions that are fully customized to match your unique business requirements. Our experienced team works closely with you to create tailored software solutions designed to meet your goals, ensuring a seamless development process from start to finish.",
+      descriptionTwo:"We prioritize keeping you informed and involved throughout every stage of the software development lifecycle. With a proven track record of successful custom software development projects, Tech4Biz ensures your business objectives are met with precision and efficiency, driving sustained business growth and success."
+    },
+    {
+      id: 3,
+      image: "https://tech4bizsolutions.com./assets/images/services/Data-Center.webp",
+      title: "Data Center",
+      subtitle: "Subtitle 3",
+      description: "At Tech4Biz, we provide advanced data center solutions designed to ensure your applications run securely and efficiently. Our comprehensive approach integrates all aspects of data center management into a single, streamlined solution, delivering seamless operations, maximum uptime, and reliable performance. Count on our expertise to offer scalable, dependable, and secure data center solutions tailored to meet your specific business requirements.",
+      descriptionTwo:"We work closely with you to develop customized data center solutions that address your unique needs. Whether your goals include enhancing security, improving system performance, or achieving more efficient infrastructure management, Tech4Biz ensures your data center architecture is optimized for success. Contact us today to discover how our data center services can drive your business forward."
+    },
+    {
+      id: 4,
+      image: "https://tech4bizsolutions.com./assets/images/services/Networking.jpg",
+      title: "Networking",
+      subtitle: "Subtitle 4",
+      description: "At Tech4Biz, we deliver expert networking services designed to support the success of software development firms. A reliable network infrastructure is essential for seamless developer communication, efficient file sharing, and smooth project collaboration. Leveraging our extensive expertise, we provide custom networking solutions tailored to your business's unique needs.",
+      descriptionTwo:"Our customized networking solutions create the foundation for streamlined project management and effective team collaboration. From essential file-sharing capabilities to advanced networking systems, Tech4Biz equips your team with the tools and connectivity needed to boost productivity, drive business growth, and ensure success."
+    },
+   
+  ];
+  
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/data.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/data.json
new file mode 100644
index 0000000..fdab52f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/config/data.json
@@ -0,0 +1,618 @@
+[
+  {
+    "title": "Transforming Healthcare Through AI Innovation",
+    "slug": "revolutionizing-healcare-through-ai",
+    "meta": {
+      "title": "AI Innovation in Healthcare | Tech4Biz",
+      "description": "AI-driven healthcare solutions that enhance patient outcomes, streamline medical processes, and create connected healthcare experiences."
+    },
+    "banner": {
+      "title": "Connected Experiences: Bridging the Future of Healthcare with AI",
+      "description": "AI is revolutionizing patient care by creating connected experiences that integrate data seamlessly. With real-time insights and streamlined processes, healthcare is becoming more efficient, personalized, and accessible. AI-powered systems are paving the way for smarter, more responsive healthcare solutions.",
+      "breadcrumb": {
+        "title": "Services",
+        "subTiltle": "Ai Innovation"
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/h-banner.mp4"
+    },
+    "connection": {
+      "title": "Connected Experiences: Bridging the Future of Healthcare with AI",
+      "description": "AI is revolutionizing patient care by creating connected experiences that integrate data seamlessly. With real-time insights and streamlined processes, healthcare is becoming more efficient, personalized, and accessible. AI-powered systems are paving the way for smarter, more responsive healthcare solutions.",
+      "img": "https://img.freepik.com/free-photo/hologram-feminine-silhouette-man-hand_23-2148755140.jpg?uid=P176103548&ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/h-about.mp4"
+    },
+    "approach": {
+      "title": "Delivering Excellence Through AI",
+      "content": [
+        {
+          "title": "Patient-Centric",
+          "image": "https://cdn-icons-png.freepik.com/256/12445/12445844.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Focused on improving care quality and patient satisfaction."
+        },
+        {
+          "title": "Innovative",
+          "image": "https://cdn-icons-png.freepik.com/256/18314/18314790.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Harnessing cutting-edge AI technologies for transformative solutions."
+        },
+        {
+          "title": "Streamlined",
+          "image": "https://cdn-icons-png.freepik.com/256/17731/17731999.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Simplifying workflows for better operational efficiency."
+        },
+        {
+          "title": "Impactful",
+          "image": "https://cdn-icons-png.freepik.com/256/1534/1534216.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Driving measurable improvements in health outcomes."
+        }
+      ]
+    },
+    "expertise": {
+      "title": "Our Expertise: AI Technologies for Better Healthcare Solutions",
+      "subTitle": "Expertise in AI for Transforming Healthcare",
+      "content": [
+        {
+          "title": "Accurate Diagnoses",
+          "description": "AI tools empower doctors to make precise, data-driven decisions."
+        },
+        {
+          "title": "Health Trend Predictions",
+          "description": "AI identifies potential health risks early for preventive care."
+        },
+        {
+          "title": "Enhanced Patient Interaction",
+          "description": "AI makes healthcare experiences more personal and engaging."
+        },
+        {
+          "title": "Advanced AI Solutions",
+          "description": "Cutting-edge technologies improve treatment processes and care quality."
+        },
+        {
+          "title": "Proven Expertise",
+          "description": "Years of leadership in healthcare and AI innovation."
+        }
+      ]
+    },
+    "startegicApproach": {
+      "title": "Strategic Vision: AI Solutions for Healthcare Advancement",
+      "sunTitle": "Our strategic vision combines AI innovation with healthcare expertise to create smarter, more efficient systems that adapt to future challenges.",
+      "image": "/images/services/services/aiSolutionsforHealthcare.webp",
+      "readMore": "Read more"
+    },
+
+    "capabilities": {
+      "title": "Our Capabilities: Transforming Healthcare with Advanced AI",
+      "subTitle": "Comprehensive AI Capabilities for Healthcare Excellence",
+      "data": [
+        {
+          "title": "Smart Integration",
+          "description": "Seamlessly embed AI into existing healthcare systems",
+          "icon": "Laptop"
+        },
+        {
+          "title": "Predictive Analytics",
+          "description": "Use data to anticipate patient needs and improve outcomes.",
+          "icon": "Smartphone"
+        },
+        {
+          "title": "Clinical Decision Support",
+          "description": "Equip professionals with AI tools for better decision-making.",
+          "icon": "Lock"
+        },
+        {
+          "title": "Natural Language Processing",
+          "description": "Improve data comprehension and communication through advanced algorithms.",
+          "icon": "Cloud"
+        },
+        {
+          "title": "Streamlined Operations",
+          "description": "Automate processes to reduce inefficiencies and costs.",
+          "icon": "Code"
+        },
+        {
+          "title": "Scalable AI Tools",
+          "description": "Ensure solutions grow with evolving healthcare demands.",
+          "icon": "Settings"
+        }
+      ]
+    },
+    "benefits": {
+      "title": "How AI is Revolutionizing Healthcare",
+      "subTitle": "Unlocking the Benefits of AI in Healthcare",
+      "content": [
+        {
+          "title": "Faster Diagnoses",
+          "description": "Accelerate medical assessments with accurate AI tools."
+        },
+        {
+          "title": "Personalized Treatments",
+          "description": "Enable tailored care plans for optimal results."
+        },
+        {
+          "title": "Enhanced Accessibility",
+          "description": "Improve healthcare access through AI-driven solutions."
+        },
+        {
+          "title": "Data-Driven Care",
+          "description": "By utilizing big data and predictive analytics, AI provides deeper insights into patient health trends, leading to more proactive and personalized care strategies."
+        },
+        {
+          "title": "Operational Efficiency",
+          "description": "AI tools streamline healthcare workflows, improving everything from appointment scheduling to patient record management—thus reducing wait times and administrative burden."
+        },
+        {
+          "title": "Remote Patient Monitoring",
+          "description": "Leverage AI-powered devices and wearables to track patient health in real time, ensuring timely interventions and reducing hospital visits."
+        }
+      ]
+    },
+    "review": {
+      "title": "title",
+      "description": "AI technology is reshaping healthcare by boosting efficiency, accuracy, and reducing human error.",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  },
+  {
+    "title": "Accelerating Quantum Computing for Future Innovations",
+    "slug": "acceleration-in-quantam-computing",
+    "meta": {
+      "title": "Quantum Computing Solutions | Tech4Biz",
+      "description": "Advanced quantum computing solutions for solving complex problems faster and enabling breakthrough innovations across industries."
+    },
+    "banner": {
+      "title": "Accelerating Quantum Computing for Future Innovations",
+      "description": "Connected Experiences: Transforming the Way We Interact",
+      "breadcrumb": {
+        "title": "Services",
+        "subTiltle": "Quantam Computing"
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/q-about.mp4"
+    },
+    "connection": {
+      "title": "Connected Experiences: Transforming the Way We Interact",
+      "description": "Quantum computing is reshaping connected experiences by enabling real-time data processing and precise data analysis, leading to faster, smarter decision-making. Quantum encryption offers unbreakable security, addressing the rising concerns about cybersecurity. With unmatched computational speed, quantum systems optimize performance across industries, enhancing efficiency like never before. Additionally, quantum-powered platforms foster global collaboration, allowing teams to innovate together in real-time, pushing the boundaries of research and development",
+      "img": "https://img.freepik.com/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18938.jpg?uid=P176103548&ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/q-banner.mp4"
+    },
+    "approach": {
+      "title": "Driving Innovation with Quantum Solutions",
+      "content": [
+        {
+          "title": "Scalable Models",
+          "image": "https://cdn-icons-png.freepik.com/256/12445/12445844.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Quantum systems adapt to handle increasingly complex challenges."
+        },
+        {
+          "title": "Data Precision",
+          "image": "https://cdn-icons-png.freepik.com/256/18314/18314790.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Unparalleled accuracy in quantum computations ensures reliable results."
+        },
+        {
+          "title": "Innovation-Driven",
+          "image": "https://cdn-icons-png.freepik.com/256/17731/17731999.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Committed to delivering groundbreaking, future-ready quantum solutions."
+        },
+        {
+          "title": "Collaborative Research",
+          "image": "https://cdn-icons-png.freepik.com/256/1534/1534216.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Partnering with global leaders to advance quantum technologies."
+        }
+      ]
+    },
+    "expertise": {
+      "title": "Our Expertise: Leading the Quantum Revolution",
+      "subTitle": "Shaping the Future with Quantum Innovations",
+      "content": [
+        {
+          "title": "Pioneering Quantum Research",
+          "description": "Developing advanced algorithms and cutting-edge quantum protocols"
+        },
+        {
+          "title": "Quantum Software Solutions",
+          "description": "Building real-world applications powered by quantum capabilities"
+        },
+        {
+          "title": "Strategic Partnerships",
+          "description": "Collaborating with top institutions and industry leaders to drive progress"
+        },
+        {
+          "title": "Quantum Security Leadership",
+          "description": "Expertise in designing robust quantum encryption systems"
+        },
+        {
+          "title": "Scalable Quantum Integration",
+          "description": "Offering adaptable solutions for businesses to leverage quantum technologies"
+        }
+      ]
+    },
+    "startegicApproach": {
+      "title": "Strategic Vision: Quantum Computing in Tomorrow's World",
+      "sunTitle": "Quantum Computing: Revolutionizing the Future of Technology",
+      "image": "/images/services/circuit-board-close-up-with-different-components.avif",
+
+      "readMore": "Read more"
+    },
+
+    "capabilities": {
+      "title": "Empowering Industries with Quantum Tools",
+      "subTitle": "Comprehensive Quantum Solutions for Every Sector",
+      "data": [
+        {
+          "title": "Advanced Algorithms",
+          "description": "Crafting efficient quantum algorithms for solving complex challenges.",
+          "icon": "Code"
+        },
+        {
+          "title": "Accurate Simulations",
+          "description": "Enabling precise modeling for industries like healthcare and energy.",
+          "icon": "Cloud"
+        },
+        {
+          "title": "Quantum Cryptography",
+          "description": "Revolutionizing security with quantum-resistant encryption protocols.",
+          "icon": "Lock"
+        },
+        {
+          "title": "Optimized Performance",
+          "description": "Using quantum systems to maximize computational power.",
+          "icon": "Settings"
+        },
+        {
+          "title": "Seamless Enterprise Integration",
+          "description": "Tailored solutions for businesses adopting quantum technologies.",
+          "icon": "Laptop"
+        },
+        {
+          "title": "Innovative Research",
+          "description": "Staying ahead in the field with continuous quantum research advancements.",
+          "icon": "Lightbulb"
+        }
+      ]
+    },
+    "benefits": {
+      "title": "Unlocking the Full Potential of Quantum Computing",
+      "subTitle": "Transforming Industries with the Power of Quantum",
+      "content": [
+        {
+          "title": "Faster Problem Solving",
+          "description": "Drastically reduces the time needed for complex computations."
+        },
+        {
+          "title": "Enhanced Efficiency",
+          "description": "Achieving superior results while saving time and resources."
+        },
+        {
+          "title": "Future-Ready Technology",
+          "description": "Laying the groundwork for next-generation innovation across industries."
+        },
+        {
+          "title": "Accelerating Drug Discovery",
+          "description": "Speeding up the development of new medications with precise molecular simulations."
+        },
+        {
+          "title": "Advanced Supply Chain Optimization",
+          "description": "Leveraging quantum models to enhance logistics, reduce delays, and cut costs."
+        },
+        {
+          "title": "Breakthroughs in Artificial Intelligence",
+          "description": "Enabling more sophisticated AI models through the integration of quantum computing power."
+        }
+      ]
+    },
+    "review": {
+      "title": "title",
+      "description": "Quantum computing redefines efficiency, security, and innovation, unlocking endless possibilities for the future.",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  },
+  {
+    "title": "3D Engineering Design: Comprehensive Response",
+    "slug": "three-d-engineering-design",
+    "meta": {
+      "title": "3D Engineering Design Services | Tech4Biz",
+      "description": "Precision 3D engineering design solutions that optimize performance, streamline production, and enhance product innovation."
+    },
+    "banner": {
+      "title": "3D Engineering Design: Comprehensive Response",
+      "description": "3D Engineering Design: Revolutionizing Innovation and Precision",
+      "breadcrumb": {
+        "title": "Services",
+        "subTiltle": "3D Engineering Design"
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-banner.mp4"
+    },
+    "connection": {
+      "title": "Connected Experiences: Transforming Industries with 3D Design",
+      "description": "3D Engineering Design bridges the gap between concept and reality, offering industries a seamless and connected experience. With advanced tools and precise modeling, businesses can innovate faster, collaborate effectively, and bring designs to life with unparalleled accuracy. These designs empower industries to create more efficient, scalable, and impactful solutions.",
+      "img": "https://img.freepik.com/free-photo/person-using-ar-technology-perform-their-occupation_23-2151137423.jpg?uid=P176103548&ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/e-about.mp4"
+    },
+    "approach": {
+      "title": "Innovating with Precision and Intelligence",
+      "content": [
+        {
+          "title": "Creative",
+          "image": "https://cdn-icons-png.freepik.com/256/12445/12445844.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Delivering innovative designs tailored to unique user needs."
+        },
+        {
+          "title": "Accurate",
+          "image": "https://cdn-icons-png.freepik.com/256/18314/18314790.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Ensuring precision for flawless project execution."
+        },
+        {
+          "title": "Collaborative",
+          "image": "https://cdn-icons-png.freepik.com/256/17731/17731999.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Integrating team efforts through shared 3D platforms."
+        },
+        {
+          "title": "Scalable",
+          "image": "https://cdn-icons-png.freepik.com/256/1534/1534216.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Building systems adaptable to future advancements."
+        }
+      ]
+    },
+    "expertise": {
+      "title": "Our Expertise: Advanced 3D Design for Industry Transformation",
+      "subTitle": "Expert Solutions in 3D Engineering for Every Sector",
+      "content": [
+        {
+          "title": "Tailored Solutions",
+          "description": "Creating custom designs to meet specific industry requirements."
+        },
+        {
+          "title": "Cutting-Edge Tools",
+          "description": " Leveraging the latest 3D engineering technologies."
+        },
+        {
+          "title": "Cross-Industry Expertise",
+          "description": "Applying expertise in sectors like manufacturing and healthcare."
+        },
+        {
+          "title": "Efficient Processes",
+          "description": "Minimizing time and cost throughout design cycles."
+        },
+        {
+          "title": "Sustainable Practices",
+          "description": "Developing eco-friendly, efficient engineering solutions."
+        }
+      ]
+    },
+    "startegicApproach": {
+      "title": "Strategic Leadership in 3D Engineering Innovation",
+      "sunTitle": "A Strategic Approach: Excellence in 3D Engineering for Precision Design",
+      "image": "/images/services/man-architect-working-project-with-vr-glasses-new-technologies.avif",
+      "readMore": "Read more"
+    },
+    "capabilities": {
+      "title": "Comprehensive 3D Engineering Capabilities for Modern Industries",
+      "subTitle": "Our Capabilities: Transformative Solutions for 3D Engineering",
+      "data": [
+        {
+          "title": "Realistic Simulations",
+          "description": "Virtual testing for improved design reliability.",
+          "icon": "Monitor"
+        },
+        {
+          "title": "Custom Design Services",
+          "description": "Tailored models for unique project goals.",
+          "icon": "Edit"
+        },
+        {
+          "title": "System Integration",
+          "description": "Ensuring smooth collaboration across existing infrastructures.",
+          "icon": "Grid"
+        },
+        {
+          "title": "Scalable Architecture",
+          "description": "Designs that grow with business demands.",
+          "icon": "Settings"
+        },
+        {
+          "title": "Time-Saving Solutions",
+          "description": "Streamlining project timelines with advanced tools.",
+          "icon": "Clock"
+        },
+        {
+          "title": "Global Standards",
+          "description": "Ensuring designs align with international benchmarks.",
+          "icon": "Flag"
+        }
+      ]
+    },
+    "benefits": {
+      "title": "Driving Innovation with 3D Engineering Design",
+      "subTitle": "Unlocking the Full Potential of 3D Engineering",
+      "content": [
+        {
+          "title": "Enhanced Innovation",
+          "description": "Transforming creative ideas into reality with precision."
+        },
+        {
+          "title": "Cost Efficiency",
+          "description": "Reducing waste and accelerating production cycles."
+        },
+        {
+          "title": "Automatic Collaboration",
+          "description": "Connecting teams through interactive 3D platforms."
+        },
+        {
+          "title": "Optimized Manufacturing",
+          "description": "Streamlining production processes through detailed virtual prototypes."
+        },
+        {
+          "title": "Improved Product Testing",
+          "description": "Enhancing reliability with virtual performance assessments before physical production."
+        },
+        {
+          "title": "Sustainable Development",
+          "description": "Incorporating eco-friendly practices to reduce environmental impact."
+        }
+      ]
+    },
+    "review": {
+      "title": "title",
+      "description": "description",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  },
+  {
+    "title": "EV PCB Boards",
+    "slug": "ev-pcb-borads-design",
+    "meta": {
+      "title": "EV PCB Board Design Solutions | Tech4Biz",
+      "description": "Advanced PCB design solutions for electric vehicles that enhance efficiency, reliability, and performance."
+    },
+    "banner": {
+      "title": "EV PCB Boards",
+      "description": "Optimized Designs for EV PCB Boards: Precision and Performance",
+      "breadcrumb": {
+        "title": "Services",
+        "subTiltle": "EV PCB Boards"
+      },
+      "path": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/ev-banner.mp4"
+    },
+    "connection": {
+      "title": "Connected Experiences: Empowering Electric Vehicles with Advanced PCB Designs",
+      "description": "Advanced EV PCB designs ensure seamless functionality within electric vehicles, enhancing energy efficiency, performance, and system reliability. These cutting-edge boards optimize connectivity, paving the way for smarter, more sustainable electric vehicles.",
+      "img": "https://img.freepik.com/free-photo/kid-building-robot-using-electronic-parts_23-2149357673.jpg?uid=P176103548&ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+      "video": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/videos/ev-about.mp4"
+    },
+    "approach": {
+      "title": "Building Precision into EV PCB Systems",
+      "content": [
+        {
+          "title": "Efficient",
+          "image": "https://cdn-icons-png.freepik.com/256/12445/12445844.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Reducing energy loss and maximizing power usage."
+        },
+        {
+          "title": "Reliable",
+          "image": "https://cdn-icons-png.freepik.com/256/18314/18314790.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Ensuring consistent performance in all conditions."
+        },
+        {
+          "title": "Scalable",
+          "image": "https://cdn-icons-png.freepik.com/256/17731/17731999.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Designing boards adaptable to future EV innovations"
+        },
+        {
+          "title": "Precise",
+          "image": "https://cdn-icons-png.freepik.com/256/1534/1534216.png?ga=GA1.1.638379889.1733982420&semt=ais_hybrid",
+          "description": "Delivering accurate layouts for seamless integration."
+        }
+      ]
+    },
+    "expertise": {
+      "title": "Driving Innovation in EV PCB Board Engineering",
+      "subTitle": "Pioneering Solutions in EV PCB Design",
+      "content": [
+        {
+          "title": "Custom Solutions",
+          "description": "Tailored designs for unique EV requirements."
+        },
+        {
+          "title": "Thermal Management",
+          "description": "Optimizing heat dissipation for enhanced performance."
+        },
+        {
+          "title": "High Durability",
+          "description": "Engineering boards for harsh automotive conditions."
+        },
+        {
+          "title": "Signal Integrity",
+          "description": "Maintaining flawless communication in EV systems. "
+        },
+        {
+          "title": "Energy Efficiency",
+          "description": "Creating power-saving designs for extended range."
+        }
+      ]
+    },
+    "startegicApproach": {
+      "title": "Innovating EV Systems with Advanced PCB Designs",
+      "sunTitle": "A Strategic Approach: PCB Design Excellence for Electric Vehicles",
+      "image": "/images/services/man-architect-working-project-with-vr-glasses-new-technologies.avif",
+      "readMore": "Read more"
+    },
+    "capabilities": {
+      "title": "Next-Generation PCB Design Solutions for Electric Vehicles",
+      "subTitle": "Comprehensive Expertise in EV PCB Board Design",
+
+      "data": [
+        {
+          "title": "Advanced Layouts",
+          "description": "High-performance designs for power and control circuits.",
+          "icon": "Layers"
+        },
+        {
+          "title": "Compact Designs",
+          "description": "Maximizing functionality in limited spaces.",
+          "icon": "Box"
+        },
+        {
+          "title": "EMI Reduction",
+          "description": "Ensuring electromagnetic compatibility for smooth operation.",
+          "icon": "ShieldCheck"
+        },
+        {
+          "title": "Rapid Prototyping",
+          "description": "Accelerating development cycles for quicker launches.",
+          "icon": "FastForward"
+        },
+        {
+          "title": "Material Expertise",
+          "description": "Using high-quality materials for better performance.",
+          "icon": "Package"
+        },
+        {
+          "title": "Global Compliance",
+          "description": "Adhering to international standards for automotive PCBs.",
+          "icon": "Globe"
+        }
+      ]
+    },
+    "benefits": {
+      "title": "Unlocking the Potential of EV PCB Innovation",
+      "subTitle": "Revolutionizing EV Technology with Advanced PCB Designs",
+      "content": [
+        {
+          "title": "Enhanced Performance",
+          "description": "We are driving EV efficiency and reliability."
+        },
+        {
+          "title": "Sustainability",
+          "description": "We are supporting eco-friendly innovations with energy-efficient boards."
+        },
+        {
+          "title": "Future-Ready Designs",
+          "description": "We are developing scalable solutions for evolving EV technologies."
+        },
+        {
+          "title": "Improved Safety Features",
+          "description": "We are designing PCBs with fail-safe mechanisms for enhanced vehicle safety."
+        },
+        {
+          "title": "Cost Efficiency",
+          "description": "We are committed to reducing manufacturing costs while maintaining superior quality."
+        },
+        {
+          "title": "Smart Integration",
+          "description": "We are enabling seamless compatibility with IoT and other advanced automotive systems."
+        }
+      ]
+    },
+    "review": {
+      "title": "title",
+      "description": "Advanced PCB designs redefine electric vehicles, ensuring efficiency, reliability, and sustainability",
+      "image": "image",
+      "name": "name",
+      "designation": "designation"
+    }
+  }
+]
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/index.jsx
new file mode 100644
index 0000000..75b3564
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/index.jsx
@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import Hero from "./components/Hero";
+import Timeline from "./components/SoftwareTimeline";
+import SoftwareInsights from "./components/SoftwareInsights ";
+import OurApproach from "./components/OurApproach";
+import Benefits from "./components/Benefits";
+import servicesData from "./config/data.json";
+import ServicesAbout from "./components/SoftWareAbout";
+import Capabilities from "./components/Capabilities";
+import StartegicApproach from "./components/StartegicApproach";
+import Newsletter from "./components/NewsLetter";
+import Testimonial from "./components/Testimonial ";
+import { useParams } from "react-router-dom";
+import CaseStudies from "./components/CaseStudies";
+import ScrollToTop from "@/components/common/scroll/ScrollToTop";
+import ScrollToTopButton from "@/components/common/scroll/ScrollToTopButton";
+import ServicesSchema from "./config/ServicesSchema.json";
+import { Helmet } from "react-helmet-async";
+
+const BusinessService = () => {
+  const { slug } = useParams();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleModalToggle = (isOpen) => {
+    setIsModalOpen(isOpen);
+  }
+
+  // Find the current service data based on slug
+  const currentService = servicesData.find((service) => service.slug === slug);
+  
+  return (
+    <div>
+      <Helmet>
+        {/* Primary Meta Tags */}
+        <title>{currentService?.meta?.title || "Tech4Biz Services | AI, Quantum Computing, 3D Engineering & EV PCB Solutions"}</title>
+        <meta 
+          name="title" 
+          content={currentService?.meta?.title || "Tech4Biz Services | Leading Technology Solutions Provider"} 
+        />
+        <meta 
+          name="description" 
+          content={currentService?.meta?.description || "Explore our comprehensive range of services including AI Innovation, Quantum Computing, 3D Engineering Design, and EV PCB Board solutions."} 
+        />
+        <meta 
+          name="keywords" 
+          content="AI Innovation, Healthcare Technology, Quantum Computing, 3D Engineering Design, EV PCB Boards, Digital Transformation, Tech4Biz Services, Technology Solutions, Innovation, Enterprise Solutions" 
+        />
+
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content={currentService?.meta?.title || "Tech4Biz Services"} />
+        <meta property="og:description" content={currentService?.meta?.description || "Transform your business with Tech4Biz's innovative technology solutions"} />
+
+        {/* Canonical URL */}
+        <link 
+          rel="canonical" 
+          href={`https://tech4bizsolutions.com/business-services/${slug}`} 
+        />
+
+        {/* Schema.org JSON-LD */}
+        <script type="application/ld+json">
+          {JSON.stringify(ServicesSchema)}
+        </script>
+      </Helmet>
+
+      <ScrollToTop/>
+      <ScrollToTopButton />
+
+      <div
+        className=""
+        style={{
+          position: "sticky",
+          top: "0",
+          zIndex: isModalOpen ? "1000" : "1",
+        }}
+      >
+        <Hero data={servicesData} slug={slug} />
+      </div>
+
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <ServicesAbout data={servicesData} />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <OurApproach data={servicesData} />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <Timeline data={servicesData} />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <StartegicApproach data={servicesData} />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <Capabilities data={servicesData} />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <SoftwareInsights data={servicesData} />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <Benefits data={servicesData} />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <CaseStudies />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <Testimonial />
+      </div>
+      <div style={{ position: "relative", zIndex: 2 }}>
+        <Newsletter />
+      </div>
+    </div>
+  );
+};
+
+export default BusinessService;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/utils/subscription.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/utils/subscription.js
new file mode 100644
index 0000000..27e0e57
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/ourServicesDetailPage/utils/subscription.js
@@ -0,0 +1,43 @@
+import React, { useState } from 'react';
+
+// Global form handler utility
+export const useFormHandler = ({ located, handleSubmit }) => {
+  const [email, setEmail] = useState('');
+  const [error, setError] = useState('');
+
+  // Handle input change
+  const handleInputChange = (e) => {
+    setEmail(e.target.value);
+  };
+
+  // Validate email
+  const validateEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  // Handle form submission
+  const submitForm = () => {
+    if (validateEmail(email)) {
+      setError('');
+      handleSubmit(email, located);  // Call the submit function with valid email and located origin
+      resetForm();  // Reset the form after submission
+    } else {
+      setError('Invalid email address');  // Set error message for invalid email
+    }
+  };
+
+  // Reset form fields
+  const resetForm = () => {
+    setEmail('');
+    setError('');
+  };
+
+  return {
+    email,
+    error,
+    handleInputChange,
+    submitForm,
+    resetForm,
+  };
+};
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/SliderDetailPage.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/SliderDetailPage.jsx
new file mode 100644
index 0000000..67c5b1a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/SliderDetailPage.jsx
@@ -0,0 +1,134 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { useParams, useLocation } from 'react-router-dom';
+import ScrollToTop from '@components/common/scroll/ScrollToTop';
+import { LoadingFallback } from '@components/common/LoadingFallback';
+import ServiceErrorBoundary from '@components/common/error/ServiceErrorBoundary';
+import { getServiceConfig } from './configs';
+import { getSliderSchema } from './utils/getSliderSchema';
+
+// import components
+import ServiceIntroduction from './components/ServiceIntroduction/ServiceIntroduction';
+import ServiceBenefits from './components/ServiceBenefits/ServiceBenefits';
+import RelatedArticles from './components/RelatedArticles/RelatedArticles';
+import ServiceSolution from './components/ServiceSolution/ServiceSolution';
+import ServiceConclusion from './components/ServiceConclusion/ServiceConclusion';
+import CallToAction from './components/CallToAction/CallToAction';
+import SocialShare from './shared/SocialShare/SocialShare';
+import SliderDetailHero from './components/Hero/SliderDetailHero';
+
+const SliderDetailPage = () => {
+  const { serviceId } = useParams();
+  const location = useLocation();
+
+  const [serviceData, setServiceData] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Memoized function to fetch service data
+  const fetchServiceData = useCallback(() => {
+    try {
+      const data = getServiceConfig(serviceId);
+      if (!data) {
+        throw new Error('Service detail not found');
+      }
+      return data;
+    } catch (err) {
+      throw new Error('Failed to load service data');
+    }
+  }, [serviceId]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadServiceData = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        // Simulated async behavior for consistent UX
+        const data = await new Promise((resolve) => {
+          setTimeout(() => {
+            resolve(fetchServiceData());
+          }, 100);
+        });
+        if (isMounted) {
+          setServiceData(data);
+          setIsLoading(false);
+        }
+      } catch (err) {
+        if (isMounted) {
+          setError(err.message);
+          setIsLoading(false);
+        }
+      }
+    };
+
+    loadServiceData();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [serviceId, fetchServiceData]);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [serviceId]);
+
+  if (isLoading) {
+    return <LoadingFallback />;
+  }
+
+  if (error || !serviceData) {
+    throw new Error('Case study not found');
+  }
+
+  const { overview, benefits, solution, conclusion } = serviceData;
+
+  return (
+    <ServiceErrorBoundary>
+      <>
+        <Helmet>
+          <title>{overview.title} - Tech4Biz</title>
+          <meta name="description" content={overview.description} />
+          <meta name="keywords" content={overview.keywords} />
+          <meta property="og:title" content={overview.title} />
+          <meta property="og:description" content={overview.description} />
+          <link rel="canonical" href={`https://tech4bizsolutions.com/slider-detail/${serviceId}`} />
+          <script type="application/ld+json">
+            {JSON.stringify(getSliderSchema(serviceData))}
+          </script>
+        </Helmet>
+        <main className="bg-white">
+          <ScrollToTop />
+          <SliderDetailHero 
+            title={overview.title} 
+            subtitle={overview.subtitle} 
+            backgroundImage={overview.image} 
+          />
+          <motion.div
+            initial="hidden"
+            animate="visible"
+            className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8"
+          >
+            <ServiceIntroduction {...overview} />
+            <SocialShare serviceData={serviceData} />
+            <ServiceBenefits title={benefits.title} items={benefits.items} />
+            <RelatedArticles 
+              articles={
+                Array.isArray(serviceData?.relatedArticles)
+                  ? serviceData.relatedArticles
+                  : []
+              } 
+            />
+            <ServiceSolution {...solution} />
+            <ServiceConclusion {...conclusion} />
+          </motion.div>
+          <CallToAction partnerLogos={serviceData.partnerLogos} />
+        </main>
+      </>
+    </ServiceErrorBoundary>
+  );
+};
+
+export default SliderDetailPage; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/CallToAction/CallToAction.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/CallToAction/CallToAction.jsx
new file mode 100644
index 0000000..3499de5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/CallToAction/CallToAction.jsx
@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { ArrowUpRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import CRMModalForm from '@components/modals/CRMModalForm';
+
+const AnimatedButton = ({ children, primary = false, onClick }) => {
+  const baseButtonClasses =
+    "group relative px-8 py-4 rounded-full text-sm font-medium flex items-center justify-center gap-2 overflow-hidden transition-all duration-300 w-full sm:w-auto min-w-[180px]";
+  const primaryClasses =
+    "bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-600/20";
+  const secondaryClasses =
+    "bg-white/5 text-white hover:bg-white/10 backdrop-blur-sm";
+  const buttonGlowClasses =
+    "absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent translate-x-[-200%] transition-transform duration-300 group-hover:translate-x-[200%]";
+  const buttonClasses = `${baseButtonClasses} ${
+    primary ? primaryClasses : secondaryClasses
+  }`;
+
+  return (
+    <motion.button
+      onClick={onClick}
+      className={buttonClasses}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+    >
+      <span className="relative z-10">{children}</span>
+      <ArrowUpRight className="w-4 h-4 relative z-10" />
+      <div className={buttonGlowClasses} />
+    </motion.button>
+  );
+};
+
+const CallToAction = ({ partnerLogos }) => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const containerVariants = {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { staggerChildren: 0.2 }
+    }
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.6, ease: "easeOut" }
+    }
+  };
+
+  const openModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+  };
+
+  return (
+    <section className="relative bg-[#1b1b1b] overflow-hidden w-full">
+      {/* Optional glow overlay. Adjust as needed */}
+      <div className="absolute inset-0 pointer-events-none" />
+      <div className="relative w-full px-6 py-24">
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true }}
+          className="max-w-7xl mx-auto"
+        >
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-20">
+            <motion.div variants={itemVariants} className="space-y-8">
+              <span className="inline-block px-4 py-1.5 bg-blue-500/10 text-blue-400 text-sm font-medium rounded-full">
+                Transform Your Business
+              </span>
+              <h2 className="text-4xl md:text-5xl font-light text-white leading-tight">
+                Ready to Lead the{" "}
+                <span className="font-medium bg-gradient-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent">
+                  Digital Revolution?
+                </span>
+              </h2>
+              <p className="text-lg text-white/70 max-w-xl">
+                Join forward-thinking businesses that are already transforming
+                their operations with our cutting-edge solutions.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4 pt-4 w-full">
+                <AnimatedButton primary onClick={openModal}>
+                  NewsLetter
+                </AnimatedButton>
+                <Link to="/contact" className="no-underline w-full sm:w-auto">
+                  <AnimatedButton>Contact Sales</AnimatedButton>
+                </Link>
+              </div>
+            </motion.div>
+            <motion.div variants={itemVariants} className="relative">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {[
+                  { number: "93%", label: "Client Satisfaction" },
+                  { number: "45+", label: "Enterprise Clients" },
+                  { number: "24/7", label: "Expert Support" },
+                  { number: "12+", label: "Years Experience" }
+                ].map((stat, index) => (
+                  <motion.div
+                    key={index}
+                    className="bg-white/5 backdrop-blur-sm p-4 rounded-lg shadow-lg flex flex-col items-center justify-center text-center"
+                    whileHover={{ scale: 1.05 }}
+                    transition={{ duration: 0.3 }}
+                  >
+                    <div className="text-2xl font-extrabold text-blue-400 mb-1">
+                      {stat.number}
+                    </div>
+                    <div className="text-sm font-medium text-gray-300">
+                      {stat.label}
+                    </div>
+                  </motion.div>
+                ))}
+              </div>
+            </motion.div>
+          </div>
+          <motion.div variants={itemVariants} className="pt-16 border-t border-white/10">
+            <span className="block text-center text-sm text-white/40 font-medium tracking-wider mb-8">
+              Trusted by Industry Leaders
+            </span>
+            <div className="flex flex-wrap justify-center items-center gap-12">
+              {partnerLogos.map((partner, index) => (
+                <motion.div
+                  key={index}
+                  className="w-32 h-16 bg-white/5 rounded-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:shadow-lg hover:shadow-white/5"
+                  whileHover={{ scale: 1.05 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  <img
+                    src={partner.image}
+                    alt={partner.name}
+                    className="w-full h-full object-contain p-4"
+                  />
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={handleModalClose}
+        source="Landing Page Call to action"
+      />
+    </section>
+  );
+};
+
+export default CallToAction;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/Hero/SliderDetailHero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/Hero/SliderDetailHero.jsx
new file mode 100644
index 0000000..7430cc5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/Hero/SliderDetailHero.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const SliderDetailHero = ({ title, subtitle, backgroundImage }) => {
+  return (
+    <section
+      className="relative w-full overflow-hidden font-sans 
+                 h-[55vh] min-h-[350px] mb-12 md:h-[65vh] md:min-h-[400px] lg:h-[95vh] lg:min-h-[700px] lg:mb-16"
+    >
+      <div
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat transform scale-105 transition-transform duration-800 ease-out"
+        style={{ backgroundImage: `url(${backgroundImage})` }}
+      >
+        <div
+          className="absolute inset-0"
+          style={{
+            background: `linear-gradient(
+              to bottom,
+              rgba(17, 24, 39, 0.8) 0%,
+              rgba(17, 24, 39, 0.7) 40%,
+              rgba(17, 24, 39, 0.95) 100%
+            )`
+          }}
+        />
+      </div>
+
+      <div
+        className="relative w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col justify-start"
+        style={{ paddingTop: 'clamp(6rem, 15vh, 8rem)' }}
+      >
+        <motion.div
+          className="w-full max-w-3xl space-y-6"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <div className="flex items-center space-x-4">
+            <span className="w-6 sm:w-8 md:w-12 h-[2px] bg-blue-500 rounded-full" />
+            <motion.h2
+              className="text-xs sm:text-sm font-semibold text-blue-400 uppercase tracking-wider"
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+            >
+              {subtitle}
+            </motion.h2>
+          </div>
+          <motion.h1
+            className="font-bold text-white tracking-tight"
+            style={{
+              fontSize: "clamp(2rem, 5vw, 3.75rem)",
+              lineHeight: "1.2",
+              textShadow: "0 2px 4px rgba(0,0,0,0.1)"
+            }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.3 }}
+          >
+            {title}
+          </motion.h1>
+        </motion.div>
+      </div>
+
+      <div
+        className="absolute bottom-0 left-0 right-0 h-32"
+        style={{
+          background: "linear-gradient(to bottom, transparent 0%, rgba(17,24,39,0.9) 100%)"
+        }}
+      />
+    </section>
+  );
+};
+
+export default SliderDetailHero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/RelatedArticles/RelatedArticles.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/RelatedArticles/RelatedArticles.jsx
new file mode 100644
index 0000000..65d0ee5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/RelatedArticles/RelatedArticles.jsx
@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { motion } from 'framer-motion';
+import { Link, useParams } from 'react-router-dom';
+import { fadeIn } from '../../shared/animations/motionVariants';
+import { slides } from '../../../../home/components/caseStudiesSlider/config/serviceSliderSlides.json';
+
+const RelatedArticles = ({ articles = [] }) => {
+  const { serviceId } = useParams();
+
+  // Use useMemo to keep the random case studies consistent
+  const randomCaseStudies = useMemo(() => {
+    // Filter out the current case study
+    const availableSlides = slides.filter(slide => slide.id !== serviceId);
+    
+    // Get 3 random case studies
+    const shuffled = [...availableSlides].sort(() => 0.5 - Math.random());
+    return shuffled.slice(0, 3);
+  }, [serviceId]); // Only recalculate when serviceId changes
+
+  return (
+    <div className="my-24">
+      <motion.h2 
+        variants={fadeIn}
+        initial="hidden"
+        whileInView="visible"
+        viewport={{ once: true }}
+        className="text-2xl font-semibold mb-8 text-gray-900"
+      >
+        Related Case Studies
+      </motion.h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {randomCaseStudies.map((study) => (
+          <motion.article 
+            key={study.id}
+            variants={fadeIn}
+            initial="hidden"
+            whileInView="visible"
+            viewport={{ once: true }}
+            className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 group"
+          >
+            <Link 
+              to={`/slider-detail/${study.id}`}
+              state={{ fromRelated: true }}
+            >
+              <img 
+                src={study.image} 
+                alt={study.title}
+                className="w-full h-48 object-cover" 
+              />
+              <h3 className="text-lg font-semibold mt-4 px-4 text-gray-900 transition-colors duration-300 group-hover:text-blue-600">
+                {study.title}
+              </h3>
+              <p className="text-gray-600 mt-2 px-4 pb-4 text-sm line-clamp-2">
+                {study.description}
+              </p>
+            </Link>
+          </motion.article>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default RelatedArticles;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceBenefits/ServiceBenefits.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceBenefits/ServiceBenefits.jsx
new file mode 100644
index 0000000..c0e9bb2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceBenefits/ServiceBenefits.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { fadeIn } from '../../shared/animations/motionVariants';
+
+const ServiceBenefits = ({ title, items }) => {
+  return (
+    <motion.section variants={fadeIn} className="mb-16">
+      <h4 className="text-sm font-semibold text-[#2d2d2d] tracking-wide uppercase mb-2">
+        Benefits
+      </h4>
+      <h3 className="text-3xl sm:text-4xl font-medium text-gray-900 leading-tight mb-6">
+        {title}
+      </h3>
+      <div className="space-y-8">
+        {items.map((benefit, index) => (
+          <div key={index} className="cursor-pointer group">
+            <h4 className="text-xl font-medium text-gray-900 mb-3 transition-colors group-hover:text-blue-600">
+              {benefit.title}
+            </h4>
+            <p className="text-gray-600">
+              {benefit.description}
+            </p>
+          </div>
+        ))}
+      </div>
+    </motion.section>
+  );
+};
+
+export default ServiceBenefits;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceConclusion/ServiceConclusion.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceConclusion/ServiceConclusion.jsx
new file mode 100644
index 0000000..97c79bb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceConclusion/ServiceConclusion.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowDownToLine } from 'lucide-react';
+import { fadeIn } from '../../shared/animations/motionVariants';
+
+const ServiceConclusion = ({ mainText, callToAction, pdfDownload }) => {
+  return (
+    <motion.section variants={fadeIn} className="mb-16">
+      <h4 className="text-sm font-medium text-[#2d2d2d] tracking-wide uppercase mb-2">
+        Conclusion
+      </h4>
+      <div className="space-y-6">
+        <p className="text-xl text-gray-700 leading-relaxed">{mainText}</p>
+        <div className="bg-blue-50 border-l-4 border-blue-500 p-6">
+          <p className="text-lg text-gray-700">{callToAction}</p>
+        </div>
+        <div className="flex justify-start pt-4">
+          <a
+            href={pdfDownload.url}
+            target="_blank"
+            rel="nofollow noopener noreferrer"
+            className="inline-flex items-center px-6 py-3 border border-blue-600 text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 transition-colors duration-200"
+          >
+            <ArrowDownToLine className="mr-2 h-5 w-5" />
+            {pdfDownload.label}
+          </a>
+        </div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default ServiceConclusion;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceIntroduction/ServiceIntroduction.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceIntroduction/ServiceIntroduction.jsx
new file mode 100644
index 0000000..552d9fb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceIntroduction/ServiceIntroduction.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const ServiceIntroduction = ({
+  title,
+  subtitle,
+  mainDescription,
+  extendedDescription
+}) => {
+  return (
+    <motion.section 
+      className="mb-16"
+      initial="hidden"
+      animate="visible"
+      variants={{
+        visible: {
+          transition: {
+            staggerChildren: 0.1
+          }
+        }
+      }}
+    >
+      <h2 className="text-sm font-semibold text-blue-600 tracking-wide uppercase mb-2">
+        {subtitle}
+      </h2>
+      <h1 className="text-4xl sm:text-5xl font-extrabold text-gray-900 leading-tight mb-6">
+        {title}
+      </h1>
+      <div className="border-l-4 border-blue-500 pl-6 my-8">
+        <p className="text-xl text-gray-600 leading-relaxed">{mainDescription}</p>
+      </div>
+      <p className="text-lg text-gray-600">{extendedDescription}</p>
+    </motion.section>
+  );
+};
+
+export default ServiceIntroduction;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceSolution/ServiceSolution.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceSolution/ServiceSolution.jsx
new file mode 100644
index 0000000..cd6e174
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceSolution/ServiceSolution.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { RiDoubleQuotesL, RiDoubleQuotesR } from 'react-icons/ri';
+import { fadeIn } from '../../shared/animations/motionVariants';
+
+const ServiceSolution = ({
+  title,
+  description,
+  highlightedText,
+  additionalInfo,
+  testimonial,
+}) => {
+  return (
+    <motion.section variants={fadeIn} className="mb-12">
+      <h4 className="text-sm font-semibold text-[#2d2d2d] tracking-wide uppercase mb-2">
+        Solution
+      </h4>
+      <h4 className="text-2xl sm:text-3xl font-medium text-gray-900 leading-tight mb-4">
+        {title}
+      </h4>
+
+      <div className="space-y-4">
+        <p className="text-base text-gray-600">{description}</p>
+
+        <div className="bg-blue-50 border-l-4 border-blue-500 p-4">
+          <p className="text-base text-gray-700">{highlightedText}</p>
+        </div>
+
+        <p className="text-base text-gray-600">{additionalInfo}</p>
+
+        <div
+          className="mt-8 bg-white rounded-lg shadow-md p-4 sm:p-6 md:p-8 relative overflow-hidden"
+          style={{ background: 'linear-gradient(135deg, #EBF5FF 0%, #FFFFFF 100%)' }}
+        >
+          <div className="flex items-center justify-center">
+            <div className="relative max-w-2xl mx-auto px-6 sm:px-8 py-2">
+              <motion.div
+                initial={{ rotate: -15 }}
+                whileHover={{ rotate: 0, scale: 1.1 }}
+                transition={{ duration: 0.3 }}
+                className="absolute -top-1 -left-1 text-2xl sm:text-3xl text-blue-500/20"
+              >
+                <RiDoubleQuotesL />
+              </motion.div>
+
+              <motion.p
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 0.3 }}
+                className="text-sm sm:text-base md:text-lg text-gray-700 italic text-center leading-relaxed py-3 sm:py-4 mx-6"
+                style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}
+              >
+                {testimonial.quote}
+              </motion.p>
+
+              <motion.div
+                initial={{ rotate: 15 }}
+                whileHover={{ rotate: 0, scale: 1.1 }}
+                transition={{ duration: 0.3 }}
+                className="absolute -bottom-1 -right-1 text-2xl sm:text-3xl text-blue-500/20"
+              >
+                <RiDoubleQuotesR />
+              </motion.div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.section>
+  );
+};
+
+export default ServiceSolution;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceSolution/Testimonial.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceSolution/Testimonial.jsx
new file mode 100644
index 0000000..2fef05a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/components/ServiceSolution/Testimonial.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { fadeIn } from '../../shared/animations/motionVariants';
+
+const Testimonial = ({ quote, author, role }) => {
+  return (
+    <motion.div
+      variants={fadeIn}
+      className="mt-8 bg-white rounded-lg shadow-md p-4 sm:p-6 md:p-8 relative overflow-hidden"
+      style={{ background: 'linear-gradient(135deg, #EBF5FF 0%, #FFFFFF 100%)' }}
+    >
+      <p
+        className="text-sm sm:text-base md:text-lg text-gray-700 italic text-center leading-relaxed py-3 sm:py-4 mx-6"
+        style={{ textShadow: '0 1px 2px rgba(0, 0, 0, 0.05)' }}
+      >
+        "{quote}"
+      </p>
+      <div className="mt-4 text-center">
+        <p className="text-lg font-semibold text-gray-900">{author}</p>
+        <p className="text-sm text-gray-600">{role}</p>
+      </div>
+    </motion.div>
+  );
+};
+
+export default Testimonial;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/blockchainTechnology.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/blockchainTechnology.json
new file mode 100644
index 0000000..bc55daa
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/blockchainTechnology.json
@@ -0,0 +1,98 @@
+{
+  "metadata": {
+    "title": "Building the Future with Blockchain | Tech4Biz",
+    "description": "An Analysis on EVM-Compatible Smart Contract Platform Development",
+    "keywords": "blockchain, EVM-compatible, smart contracts, decentralization, dApps"
+  },
+  "overview": {
+    "title": "Understanding EVM-Compatible Smart Contract Platforms",
+    "subtitle": "Blockchain Innovation",
+    "mainDescription": "EVM-compatible smart contract platforms seamlessly integrate with the Ethereum ecosystem, providing scalability, enhanced security, and flexibility to decentralized applications (dApps).",
+    "extendedDescription": "These platforms are driving blockchain innovation by improving transparency, decentralization, and automation, paving the way for the development of new dApps across various industries.",
+    "image": "/images/casestudies/building-the-future-with-blockchain.webp"
+  },
+  "benefits": {
+    "title": "Unlocking the Power of EVM-Compatible Platforms: Key Advantages for Developers",
+    "items": [
+      {
+        "title": "Greater Transparency and Trust",
+        "description": "EVM-compatible platforms offer developers the ability to create decentralized applications (dApps) without relying on intermediaries, resulting in greater transparency, enhanced trust, and improved security for end-users."
+      },
+      {
+        "title": "Lower Transaction Fees",
+        "description": "Layer 2 solutions and efficient smart contract execution can significantly lower transaction fees, making dApps more affordable and accessible to a broader audience."
+      },
+      {
+        "title": "Seamless Ethereum Integration",
+        "description": "These platforms integrate seamlessly with the Ethereum ecosystem, enabling developers to create dApps that interact with Ethereum-based assets, DeFi protocols, and decentralized exchanges (DEXs)."
+      },
+      {
+        "title": "Enhanced Scalability",
+        "description": "Scalability solutions like rollups and sidechains boost transaction speed and efficiency, enhancing the user experience in high-traffic scenarios while reducing blockchain bottlenecks."
+      }
+    ]
+  },
+  "solution": {
+    "title": "Optimizing EVM-Compatible Platforms: Solutions for Scalability and Security",
+    "description": "Layer 2 Scaling: Utilizing Layer 2 scaling solutions, such as rollups and state channels, can enhance transaction speeds and reduce network congestion, improving overall performance on EVM-compatible platforms.",
+    "highlightedText": "Security Measures: Regular security audits and rigorous verification methods are crucial for maintaining the integrity of smart contracts, reducing the risks of vulnerabilities and attacks.",
+    "additionalInfo": "Cross-Chain Interoperability: Cross-chain bridges enable EVM-compatible platforms to interface with other blockchain networks, resulting in faster asset transfers and improved interoperability across ecosystems.",
+    "testimonial": {
+      "quote": "Smart Contract Development Tools: Leveraging modern tools and frameworks for smart contract development helps developers build secure, scalable, and efficient applications faster on EVM-compatible platforms.",
+      "author": "John Doe",
+      "role": "Blockchain Developer"
+    }
+  },
+  "conclusion": {
+    "mainText": "EVM-compatible smart contract platforms are revolutionizing blockchain by offering enhanced decentralization, lower transaction costs, seamless Ethereum interoperability, and faster transaction speeds.",
+    "callToAction": "These benefits drive the growth of decentralized applications (dApps) and foster innovation across industries like finance, healthcare, and supply chain. As challenges like scalability and security are addressed, EVM-compatible platforms will play a key role in shaping the future of decentralized technologies, enabling more efficient and accessible blockchain solutions for developers and businesses alike.",
+    "pdfDownload": {
+      "label": "Download Blockchain Technology Whitepaper",
+      "url": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Transforming%20with%20BlockChain%20Technology.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "Challenges in EVM-Compatible Smart Contract Deployment",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/evm-deployment-challenges"
+      },
+      {
+        "title": "Blockchain Innovation with EVM-Compatible Platforms",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/blockchain-innovation-evm"
+      },
+      {
+        "title": "Future of Decentralized Applications",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/decentralized-applications-future"
+      },
+      {
+        "title": "EVM-Compatible Platforms and Security",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/evm-security"
+      }
+    ]
+  },
+  "heroImage": "/path/to/blockchain-hero-image.jpg",
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/cyberSecurity.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/cyberSecurity.json
new file mode 100644
index 0000000..89f2ac1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/cyberSecurity.json
@@ -0,0 +1,94 @@
+{
+  "id": "cyber-security",
+  "metaData": {
+    "title": "Cyber Security Solutions | Tech4Biz",
+    "description": "Advanced cybersecurity services to protect your business from evolving digital threats.",
+    "keywords": "cybersecurity, digital security, threat protection, AI security"
+  },
+  "overview": {
+    "title": "Empowering Businesses to Defend Against Evolving Cyber Threats",
+    "subtitle": "Cyber Security",
+    "mainDescription": "Tech4Biz offers advanced cybersecurity services to assist businesses in tackling new threats and protecting confidential data.",
+    "extendedDescription": "We provide innovative, tailored solutions to improve security measures for businesses of all sizes. Our offerings assist businesses in complying with industry regulations, minimizing risks, and safeguarding their digital infrastructures.",
+    "image": "/images/sliser/im.webp"
+  },
+  "benefits": {
+    "title": "Advantages of AI-Powered Cybersecurity",
+    "items": [
+      {
+        "title": "Immediate Threat Detection",
+        "description": "Tools powered by AI facilitate the immediate identification of new threats, leading to quicker responses and minimizing possible harm. Automated incident handling and simplified security processes reduce the need for manual involvement, enhancing operational efficiency."
+      },
+      {
+        "title": "Enhanced Data Protection",
+        "description": "End-to-end encryption and protected cloud services shield essential business information, reducing the chances of breaches and theft of intellectual property. Continuous monitoring guarantees adherence to data privacy regulations."
+      },
+      {
+        "title": "Operational Efficiency",
+        "description": "The automation of security procedures minimizes the necessity for substantial staff engagement, resulting in considerable savings. A robust cybersecurity framework guarantees seamless business activities."
+      }
+    ]
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "Tech4Biz Security: A Decade of Innovation",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/tech4biz-security-innovation"
+      },
+      {
+        "title": "AI-Powered Security: The Future of Protection",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/ai-powered-security"
+      },
+      {
+        "title": "The Security Revolution: Protecting Digital Assets",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/security-revolution"
+      },
+      {
+        "title": "Global Financial Security: A Case Study",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/financial-security-case-study"
+      }
+    ]
+  },
+  "solution": {
+    "title": "Cybersecurity Solutions Powered by AI",
+    "description": "We performed a comprehensive cybersecurity risk evaluation to pinpoint weaknesses, facilitating the development of a tailored plan that tackled particular risks and provided strong safeguards for essential assets and client information.",
+    "highlightedText": "Tech4Biz employed AI-driven security solutions, such as Threat Intelligence Platforms (TIP) and Security Information and Event Management (SIEM) systems, to deliver immediate threat identification and flexible defense strategies.",
+    "additionalInfo": "We implemented robust encryption protocols for data both at rest and in transit. This method protected confidential business and customer data, greatly lowering the chances of data breaches during security events.",
+    "testimonial": {
+      "quote": "At Tech4Biz Solutions, we integrate AI-powered security tools, continuous monitoring, and comprehensive encryption to actively combat emerging cyber threats, safeguarding vital data while equipping employees with training to identify and reduce risks before they worsen.",
+      "author": "John Smith",
+      "role": "Chief Information Security Officer"
+    }
+  },
+  "conclusion": {
+    "mainText": "Cyber threats are unavoidable, but with Tech4Biz Solutions supporting you, you can remain proactive against possible dangers. Through the integration of AI-driven defense, cloud security, and live monitoring, we equip companies with the resources necessary to protect against cyber threats, guaranteeing a safe and robust digital future.",
+    "callToAction": "If your company aims to secure its functions and defend important information against cyber risks, reach out to Tech4Biz Solutions now to discover how we can improve your cybersecurity approach.",
+    "pdfDownload": {
+      "label": "Download PDF",
+      "url": "/path/to/cybersecurity-whitepaper.pdf"
+    }
+  },
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/edgeComputing.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/edgeComputing.json
new file mode 100644
index 0000000..7a0edb0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/edgeComputing.json
@@ -0,0 +1,97 @@
+{
+  "metadata": {
+    "title": "Edge Computing Solutions for Smart Manufacturing | Tech4Biz",
+    "description": "A Case Study on Decentralized Processing and Edge Computing Implementation",
+    "keywords": "edge computing, manufacturing, decentralized processing, IoT, smart manufacturing"
+  },
+  "overview": {
+    "title": "Edge Computing Solutions for Smart Manufacturing",
+    "subtitle": "Decentralized Processing & Edge Computing",
+    "mainDescription": "Transforming manufacturing methods through decentralized processing and edge computing implementation.",
+    "extendedDescription": "Decentralized processing and edge computing are transforming manufacturing methods by enabling faster data processing at the source, reducing latency, and improving overall system efficiency. This case study explores how integrating edge computing and decentralized processing in manufacturing enhances real-time decision-making, streamlines operations, and boosts productivity by minimizing the reliance on centralized cloud systems.",
+    "image": "/images/casestudies/optimizing-manufacturing-methods.webp"
+  },
+  "benefits": {
+    "title": "Key Benefits of Decentralized Processing and Edge Computing in Manufacturing",
+    "items": [
+      {
+        "title": "Reduced Latency",
+        "description": "Processing data closer to the source reduces latency, enabling faster decision-making and more responsive manufacturing systems."
+      },
+      {
+        "title": "Cost Savings",
+        "description": "By reducing the reliance on centralized cloud systems for data storage and processing, manufacturers can lower infrastructure and bandwidth costs."
+      },
+      {
+        "title": "Improved Productivity",
+        "description": "Real-time data analysis at the edge allows for quick adjustments to manufacturing processes, increasing overall productivity and minimizing inefficiencies."
+      },
+      {
+        "title": "Enhanced Quality Control",
+        "description": "Real-time monitoring and predictive analytics improve product quality by enabling quick detection and correction of defects during the manufacturing process."
+      }
+    ]
+  },
+  "solution": {
+    "title": "Effective Solutions for Optimizing Manufacturing with Edge Computing",
+    "description": "Robust Security Frameworks: To address security concerns, manufacturers can implement end-to-end encryption, secure data storage, and secure access controls to protect sensitive information at the edge.",
+    "highlightedText": "Edge-to-Cloud Integration: A hybrid approach that connects edge devices with cloud-based systems can help maintain a balance between decentralized and centralized data processing.",
+    "additionalInfo": "Smart Sensors and IoT Integration enable continuous monitoring of manufacturing equipment and systems, providing actionable insights for better decision-making.",
+    "testimonial": {
+      "quote": "Edge computing has revolutionized our manufacturing processes, enabling real-time decision making and significant improvements in operational efficiency.",
+      "author": "James Wilson",
+      "role": "Manufacturing Operations Director"
+    }
+  },
+  "conclusion": {
+    "mainText": "The integration of decentralized processing and edge computing is revolutionizing manufacturing by driving efficiency, reducing latency, and enabling real-time decision-making. Despite challenges such as data security and system integration, manufacturers can overcome these hurdles with the right solutions.",
+    "callToAction": "By adopting edge computing technologies, manufacturers can enhance their operations, improve productivity, and achieve significant cost savings while maintaining high-quality standards. As technology continues to evolve, edge computing will remain a pivotal tool in optimizing manufacturing processes.",
+    "pdfDownload": {
+      "label": "Download Edge Computing in Manufacturing Whitepaper",
+      "url": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Decentralized%20Processing%20with%20Edge%20Computing%20in%20Manufacturing.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "Edge Computing Security",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/edge-computing-security"
+      },
+      {
+        "title": "Smart Manufacturing",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/smart-manufacturing"
+      },
+      {
+        "title": "IoT in Manufacturing",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/iot-manufacturing"
+      },
+      {
+        "title": "Real-time Analytics",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/realtime-analytics"
+      }
+    ]
+  },
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/fitnessTraining.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/fitnessTraining.json
new file mode 100644
index 0000000..84e3b9c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/fitnessTraining.json
@@ -0,0 +1,97 @@
+{
+  "metadata": {
+    "title": "AR & VR in Fitness Training | Tech4Biz",
+    "description": "Revolutionizing Instructor Education via Immersive Simulations",
+    "keywords": "AR, VR, fitness training, instructor education, immersive simulations"
+  },
+  "overview": {
+    "title": "Improving Fitness Training with AR & VR",
+    "subtitle": "Revolutionizing Instructor Education",
+    "mainDescription": "Transforming Fitness Training and Instructor Education with AR & VR",
+    "extendedDescription": "Augmented Reality (AR) and Virtual Reality (VR) are transforming the fitness industry by offering immersive, interactive training experiences that improve learning outcomes and engagement. With AR & VR for fitness training, both trainees and instructors can benefit from real-time feedback, personalized learning, and enhanced motivation. For fitness instructors, these technologies provide powerful tools for practical technique simulation, skill development, and continuous improvement through virtual training environments, offering an innovative approach to instructor education.",
+    "image": "/images/casestudies/fitness_3.webp"
+  },
+  "benefits": {
+    "title": "Key Benefits of AR & VR in Fitness Training and Instructor Education",
+    "items": [
+      {
+        "title": "Immersive Learning Experience",
+        "description": "AR & VR enable users to practice and perfect movements in a virtual setting, enhancing skill development and boosting confidence before applying techniques in the real world. Immersive learning increases engagement, leading to better results in fitness training."
+      },
+      {
+        "title": "Increased Engagement and Motivation",
+        "description": "Gamified features in AR & VR fitness apps make training more enjoyable, increasing long-term participant engagement and motivation, which can lead to better results for both trainees and instructors."
+      },
+      {
+        "title": "Real-Time Feedback",
+        "description": "Instant performance tracking and feedback allow trainees and instructors to refine techniques quickly, resulting in improved training outcomes and more effective teaching methods."
+      },
+      {
+        "title": "Scalable and Flexible Learning",
+        "description": "AR & VR-based training can be done anytime and anywhere, providing fitness centers with scalable solutions for offering personalized training sessions. This flexibility makes it easier for fitness professionals to manage large groups and individual training needs."
+      }
+    ]
+  },
+  "solution": {
+    "title": "Solutions for Overcoming Barriers in AR & VR Fitness Training",
+    "description": "Affordable Hardware and Software Options: By exploring more cost-effective VR headsets and AR apps, fitness centers can make these technologies more accessible to a broader range of users.",
+    "highlightedText": "Cloud-Based Solutions: Cloud platforms allow fitness centers to provide scalable AR & VR solutions without needing to invest in expensive hardware upgrades.",
+    "additionalInfo": "User-Friendly Interfaces and Partnerships for Training and Support help organizations overcome initial hurdles and offer AR & VR-based instructor education seamlessly.",
+    "testimonial": {
+      "quote": "AR & VR technology has revolutionized how we train our fitness instructors and deliver personalized experiences to our clients.",
+      "author": "Sarah Johnson",
+      "role": "Head of Fitness Innovation"
+    }
+  },
+  "conclusion": {
+    "mainText": "AR & VR technologies are reshaping the future of fitness training and instructor education, offering immersive, efficient, and scalable solutions. Despite challenges such as high initial costs and technical barriers, the advantages make AR & VR a game-changer for the fitness industry.",
+    "callToAction": "As these technologies become more affordable and accessible, they will play a pivotal role in the next generation of fitness training and instructor development, helping both trainees and instructors achieve their goals more effectively.",
+    "pdfDownload": {
+      "label": "Download AR & VR Fitness Training Whitepaper",
+      "url": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Transforming%20Fitness%20Training%20with%20AR%20-%20VR.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "Future of VR in Fitness",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/vr-fitness-future"
+      },
+      {
+        "title": "AR Applications in Training",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/ar-training-applications"
+      },
+      {
+        "title": "Immersive Learning Benefits",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/immersive-learning"
+      },
+      {
+        "title": "Digital Fitness Innovation",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/digital-fitness"
+      }
+    ]
+  },
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/healthcareManagement.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/healthcareManagement.json
new file mode 100644
index 0000000..215fbd3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/healthcareManagement.json
@@ -0,0 +1,97 @@
+{
+  "metadata": {
+    "title": "AWS Cloud Healthcare Data Management | Tech4Biz",
+    "description": "Secure and Efficient Healthcare Data Management Solutions with AWS Cloud",
+    "keywords": "AWS healthcare, cloud data management, healthcare IT, HIPAA compliance, medical data security"
+  },
+  "overview": {
+    "title": "AWS Cloud Healthcare Data Management",
+    "subtitle": "Healthcare Innovation",
+    "mainDescription": "Transforming healthcare data management with secure and scalable AWS cloud solutions.",
+    "extendedDescription": "AWS Cloud is revolutionizing healthcare data management by providing secure, compliant, and efficient solutions for handling sensitive medical information. With advanced features for data encryption, storage, and processing, AWS helps healthcare organizations maintain HIPAA compliance while improving operational efficiency. The platform offers comprehensive tools for managing electronic health records, medical imaging, and clinical data, enabling healthcare providers to focus on delivering quality patient care.",
+    "image": "/images/casestudies/enhancing-healthcare-data-management.webp"
+  },
+  "benefits": {
+    "title": "Key Benefits of AWS Cloud for Healthcare Data Management",
+    "items": [
+      {
+        "title": "Improved Data Security",
+        "description": "AWS ensures healthcare data is securely encrypted, stored, and transmitted, meeting HIPAA and other healthcare compliance standards."
+      },
+      {
+        "title": "Cost Efficiency",
+        "description": "With AWS's pay-as-you-go model, healthcare providers can save on infrastructure costs, only paying for the resources they use."
+      },
+      {
+        "title": "Seamless Data Access and Collaboration",
+        "description": "AWS enables healthcare providers to access patient data anytime, anywhere, improving collaboration and streamlining workflows across departments."
+      },
+      {
+        "title": "Enhanced Scalability",
+        "description": "With AWS's elastic scalability, healthcare organizations can easily adjust their storage and processing capacity to meet changing demands, ensuring smooth operations during peak times."
+      }
+    ]
+  },
+  "solution": {
+    "title": "AWS Solutions for Healthcare Data Management",
+    "description": "Data Integration Tools: AWS Glue and Amazon Redshift enable seamless data integration, helping healthcare organizations connect disparate systems and manage data effectively on the cloud.",
+    "highlightedText": "Scalable Cloud Infrastructure: AWS allows healthcare organizations to scale their data infrastructure dynamically, without the need for costly and complex on-premises data centers.",
+    "additionalInfo": "AWS provides comprehensive backup and disaster recovery solutions, ensuring critical healthcare data can be quickly restored during system failures or outages.",
+    "testimonial": {
+      "quote": "AWS Cloud has transformed our healthcare data management, enabling us to provide better patient care while maintaining the highest security standards.",
+      "author": "Dr. Michael Roberts",
+      "role": "Chief Medical Information Officer"
+    }
+  },
+  "conclusion": {
+    "mainText": "AWS Cloud is transforming healthcare data management by offering secure, scalable, and cost-efficient solutions. By addressing challenges such as data security, integration, and regulatory compliance, AWS helps healthcare organizations manage vast amounts of sensitive data while improving efficiency.",
+    "callToAction": "As cloud adoption increases in healthcare, AWS will continue to play a pivotal role in improving patient care, enhancing data management processes, and driving innovation.",
+    "pdfDownload": {
+      "label": "Download Healthcare Cloud Management Whitepaper",
+      "url": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Empowering%20HealthCare%20Data%20Management.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "HIPAA Compliance in Cloud",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/hipaa-cloud-compliance"
+      },
+      {
+        "title": "Healthcare Data Security",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/healthcare-data-security"
+      },
+      {
+        "title": "Cloud Innovation in Healthcare",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/healthcare-cloud-innovation"
+      },
+      {
+        "title": "Digital Health Transformation",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/digital-health"
+      }
+    ]
+  },
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/index.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/index.js
new file mode 100644
index 0000000..43b4932
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/index.js
@@ -0,0 +1,23 @@
+import urbanConnectivityConfig from './urbanConnectivity.json';
+import blockchainTechnologyConfig from './blockchainTechnology.json';
+import iotConnectivityConfig from './iotConnectivity.json';
+import fitnessTrainingConfig from './fitnessTraining.json';
+import healthcareManagementConfig from './healthcareManagement.json';
+import edgeComputingConfig from './edgeComputing.json';
+import manufacturingAutomationConfig from './manufacturingAutomation.json';
+import visualizationTechnologyConfig from './visualizationTechnology.json';
+
+export const configs = {
+  'urban-connectivity': urbanConnectivityConfig,
+  'blockchain-technology': blockchainTechnologyConfig,
+  'iot-connectivity': iotConnectivityConfig,
+  'fitness-training': fitnessTrainingConfig,
+  'healthcare-management': healthcareManagementConfig,
+  'edge-computing': edgeComputingConfig,
+  'manufacturing-automation': manufacturingAutomationConfig,
+  'ar-visualization': visualizationTechnologyConfig,
+};
+
+export const getServiceConfig = (serviceId) => {
+  return configs[serviceId] || null;
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/iotConnectivity.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/iotConnectivity.json
new file mode 100644
index 0000000..b14166e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/iotConnectivity.json
@@ -0,0 +1,98 @@
+{
+  "metadata": {
+    "title": "Enhancing IoT Connectivity through Advanced BLE Board Architecture | Tech4Biz",
+    "description": "A Case Study on Increased Efficiency and Reliability in IoT Connectivity",
+    "keywords": "IoT connectivity, BLE technology, smart homes, healthcare, automation"
+  },
+  "overview": {
+    "title": "Revolutionizing IoT Connectivity with Advanced BLE Board Architecture",
+    "subtitle": "IoT Innovation",
+    "mainDescription": "Bluetooth Low Energy (BLE) is a crucial technology for enabling low-power, reliable wireless communication in IoT devices.",
+    "extendedDescription": "Advanced BLE board architecture enhances IoT connectivity, improving performance through better efficiency, scalability, and security. These boards are designed to handle high-density device environments, ensuring optimized transmission and reducing interference, critical for the future of IoT networks.",
+    "image": "/images/casestudies/iotconnecctivity_4.webp"
+  },
+  "benefits": {
+    "title": "Top Benefits of Using Advanced BLE Boards for Reliable IoT Connectivity",
+    "items": [
+      {
+        "title": "Improved Range and Connectivity",
+        "description": "Advanced BLE boards provide extended communication ranges and stable connections, even in high-density environments with multiple devices. This ensures reliable IoT performance, crucial for applications in smart homes and healthcare."
+      },
+      {
+        "title": "Enhanced Energy Efficiency",
+        "description": "The low-power consumption of BLE ensures IoT devices can operate longer on a single charge, reducing maintenance costs and extending the device's battery life—key benefits for large-scale deployments."
+      },
+      {
+        "title": "Scalable IoT Networks",
+        "description": "BLE mesh networking enables seamless device integration, allowing for the creation of large-scale IoT networks. This scalability ensures that your IoT infrastructure can grow as your business expands."
+      },
+      {
+        "title": "Reliable Data Transmission",
+        "description": "Advanced BLE boards enhance data transmission, reducing signal loss and improving the reliability of data—essential for high-priority applications such as smart grids and remote patient monitoring."
+      }
+    ]
+  },
+  "solution": {
+    "title": "Solving IoT Connectivity Challenges with Advanced BLE Technology",
+    "description": "Layer 2 Scalability with BLE Mesh: Implementing BLE mesh networking enables IoT devices to communicate efficiently in large networks, improving scalability and performance in high-density environments.",
+    "highlightedText": "Optimized Power Management: Techniques such as adaptive duty cycling and energy-efficient data transmission extend the battery life of BLE-powered IoT devices, ensuring that devices can function without frequent recharging.",
+    "additionalInfo": "Frequency Hopping for Interference Reduction: Advanced BLE boards use frequency hopping and intelligent channel selection to reduce interference, ensuring stable and reliable communication in crowded wireless environments.",
+    "testimonial": {
+      "quote": "Enhanced Device Integration: With advanced communication protocols, BLE boards enable smooth integration of numerous IoT devices, improving overall network performance and simplifying deployment.",
+      "author": "Jane Doe",
+      "role": "IoT Solutions Architect"
+    }
+  },
+  "conclusion": {
+    "mainText": "Advanced BLE board architecture is transforming IoT connectivity by improving scalability, energy efficiency, and data transmission.",
+    "callToAction": "As IoT applications continue to grow, leveraging BLE boards will enable businesses to address connectivity challenges and build more robust and efficient networks.",
+    "pdfDownload": {
+      "label": "Download IoT Connectivity Whitepaper",
+      "url": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Revamping%20IoT%20Connectivity%20with%20Redesigned%20BLE%20Board.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "Challenges in IoT Connectivity",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/iot-connectivity-challenges"
+      },
+      {
+        "title": "BLE Technology in Smart Homes",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/ble-smart-homes"
+      },
+      {
+        "title": "Future of IoT Networks",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/iot-networks-future"
+      },
+      {
+        "title": "IoT and Healthcare Integration",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/iot-healthcare"
+      }
+    ]
+  },
+  "heroImage": "/path/to/iot-hero-image.jpg",
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/manufacturingAutomation.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/manufacturingAutomation.json
new file mode 100644
index 0000000..c0bf143
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/manufacturingAutomation.json
@@ -0,0 +1,97 @@
+{
+  "metadata": {
+    "title": "RPA in Manufacturing Processes | Tech4Biz",
+    "description": "Enhancing Manufacturing Processes with RPA: Achieving Efficiency and Customer Satisfaction",
+    "keywords": "RPA, manufacturing automation, process automation, manufacturing efficiency, industrial automation"
+  },
+  "overview": {
+    "title": "Enhancing Manufacturing Processes with RPA",
+    "subtitle": "Automation Excellence",
+    "mainDescription": "Achieving Efficiency and Customer Satisfaction via Automation",
+    "extendedDescription": "Robotic Process Automation (RPA) is revolutionizing manufacturing by automating repetitive tasks, streamlining workflows, and improving operational efficiency. By reducing manual interventions and human errors, RPA enables manufacturers to achieve higher accuracy, faster turnaround times, and greater customer satisfaction in their production processes.",
+    "image": "/images/casestudies/enhancing-manufacturing-processes-with-rpa.webp"
+  },
+  "benefits": {
+    "title": "Top Benefits of Using RPA to Enhance Manufacturing Processes",
+    "items": [
+      {
+        "title": "Improved Efficiency",
+        "description": "RPA automates repetitive tasks, speeding up production timelines and reducing bottlenecks in manufacturing processes."
+      },
+      {
+        "title": "Increased Accuracy",
+        "description": "Automation ensures consistent and error-free operations, improving product quality and reducing the risk of costly mistakes."
+      },
+      {
+        "title": "Cost Savings",
+        "description": "By minimizing manual labor and streamlining workflows, RPA can lead to significant cost reductions in both operational and administrative tasks."
+      },
+      {
+        "title": "Enhanced Customer Satisfaction",
+        "description": "Faster production cycles, fewer errors, and improved product quality result in higher customer satisfaction and loyalty."
+      }
+    ]
+  },
+  "solution": {
+    "title": "Effective Solutions to Overcome Challenges in RPA Adoption",
+    "description": "System Integration and Upgrades: Manufacturers should invest in integrating RPA tools with existing systems or upgrade legacy infrastructure to ensure compatibility, ensuring a smooth transition to automated processes.",
+    "highlightedText": "Change Management and Training: Implementing a comprehensive change management strategy, including employee training and awareness programs, helps overcome resistance and fosters acceptance of RPA technologies.",
+    "additionalInfo": "Pilot Testing and Iterative Deployment allows manufacturers to troubleshoot issues before full-scale implementation, minimizing operational risks.",
+    "testimonial": {
+      "quote": "RPA implementation has transformed our manufacturing processes, leading to unprecedented levels of efficiency and customer satisfaction.",
+      "author": "Sarah Thompson",
+      "role": "Head of Manufacturing Operations"
+    }
+  },
+  "conclusion": {
+    "mainText": "Robotic Process Automation is a powerful tool for transforming manufacturing processes and delivering measurable improvements in efficiency, accuracy, and customer satisfaction. While there are challenges in integrating RPA with legacy systems and overcoming employee resistance, manufacturers can implement tailored solutions to ensure successful adoption.",
+    "callToAction": "The benefits of RPA, including cost savings, scalability, and enhanced customer satisfaction, make it an essential technology for modern manufacturers looking to stay competitive in an increasingly automated world.",
+    "pdfDownload": {
+      "label": "Download Manufacturing RPA Whitepaper",
+      "url": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Automating%20Manufacturing%20Excellence.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "RPA Implementation Guide",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/rpa-implementation"
+      },
+      {
+        "title": "Manufacturing Automation",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/manufacturing-automation"
+      },
+      {
+        "title": "RPA Success Stories",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/rpa-success-stories"
+      },
+      {
+        "title": "Future of Manufacturing",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/future-manufacturing"
+      }
+    ]
+  },
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/urbanConnectivity.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/urbanConnectivity.json
new file mode 100644
index 0000000..1c1ecca
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/urbanConnectivity.json
@@ -0,0 +1,97 @@
+{
+  "metadata": {
+    "title": "5G Technology in City Connectivity | Tech4Biz",
+    "description": "A Study on Improving Infrastructure and Urban Services with 5G Technology",
+    "keywords": "5G technology, urban connectivity, smart cities, infrastructure, urban services"
+  },
+  "overview": {
+    "title": "5G Technology in City Connectivity",
+    "subtitle": "Urban Infrastructure",
+    "mainDescription": "How 5G technology is revolutionizing city connectivity and enhancing urban services.",
+    "extendedDescription": "5G technology enables faster and more reliable connectivity for urban infrastructure, transforming essential services such as healthcare, transportation, and energy management. By providing high-speed, low-latency communication, 5G networks improve the efficiency and effectiveness of these key sectors. The advent of 5G is driving the development of smart cities, seamlessly integrating IoT devices, enabling real-time data exchange, and significantly boosting urban efficiency. This innovation is paving the way for more sustainable and efficient cities worldwide.",
+    "image": "/images/casestudies/urban-connectivity_6.webp"
+  },
+  "benefits": {
+    "title": "Exploring the Benefits of 5G for Smart Cities and Urban Living",
+    "items": [
+      {
+        "title": "Enhanced Urban Mobility",
+        "description": "5G technology enables real-time communication between vehicles, traffic lights, and road sensors, significantly enhancing urban mobility. This leads to improved traffic flow, reduced congestion, and fewer accidents, making cities more efficient and safer for residents."
+      },
+      {
+        "title": "Advanced Healthcare Services",
+        "description": "In healthcare, 5G technology facilitates telemedicine, remote surgery, and continuous patient monitoring. These advanced technologies provide better access to healthcare, improve patient outcomes, and help deliver medical services remotely, especially in underserved areas."
+      },
+      {
+        "title": "Improved Public Safety",
+        "description": "For public safety, real-time video streaming and data sharing allow emergency responders to access faster and more accurate information. This enables them to make informed decisions during crisis management, enhancing the overall safety of urban areas."
+      },
+      {
+        "title": "Smart Energy Management",
+        "description": "Smart energy grids, powered by 5G connectivity, optimize energy usage, integrate renewable energy sources, and eliminate waste. These solutions contribute to more sustainable cities and improve energy efficiency, ensuring a cleaner and greener future."
+      }
+    ]
+  },
+  "solution": {
+    "title": "Effective Solutions to Overcome 5G Deployment Challenges",
+    "description": "Public-private partnerships between governments and private enterprises can help secure funding, streamline regulatory processes, and ensure equitable access to 5G technology in both urban and underserved regions.",
+    "highlightedText": "To ensure the safe and widespread adoption of 5G, governments must establish uniform regulatory frameworks that address essential concerns such as privacy safeguards, spectrum management, and cybersecurity regulations.",
+    "additionalInfo": "Enhanced cybersecurity measures, such as encryption, network slicing, and AI-driven threat detection, are essential for protecting 5G networks from intrusions and ensuring the security of vital urban data.",
+    "testimonial": {
+      "quote": "The implementation of 5G technology has transformed our city's infrastructure, enabling us to provide more efficient and innovative services to our citizens.",
+      "author": "Dr. Emily Chen",
+      "role": "Director of Urban Innovation"
+    }
+  },
+  "conclusion": {
+    "mainText": "5G technology has enormous potential for altering urban environments by boosting infrastructure and services. 5G has the potential to help cities become smarter and more sustainable by providing quicker transmission, real-time data processing, and huge device connectivity.",
+    "callToAction": "However, its successful integration will necessitate overcoming cost, regulatory, security, and equity barriers. As cities adopt 5G, the potential for innovation and enhancement in urban life grows exponentially, transforming the cities of tomorrow.",
+    "pdfDownload": {
+      "label": "Download 5G Urban Connectivity Whitepaper",
+      "url": "https://s3.blr.cloudtopiaa.com:6780/swift/v1/AUTH_02a111ba8aca4efcbc139b77a7b37f30/Assets-Tech4biz/docs/Transforming%20Urban%20Connectivity.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "Challenges in Deploying 5G Networks",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/5g-deployment-challenges"
+      },
+      {
+        "title": "Smart Cities and 5G Integration",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/smart-cities-5g"
+      },
+      {
+        "title": "Future of Urban Connectivity",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/urban-connectivity-future"
+      },
+      {
+        "title": "5G Impact on Public Services",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/5g-public-services"
+      }
+    ]
+  },
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/visualizationTechnology.json b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/visualizationTechnology.json
new file mode 100644
index 0000000..e6e0391
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/configs/visualizationTechnology.json
@@ -0,0 +1,97 @@
+{
+  "metadata": {
+    "title": "Data Visualization Technology Solutions | Tech4Biz",
+    "description": "Advanced Data Visualization Solutions for Business Intelligence and Analytics",
+    "keywords": "data visualization, business intelligence, analytics, interactive dashboards, visual analytics, big data visualization"
+  },
+  "overview": {
+    "title": "Advanced Data Visualization Solutions",
+    "subtitle": "Business Intelligence & Analytics",
+    "mainDescription": "Transform complex data into actionable insights through cutting-edge visualization technology.",
+    "extendedDescription": "Modern data visualization technology empowers organizations to transform complex datasets into clear, actionable insights. Through interactive dashboards, real-time analytics, and immersive visual representations, businesses can better understand trends, patterns, and correlations within their data. Our advanced visualization solutions combine cutting-edge technology with user-friendly interfaces, enabling better decision-making and improved business outcomes across all organizational levels.",
+    "image": "/images/casestudies/ar-visualization.webp"
+  },
+  "benefits": {
+    "title": "Key Benefits of Advanced Data Visualization Technology",
+    "items": [
+      {
+        "title": "Enhanced Decision Making",
+        "description": "Interactive visualizations enable faster and more informed decision-making by presenting complex data in easily digestible formats. Real-time updates and dynamic filtering capabilities allow stakeholders to explore data from multiple angles."
+      },
+      {
+        "title": "Improved Data Accessibility",
+        "description": "User-friendly interfaces and intuitive visualization tools make data accessible to all stakeholders, regardless of technical expertise. This democratization of data promotes better collaboration and insights across departments."
+      },
+      {
+        "title": "Real-Time Analytics",
+        "description": "Live data visualization capabilities enable organizations to monitor key metrics in real-time, identifying trends and responding to changes immediately. This agility is crucial for maintaining competitive advantage in today's fast-paced business environment."
+      },
+      {
+        "title": "Pattern Recognition",
+        "description": "Advanced visualization techniques help identify hidden patterns and correlations in complex datasets, enabling predictive analytics and strategic planning based on comprehensive data analysis."
+      }
+    ]
+  },
+  "solution": {
+    "title": "Comprehensive Visualization Technology Solutions",
+    "description": "Our visualization solutions integrate seamlessly with existing data infrastructure, providing scalable and customizable tools for data analysis and presentation.",
+    "highlightedText": "From interactive dashboards to immersive 3D visualizations, our technology stack enables organizations to create compelling visual narratives from their data.",
+    "additionalInfo": "Advanced features include AI-powered analytics, customizable reporting tools, and cross-platform compatibility for maximum flexibility and utility.",
+    "testimonial": {
+      "quote": "The visualization solutions have transformed how we analyze and present data, leading to more informed decisions and better business outcomes.",
+      "author": "David Martinez",
+      "role": "Chief Analytics Officer"
+    }
+  },
+  "conclusion": {
+    "mainText": "Data visualization technology is revolutionizing how organizations understand and utilize their data. By transforming complex information into clear, actionable insights, businesses can make better decisions and drive innovation.",
+    "callToAction": "Embrace the power of modern visualization technology to unlock the full potential of your data and gain a competitive edge in today's data-driven business landscape.",
+    "pdfDownload": {
+      "label": "Download Data Visualization Technology Guide",
+      "url": "/path/to/visualization-technology-guide.pdf"
+    }
+  },
+  "relatedArticles": {
+    "title": "Related Reading",
+    "articles": [
+      {
+        "title": "Interactive Dashboard Design",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/interactive-dashboards"
+      },
+      {
+        "title": "Big Data Visualization",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/big-data-visualization"
+      },
+      {
+        "title": "AI in Data Analytics",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/ai-data-analytics"
+      },
+      {
+        "title": "Future of Visual Analytics",
+        "image": "/placeholder.svg?height=200&width=300",
+        "link": "/articles/visual-analytics-future"
+      }
+    ]
+  },
+  "partnerLogos": [
+    {
+      "name": "AWS",
+      "image": "/images/logos/aws.webp"
+    },
+    {
+      "name": "IBM",
+      "image": "/images/logos/ibm.webp"
+    },
+    {
+      "name": "OpenAI",
+      "image": "/images/logos/openai.webp"
+    },
+    {
+      "name": "Azure",
+      "image": "/images/logos/azure.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/hooks/useServiceConfig.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/hooks/useServiceConfig.js
new file mode 100644
index 0000000..96ef7a7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/hooks/useServiceConfig.js
@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import { getServiceConfig } from '../configs';
+
+const useServiceConfig = (serviceId) => {
+  const [state, setState] = useState({
+    serviceData: null,
+    isLoading: true,
+    error: null
+  });
+
+  useEffect(() => {
+    const loadConfig = async () => {
+      try {
+        if (!serviceId) {
+          throw new Error('Service ID is required');
+        }
+
+        const config = getServiceConfig(serviceId);
+        
+        if (!config) {
+          throw new Error(`Configuration not found for service: ${serviceId}`);
+        }
+
+        setState({
+          serviceData: config,
+          isLoading: false,
+          error: null
+        });
+      } catch (error) {
+        setState({
+          serviceData: null,
+          isLoading: false,
+          error: error.message
+        });
+      }
+    };
+
+    loadConfig();
+  }, [serviceId]);
+
+  return state;
+};
+
+export default useServiceConfig;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/index.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/index.js
new file mode 100644
index 0000000..1bb0e97
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/index.js
@@ -0,0 +1,19 @@
+// Main components
+export { default as ServiceIntroduction } from './components/ServiceIntroduction/ServiceIntroduction';
+export { default as ServiceBenefits } from './components/ServiceBenefits/ServiceBenefits';
+export { default as RelatedArticles } from './components/RelatedArticles/RelatedArticles';
+export { default as ServiceSolution } from './components/ServiceSolution/ServiceSolution';
+export { default as ServiceConclusion } from './components/ServiceConclusion/ServiceConclusion';
+export { default as CallToAction } from './components/CallToAction/CallToAction';
+
+// Shared components
+export { default as SocialShare } from './shared/SocialShare/SocialShare';
+
+// Sub-components
+export { default as Testimonial } from './components/ServiceSolution/Testimonial';
+
+// Animations
+export * from './shared/animations/motionVariants';
+
+// Constants
+export * from './shared/constants/socialLinks'; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/SocialShare/SocialShare.jsx b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/SocialShare/SocialShare.jsx
new file mode 100644
index 0000000..fd998e8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/SocialShare/SocialShare.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { useLocation } from 'react-router-dom';
+import { fadeIn } from '../animations/motionVariants';
+import { socialLinks } from '../constants/socialLinks';
+import { handleShare } from '../../utils/socialShare';
+
+const iconVariants = {
+  hover: { y: -5, transition: { duration: 0.2 } }
+};
+
+const SocialShare = ({ serviceData }) => {
+  const location = useLocation();
+  const currentUrl = `${window.location.origin}${location.pathname}`;
+
+  return (
+    <motion.div
+      variants={fadeIn}
+      className="flex items-center justify-center space-x-4 py-6"
+    >
+      <h3 className="text-sm font-semibold text-gray-600 mr-2">
+        Share this service:
+      </h3>
+      <div className="flex space-x-3">
+        {socialLinks.map((link, index) => (
+          <motion.a
+            key={index}
+            onClick={(e) => {
+              e.preventDefault();
+              handleShare(link.platform, serviceData, currentUrl);
+            }}
+            href="#"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-gray-500 hover:text-gray-700 transition-colors duration-200"
+            whileHover="hover"
+          >
+            <motion.div variants={iconVariants}>
+              <link.icon className="h-6 w-6" />
+            </motion.div>
+          </motion.a>
+        ))}
+      </div>
+    </motion.div>
+  );
+};
+
+export default SocialShare;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/animations/motionVariants.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/animations/motionVariants.js
new file mode 100644
index 0000000..b7af2e5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/animations/motionVariants.js
@@ -0,0 +1,23 @@
+export const fadeIn = {
+  hidden: { 
+    opacity: 0, 
+    y: 20 
+  },
+  visible: { 
+    opacity: 1, 
+    y: 0,
+    transition: { 
+      duration: 0.6, 
+      ease: "easeOut" 
+    }
+  }
+};
+
+export const iconVariants = {
+  hover: { 
+    y: -5, 
+    transition: { 
+      duration: 0.2 
+    } 
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/constants/socialLinks.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/constants/socialLinks.js
new file mode 100644
index 0000000..f742209
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/shared/constants/socialLinks.js
@@ -0,0 +1,24 @@
+import { Twitter, Linkedin, Facebook, Mail } from 'lucide-react';
+
+export const socialLinks = [
+  {
+    platform: 'twitter',
+    icon: Twitter,
+    label: 'Share on Twitter'
+  },
+  {
+    platform: 'linkedin',
+    icon: Linkedin,
+    label: 'Share on LinkedIn'
+  },
+  {
+    platform: 'facebook',
+    icon: Facebook,
+    label: 'Share on Facebook'
+  },
+  {
+    platform: 'email',
+    icon: Mail,
+    label: 'Share via Email'
+  }
+]; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/getSliderSchema.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/getSliderSchema.js
new file mode 100644
index 0000000..c66233a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/getSliderSchema.js
@@ -0,0 +1,33 @@
+/**
+ * Generates structured data (JSON‑LD) for the slider detail page.
+ *
+ * @param {Object} serviceData - The current slider detail data object.
+ * @returns {Object} The JSON‑LD structured data object.
+ */
+export const getSliderSchema = (serviceData) => {
+  const { overview, metadata } = serviceData;
+  return {
+    "@context": "https://schema.org",
+    "@type": "TechArticle", // You can also use "TechArticle" if appropriate
+    "mainEntityOfPage": {
+      "@type": "WebPage",
+      "@id": typeof window !== "undefined" ? window.location.href : ""
+    },
+    "headline": overview.title,
+    "description": metadata.description || overview.mainDescription,
+    "image": [overview.image],
+    "author": {
+      "@type": "Organization",
+      "name": "Tech4biz Solutions"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "Tech4biz Solutions",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "/images/logos/logo-light.webp"
+      }
+    },
+    "datePublished": serviceData.datePublished || new Date().toISOString()
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/serviceMapper.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/serviceMapper.js
new file mode 100644
index 0000000..b3e42eb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/serviceMapper.js
@@ -0,0 +1,78 @@
+import { slugify } from './slugify';
+
+/**
+ * Maps raw service configuration data into the format expected by components
+ * @param {Object} config - Raw service configuration
+ * @returns {Object} Mapped service data
+ */
+export const mapServiceData = (config) => {
+  if (!config) {
+    throw new Error('No configuration provided');
+  }
+
+  try {
+    return {
+      ...config,
+      id: config.id,
+      slug: slugify(config.id),
+      metadata: {
+        ...config.metaData,
+        canonicalUrl: `/services/${slugify(config.id)}`
+      },
+      overview: {
+        ...config.overview,
+        id: 'overview',
+        slug: slugify(config.overview.title)
+      },
+      benefits: {
+        ...config.benefits,
+        id: 'benefits',
+        items: config.benefits.items.map((item, index) => ({
+          ...item,
+          id: `benefit-${index + 1}`,
+          slug: slugify(item.title)
+        }))
+      },
+      relatedArticles: {
+        ...config.relatedArticles,
+        articles: config.relatedArticles.articles.map((article, index) => ({
+          ...article,
+          id: `article-${index + 1}`,
+          slug: slugify(article.title)
+        }))
+      },
+      solution: {
+        ...config.solution,
+        id: 'solution',
+        slug: slugify(config.solution.title)
+      }
+    };
+  } catch (error) {
+    throw new Error(`Error mapping service data: ${error.message}`);
+  }
+};
+
+/**
+ * Validates that a service configuration has all required fields
+ * @param {Object} config - Service configuration to validate
+ * @returns {boolean} Whether the config is valid
+ * @throws {Error} If config is invalid
+ */
+export const validateServiceConfig = (config) => {
+  const requiredFields = [
+    'id',
+    'metaData',
+    'overview',
+    'benefits',
+    'solution',
+    'relatedArticles'
+  ];
+
+  const missingFields = requiredFields.filter(field => !config[field]);
+
+  if (missingFields.length > 0) {
+    throw new Error(`Missing required fields: ${missingFields.join(', ')}`);
+  }
+
+  return true;
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/slugify.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/slugify.js
new file mode 100644
index 0000000..fdae161
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/slugify.js
@@ -0,0 +1,27 @@
+/**
+ * Converts a string into a URL-friendly slug
+ * @param {string} text - The text to convert into a slug
+ * @returns {string} The slugified text
+ */
+export const slugify = (text) => {
+  return text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-')        // Replace spaces with -
+    .replace(/[^\w\-]+/g, '')    // Remove all non-word chars
+    .replace(/\-\-+/g, '-')      // Replace multiple - with single -
+    .replace(/^-+/, '')          // Trim - from start of text
+    .replace(/-+$/, '');         // Trim - from end of text
+};
+
+/**
+ * Reverses a slug back into a readable string
+ * @param {string} slug - The slug to convert back to text
+ * @returns {string} The un-slugified text
+ */
+export const deslugify = (slug) => {
+  return slug
+    .replace(/-/g, ' ')          // Replace - with space
+    .replace(/\b\w/g, l => l.toUpperCase()); // Capitalize first letter of each word
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/socialShare.js b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/socialShare.js
new file mode 100644
index 0000000..f290b49
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/detail-pages/sliderDetailPage/utils/socialShare.js
@@ -0,0 +1,108 @@
+import { useLocation } from 'react-router-dom';
+
+export const generateShareContent = (serviceData, currentUrl) => {
+  // Extract key information from serviceData
+  const { 
+    overview: { 
+      title, 
+      mainDescription, 
+      subtitle 
+    },
+    benefits = [],
+    solutions = []
+  } = serviceData;
+
+  // Create dynamic hashtags based on title and category
+  const generateHashtags = () => {
+    const words = title
+      .split(' ')
+      .map(word => word.replace(/[^a-zA-Z0-9]/g, ''))
+      .filter(word => word.length > 2)
+      .map(word => `#${word}`);
+    
+    return [...words, '#Innovation', '#Technology'].slice(0, 4).join(' ');
+  };
+
+  // Create a brief excerpt
+  const createBriefExcerpt = () => {
+    const excerpt = mainDescription.split('.')[0]; // Get first sentence
+    return excerpt.length > 100 ? excerpt.substring(0, 97) + '...' : excerpt;
+  };
+
+  // Generate key benefit if available
+  const keyBenefit = benefits && benefits.length > 0 
+    ? `✨ Key benefit: ${benefits[0].title}` 
+    : '';
+
+  return {
+    twitter: `🔍 ${title}\n\n${createBriefExcerpt()}\n\n${generateHashtags()}\n\n${currentUrl}`,
+    
+    linkedin: `Exciting Case Study: ${title}\n\n${subtitle}\n\n${createBriefExcerpt()}\n\n${keyBenefit}\n\nLearn more:`,
+    
+    facebook: `📱 ${title}\n\n${createBriefExcerpt()}\n\n${keyBenefit}\n\nDiscover more about this innovative solution!`,
+    
+    email: {
+      subject: `Must-Read Case Study: ${title}`,
+      body: `Hi,\n\nI thought you might be interested in this innovative case study:\n\n${title}\n\n${mainDescription}\n\n${
+        keyBenefit ? `\n${keyBenefit}\n\n` : ''
+      }Read the full case study here: ${currentUrl}\n\nBest regards`
+    }
+  };
+};
+
+const openShareDialog = (url, platform) => {
+  // Define popup dimensions for each platform
+  const dimensions = {
+    twitter: { width: 550, height: 420 },
+    facebook: { width: 550, height: 450 },
+    linkedin: { width: 600, height: 600 },
+    email: { width: 0, height: 0 } // Email uses default mail client
+  };
+
+  const { width, height } = dimensions[platform];
+  
+  // Calculate center position for the popup
+  const left = (window.innerWidth - width) / 2 + window.screenX;
+  const top = (window.innerHeight - height) / 2 + window.screenY;
+
+  // Don't create popup for email, use default behavior
+  if (platform === 'email') {
+    window.location.href = url;
+    return;
+  }
+
+  // Open centered popup with specific dimensions
+  const popup = window.open(
+    url,
+    `share-${platform}`,
+    `width=${width},height=${height},left=${left},top=${top},toolbar=0,menubar=0,location=0,status=0,scrollbars=1,resizable=1`
+  );
+
+  // Focus the popup window
+  if (popup && popup.focus) {
+    popup.focus();
+  }
+};
+
+export const handleShare = (platform, serviceData, currentUrl) => {
+  const content = generateShareContent(serviceData, currentUrl);
+  
+  const shareLinks = {
+    twitter: `https://twitter.com/intent/tweet?text=${encodeURIComponent(content.twitter)}`,
+    
+    // Updated LinkedIn sharing URL with proper parameters
+    linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(currentUrl)}&title=${encodeURIComponent(serviceData.overview.title)}&summary=${encodeURIComponent(content.linkedin)}&source=Tech4Biz`,
+    
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}&quote=${encodeURIComponent(content.facebook)}`,
+    
+    email: `mailto:?subject=${encodeURIComponent(content.email.subject)}&body=${encodeURIComponent(content.email.body)}`
+  };
+
+  // For LinkedIn, we need to use their official shareArticle endpoint
+  if (platform === 'linkedin') {
+    const linkedInUrl = shareLinks[platform];
+    openShareDialog(linkedInUrl, platform);
+  } else {
+    openShareDialog(shareLinks[platform], platform);
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/Home.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/Home.jsx
new file mode 100644
index 0000000..ce97da2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/Home.jsx
@@ -0,0 +1,65 @@
+import { motion } from "framer-motion";
+import { Helmet } from "react-helmet-async";
+import ErrorBoundary from "@components/common/error/ErrorBoundary";
+import ScrollToTopButton from "@components/common/scroll/ScrollToTopButton";
+
+// Home Components
+import Hero from "./components/Hero/Hero";
+import CaseStudyShowcase from "./components/caseStudyShowcase/index.jsx";
+import CaseStudiesSlider from "./components/caseStudiesSlider/CardSlider";
+import SoftwareVlsiServices from "./components/softwareVlsiServices";
+import GenAISection from "./components/Genai/index.jsx";
+import CloudCTA from "./components/CloudCTA/index";
+import CloudSlider from "./components/CloudSlider/CloudSliderNew";
+import OurServices from "./components/OurServices/OurServices";
+import BusinessSolution from "./components/buisnessSolution/index";
+import ManufacturingServices from "./components/manufacturingSolutions/index";
+
+const pageVariants = {
+  initial: { opacity: 0 },
+  animate: {
+    opacity: 1,
+    transition: { duration: 0.5, when: "beforeChildren" },
+  },
+  exit: { opacity: 0 },
+};
+
+const Home = () => {
+  return (
+    <ErrorBoundary>
+      <motion.div
+        variants={pageVariants}
+        initial="initial"
+        animate="animate"
+        exit="exit"
+      >
+        <Helmet>
+          <title>
+            Tech4Biz Solutions | 360° Engineering for AI & Digital Tech
+          </title>
+          <meta
+            name="description"
+            content="Tech4Biz Solutions delivers 360-degree engineering solutions, optimizing innovation with integrated hardware & software from design to deployment."
+          />
+        </Helmet>
+        <h1 className="sr-only">
+          Tech4Biz Solutions | 360° Engineering for AI & Digital Tech
+        </h1>
+
+        <Hero />
+        <CaseStudyShowcase />
+        <SoftwareVlsiServices />
+        <CaseStudiesSlider />
+        <CloudCTA />
+        <CloudSlider />
+        <GenAISection />
+        <OurServices />
+        <BusinessSolution />
+        <ManufacturingServices />
+      </motion.div>
+      <ScrollToTopButton />
+    </ErrorBoundary>
+  );
+};
+
+export default Home;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/CloudCTA.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/CloudCTA.jsx
new file mode 100644
index 0000000..1b9eb92
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/CloudCTA.jsx
@@ -0,0 +1,83 @@
+import React, { useState, Suspense, lazy } from 'react';
+import { motion } from 'framer-motion';
+import { cloudConfig } from './config';
+import { useInViewAnimation } from './hooks/useInViewAnimation';
+import { containerVariants } from './utils/variants';
+import CTAContent from './components/CTAContent';
+import CTAButton from './components/CTAButton';
+import styles from './styles/CloudCTA.module.css';
+import { Helmet } from 'react-helmet-async';
+import { cloudCTASchema } from './config/schema';
+import { ctaMeta } from './config/meta';
+
+// Lazy load RequirementModal
+const RequirementModal = lazy(() => 
+  import('./components/RequirementModal/RequirementModal')
+);
+
+const CloudCTA = () => {
+  const { ref, controls } = useInViewAnimation();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <Helmet>
+        {/* JSON-LD Schema */}
+        <script type="application/ld+json">
+          {JSON.stringify(cloudCTASchema)}
+        </script>
+        
+        {/* Meta tags */}
+        <meta name="description" content={ctaMeta.description} />
+        <meta property="og:title" content={ctaMeta.openGraph.title} />
+        <meta property="og:description" content={ctaMeta.openGraph.description} />
+        <meta property="og:type" content={ctaMeta.openGraph.type} />
+      </Helmet>
+      
+      <section 
+        className={styles.container}
+        aria-labelledby="cta-heading"
+      >
+        <div className={styles.wrapper}>
+          <motion.div
+            ref={ref}
+            variants={containerVariants}
+            initial="hidden"
+            animate={controls}
+            className={styles.content}
+          >
+            <CTAContent
+              heading={cloudConfig.heading}
+              description={cloudConfig.description}
+              image={cloudConfig.images.arrow}
+            />
+            
+            <CTAButton 
+              text={cloudConfig.button.text} 
+              onClick={handleOpenModal}
+            />
+          </motion.div>
+        </div>
+
+        <Suspense fallback={null}>
+          {isModalOpen && (
+            <RequirementModal
+              isOpen={isModalOpen}
+              onClose={handleCloseModal}
+            />
+          )}
+        </Suspense>
+      </section>
+    </>
+  );
+};
+
+export default CloudCTA;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/CTAButton.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/CTAButton.jsx
new file mode 100644
index 0000000..05c9eae
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/CTAButton.jsx
@@ -0,0 +1,60 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { itemVariants } from '../utils/variants';
+import styles from '../styles/CloudCTA.module.css';
+
+const CTAButton = memo(({ text, onClick }) => {
+  return (
+    <motion.button
+      variants={itemVariants}
+      className={styles.button}
+      whileHover={{ 
+        scale: 1.01,
+        transition: {
+          type: "tween",
+          ease: "easeOut",
+          duration: 0.2
+        }
+      }}
+      whileTap={{ 
+        scale: 0.98,
+        transition: {
+          type: "tween",
+          ease: "easeOut",
+          duration: 0.1
+        }
+      }}
+      aria-label={text}
+      onClick={onClick}
+    >
+      {text}
+      <motion.svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        className={styles.buttonIcon}
+        fill="none" 
+        viewBox="0 0 24 24" 
+        stroke="currentColor"
+        animate={{ 
+          opacity: [1, 0.7, 1],
+          x: [0, 2, 0]
+        }}
+        transition={{
+          duration: 1.5,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }}
+        aria-hidden="true"
+      >
+        <path 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+          strokeWidth={2} 
+          d="M13 7l5 5m0 0l-5 5m5-5H6" 
+        />
+      </motion.svg>
+    </motion.button>
+  );
+});
+
+CTAButton.displayName = 'CTAButton';
+export default CTAButton;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/CTAContent.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/CTAContent.jsx
new file mode 100644
index 0000000..152f1ca
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/CTAContent.jsx
@@ -0,0 +1,53 @@
+import React, { memo, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { itemVariants } from '../utils/variants';
+import { preloadImage } from '../utils/performance';
+import styles from '../styles/CloudCTA.module.css';
+
+const CTAContent = memo(({ heading, description, image }) => {
+  useEffect(() => {
+    preloadImage(image.src);
+  }, [image.src]);
+
+  return (
+    <div className={styles.contentWrapper}>
+      <div className={styles.textContainer}>
+        <motion.h2 
+          variants={itemVariants}
+          className={styles.contentHeading}
+        >
+          {heading}
+        </motion.h2>
+        
+        <motion.div 
+          variants={itemVariants}
+          className={styles.divider}
+          aria-hidden="true"
+        />
+        
+        <motion.p 
+          variants={itemVariants}
+          className={styles.contentDescription}
+        >
+          {description}
+        </motion.p>
+      </div>
+
+      <div className={styles.imageContainer}>
+        <motion.img
+          src={image.src}
+          alt={image.alt}
+          width={image.width}
+          height={image.height}
+          className={styles.floatingImage}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.4 }}
+        />
+      </div>
+    </div>
+  );
+});
+
+CTAContent.displayName = 'CTAContent';
+export default CTAContent;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/RequirementModal.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/RequirementModal.jsx
new file mode 100644
index 0000000..bfa3bdc
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/RequirementModal.jsx
@@ -0,0 +1,325 @@
+import React, { useState, useEffect, Suspense, lazy } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+import { useRequirements } from './hooks/useRequirements';
+import styles from './styles/RequirementModal.module.css';
+
+// Lazy load components
+const WelcomeScreen = lazy(() => import('./components/WelcomeScreen'));
+const TopicScreen = lazy(() => import('./components/TopicScreen'));
+const QuestionCard = lazy(() => import('./components/QuestionCard'));
+const ProgressIndicator = lazy(() => import('./components/ProgressIndicator'));
+const NavigationControls = lazy(() => import('./components/NavigationControls'));
+const UserDetailsForm = lazy(() => import('./components/UserDetailsForm'));
+
+const modalVariants = {
+  hidden: { 
+    opacity: 0,
+    scale: 0.95,
+    y: 20 
+  },
+  visible: { 
+    opacity: 1,
+    scale: 1,
+    y: 0,
+    transition: {
+      duration: 0.3,
+      ease: "easeOut"
+    }
+  },
+  exit: { 
+    opacity: 0,
+    scale: 0.95,
+    y: 20,
+    transition: {
+      duration: 0.2,
+      ease: "easeIn"
+    }
+  }
+};
+
+const RequirementModal = ({ isOpen, onClose }) => {
+  const [topics, setTopics] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch('http://160.187.166.186/api/getdata');
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        setTopics(data.topics.filter(topic => topic.questions.length > 0)); // Filter out empty topics
+        setLoading(false);
+      } catch (error) {
+        setError(error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const {
+    state,
+    formData,
+    actions
+  } = useRequirements(topics);
+
+  const currentTopic = topics[state.currentTopicIndex];
+  const currentQuestion = currentTopic?.questions[state.currentQuestionIndex];
+
+  const isLastQuestionInTopic = state.currentQuestionIndex === currentTopic?.questions.length - 1;
+  const isLastTopic = state.currentTopicIndex === topics.length - 1;
+
+  const handleNext = () => {
+    if (isLastQuestionInTopic) {
+      if (!isLastTopic) {
+        actions.goToNextTopic();
+      } else {
+        actions.completeAssessment();
+      }
+    } else {
+      actions.goToNextQuestion();
+    }
+  };
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error.message}</div>;
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className={styles.modalOverlay}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+        >
+          <motion.div
+            className={styles.modalContainer}
+            variants={modalVariants}
+            initial="hidden"
+            animate="visible"
+            exit="exit"
+          >
+            <div className={styles.modalHeader}>
+              <h2 className={styles.title}>
+                {!state.hasStarted ? 'Cloud Assessment' : 'Cloud Requirements'}
+              </h2>
+              <button
+                onClick={onClose}
+                className={styles.closeButton}
+                aria-label="Close modal"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+
+            <Suspense fallback={<div className="p-4 text-sm text-gray-500">Loading...</div>}>
+              {state.hasStarted && (
+                <ProgressIndicator
+                  currentTopic={state.currentTopicIndex + 1}
+                  currentQuestion={state.currentQuestionIndex + 1}
+                  totalTopics={topics.length}
+                  totalQuestions={currentTopic?.questions.length || 0}
+                />
+              )}
+
+              <div className={styles.modalContent}>
+                {!state.hasStarted ? (
+                  <WelcomeScreen onStart={actions.startAssessment} />
+                ) : state.isLastStep ? (
+                  <UserDetailsForm 
+                    onSubmit={actions.submitRequirements}
+                    isSubmitting={state.isSubmitting}
+                  />
+                ) : currentQuestion ? (
+                  <QuestionCard
+                    question={currentQuestion}
+                    selectedOption={formData[currentTopic.id]?.[currentQuestion.id]}
+                    onSelect={(optionId) => 
+                      actions.handleOptionSelect(currentTopic.id, currentQuestion.id, optionId)
+                    }
+                  />
+                ) : (
+                  <TopicScreen
+                    topic={currentTopic}
+                    onNext={actions.goToNextQuestion}
+                  />
+                )}
+              </div>
+
+              {state.hasStarted && !state.isLastStep && (
+                <NavigationControls
+                  onBack={actions.goToPreviousQuestion}
+                  onNext={handleNext}
+                  canGoBack={state.currentTopicIndex > 0 || state.currentQuestionIndex > 0}
+                  canGoNext={!!formData[currentTopic.id]?.[currentQuestion?.id]}
+                  isLastQuestion={isLastQuestionInTopic && isLastTopic}
+                />
+              )}
+            </Suspense>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default RequirementModal;
+
+// import React, { Suspense, lazy } from 'react';
+// import { motion, AnimatePresence } from 'framer-motion';
+// import { X } from 'lucide-react';
+// import { useRequirements } from './hooks/useRequirements';
+// import response from './config/response.json'; // Import the JSON data
+// import styles from './styles/RequirementModal.module.css';
+
+// // Lazy load components
+// const WelcomeScreen = lazy(() => import('./components/WelcomeScreen'));
+// const TopicScreen = lazy(() => import('./components/TopicScreen'));
+// const QuestionCard = lazy(() => import('./components/QuestionCard'));
+// const ProgressIndicator = lazy(() => import('./components/ProgressIndicator'));
+// const NavigationControls = lazy(() => import('./components/NavigationControls'));
+// const UserDetailsForm = lazy(() => import('./components/UserDetailsForm'));
+
+// const modalVariants = {
+//   hidden: { 
+//     opacity: 0,
+//     scale: 0.95,
+//     y: 20 
+//   },
+//   visible: { 
+//     opacity: 1,
+//     scale: 1,
+//     y: 0,
+//     transition: {
+//       duration: 0.3,
+//       ease: "easeOut"
+//     }
+//   },
+//   exit: { 
+//     opacity: 0,
+//     scale: 0.95,
+//     y: 20,
+//     transition: {
+//       duration: 0.2,
+//       ease: "easeIn"
+//     }
+//   }
+// };
+
+// const RequirementModal = ({ isOpen, onClose }) => {
+//   const {
+//     state,
+//     formData,
+//     actions
+//   } = useRequirements(response.topics); // Use topics from the JSON data
+
+//   const currentTopic = response.topics[state.currentTopicIndex];
+//   const currentQuestion = currentTopic?.questions[state.currentQuestionIndex];
+
+//   const isLastQuestionInTopic = state.currentQuestionIndex === currentTopic?.questions.length - 1;
+//   const isLastTopic = state.currentTopicIndex === response.topics.length - 1;
+
+//   const handleNext = () => {
+//     if (isLastQuestionInTopic) {
+//       if (!isLastTopic) {
+//         actions.goToNextTopic();
+//       } else {
+//         actions.completeAssessment();
+//       }
+//     } else {
+//       actions.goToNextQuestion();
+//     }
+//   };
+
+//   return (
+//     <AnimatePresence>
+//       {isOpen && (
+//         <motion.div
+//           className={styles.modalOverlay}
+//           initial={{ opacity: 0 }}
+//           animate={{ opacity: 1 }}
+//           exit={{ opacity: 0 }}
+//         >
+//           <motion.div
+//             className={styles.modalContainer}
+//             variants={modalVariants}
+//             initial="hidden"
+//             animate="visible"
+//             exit="exit"
+//           >
+//             <div className={styles.modalHeader}>
+//               <h2 className={styles.title}>
+//                 {!state.hasStarted ? 'Cloud Assessment' : 'Cloud Requirements'}
+//               </h2>
+//               <button
+//                 onClick={onClose}
+//                 className={styles.closeButton}
+//                 aria-label="Close modal"
+//               >
+//                 <X className="w-4 h-4" />
+//               </button>
+//             </div>
+
+//             <Suspense fallback={<div className="p-4 text-sm text-gray-500">Loading...</div>}>
+//               {state.hasStarted && (
+//                 <ProgressIndicator
+//                   currentTopic={state.currentTopicIndex + 1}
+//                   currentQuestion={state.currentQuestionIndex + 1}
+//                   totalTopics={response.topics.length}
+//                   totalQuestions={currentTopic?.questions.length || 0}
+//                 />
+//               )}
+
+//               <div className={styles.modalContent}>
+//                 {!state.hasStarted ? (
+//                   <WelcomeScreen onStart={actions.startAssessment} />
+//                 ) : state.isLastStep ? (
+//                   <UserDetailsForm 
+//                     onSubmit={actions.submitRequirements}
+//                     isSubmitting={state.isSubmitting}
+//                   />
+//                 ) : currentQuestion ? (
+//                   <QuestionCard
+//                     question={currentQuestion}
+//                     selectedOption={formData[currentTopic.id]?.[currentQuestion.id]}
+//                     onSelect={(optionId) => 
+//                       actions.handleOptionSelect(currentTopic.id, currentQuestion.id, optionId)
+//                     }
+//                   />
+//                 ) : (
+//                   <TopicScreen
+//                     topic={currentTopic}
+//                     onNext={actions.goToNextQuestion}
+//                   />
+//                 )}
+//               </div>
+
+//               {state.hasStarted && !state.isLastStep && (
+//                 <NavigationControls
+//                   onBack={actions.goToPreviousQuestion}
+//                   onNext={handleNext}
+//                   canGoBack={state.currentTopicIndex > 0 || state.currentQuestionIndex > 0}
+//                   canGoNext={!!formData[currentTopic.id]?.[currentQuestion?.id]}
+//                   isLastQuestion={isLastQuestionInTopic && isLastTopic}
+//                 />
+//               )}
+//             </Suspense>
+//           </motion.div>
+//         </motion.div>
+//       )}
+//     </AnimatePresence>
+//   );
+// };
+
+// export default RequirementModal;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/NavigationControls.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/NavigationControls.jsx
new file mode 100644
index 0000000..2a503dc
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/NavigationControls.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+const NavigationControls = ({ 
+  onBack, 
+  onNext, 
+  canGoBack, 
+  canGoNext,
+  isLastQuestion 
+}) => {
+  return (
+    <div className="flex items-center justify-between px-3 sm:px-5 py-3 sm:py-4 
+                    border-t border-gray-100 bg-gray-50/80 backdrop-blur-sm sticky bottom-0">
+      <motion.button
+        onClick={onBack}
+        disabled={!canGoBack}
+        className={`inline-flex items-center gap-1.5 sm:gap-2 px-4 sm:px-5 py-2 sm:py-2.5 
+                    rounded-full text-xs font-medium transition-all duration-200
+                    ${canGoBack 
+                      ? 'text-gray-700 hover:bg-white hover:shadow-sm' 
+                      : 'text-gray-400 cursor-not-allowed opacity-60'
+                    }`}
+        whileHover={canGoBack ? { x: -3 } : {}}
+        whileTap={canGoBack ? { scale: 0.98 } : {}}
+      >
+        <ArrowLeft className="w-3 h-3 sm:w-3.5 sm:h-3.5" />
+        Back
+      </motion.button>
+
+      <motion.button
+        onClick={onNext}
+        disabled={!canGoNext}
+        className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-full text-xs font-medium
+          transition-all duration-200
+          ${canGoNext 
+            ? 'bg-blue-600 text-white hover:bg-blue-700 hover:shadow-md hover:shadow-blue-500/10' 
+            : 'bg-blue-400/70 cursor-not-allowed'
+          }`}
+        whileHover={canGoNext ? { x: 3, scale: 1.01 } : {}}
+        whileTap={canGoNext ? { scale: 0.98 } : {}}
+      >
+        {isLastQuestion ? 'Submit' : 'Next'}
+        <ArrowRight className="w-3.5 h-3.5" />
+      </motion.button>
+    </div>
+  );
+};
+
+export default NavigationControls;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/ProgressIndicator.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/ProgressIndicator.jsx
new file mode 100644
index 0000000..1929123
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/ProgressIndicator.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const ProgressIndicator = ({ currentTopic, currentQuestion, totalTopics, totalQuestions }) => {
+  const progress = ((currentTopic - 1) * totalQuestions + currentQuestion) / 
+                  (totalTopics * totalQuestions) * 100;
+
+  return (
+    <div className="w-full px-4 sm:px-8 py-3 sm:py-5 border-b border-gray-100 
+                    bg-white/80 backdrop-blur-sm">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between 
+                      gap-2 sm:gap-0 mb-2 sm:mb-3">
+        <div className="flex items-center gap-2 text-xs sm:text-sm">
+          <span className="font-medium text-gray-700">
+            Topic {currentTopic} of {totalTopics}
+          </span>
+          <span className="h-1 w-1 rounded-full bg-gray-300" />
+          <span className="text-gray-500">
+             {currentQuestion} of {totalQuestions}
+          </span>
+        </div>
+        <span className="text-xs sm:text-sm font-semibold text-blue-600">
+          {Math.round(progress)}% Complete
+        </span>
+      </div>
+      
+      <div className="h-1 sm:h-1.5 w-full bg-gray-100 rounded-full overflow-hidden">
+        <motion.div
+          className="h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full"
+          initial={{ width: 0 }}
+          animate={{ width: `${progress}%` }}
+          transition={{ duration: 0.5, ease: "easeInOut" }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProgressIndicator;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/QuestionCard.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/QuestionCard.jsx
new file mode 100644
index 0000000..9ed66e1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/QuestionCard.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Check } from 'lucide-react';
+
+const QuestionCard = ({ question, selectedOption, onSelect }) => {
+  const cardVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 }
+  };
+
+  return (
+    <motion.div
+      variants={cardVariants}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      className="space-y-4 sm:space-y-6 px-1 sm:px-2"
+    >
+      <div className="space-y-2 sm:space-y-2.5">
+        <span className="inline-block px-2.5 sm:px-3 py-1 bg-blue-50 text-blue-600 
+                       rounded-full text-xs font-medium tracking-wide">
+          Question {question.id}
+        </span>
+        <h3 className="text-lg sm:text-xl font-normal text-gray-800 leading-relaxed">
+          {question.text}
+        </h3>
+      </div>
+
+      <div className="space-y-2.5 sm:space-y-3">
+        {question.options.map((option) => (
+          <motion.button
+            key={option.id}
+            onClick={() => onSelect(option.id)}
+            className={`w-full p-3 sm:p-4 rounded-lg border text-left transition-all duration-200
+              ${selectedOption === option.id 
+                ? 'border-blue-500 bg-blue-50/30 shadow-sm shadow-blue-500/5' 
+                : 'border-gray-200 hover:border-blue-200 hover:bg-gray-50/70'
+              }`}
+            whileHover={{ scale: 1.005, y: -1 }}
+            whileTap={{ scale: 0.995 }}
+          >
+            <div className="flex items-start gap-2.5 sm:gap-3">
+              <div className={`mt-0.5 w-3.5 sm:w-4 h-3.5 sm:h-4 rounded-full border-2 
+                              flex items-center justify-center transition-all duration-200
+                              ${selectedOption === option.id 
+                                ? 'border-blue-500 bg-blue-500 scale-105' 
+                                : 'border-gray-300'
+                              }`}
+              >
+                {selectedOption === option.id && (
+                  <Check className="w-2 sm:w-2.5 h-2 sm:h-2.5 text-white" />
+                )}
+              </div>
+              
+              <div>
+                <h4 className="text-xs sm:text-sm font-medium text-gray-800">
+                  {option.label}
+                </h4>
+                {option.description && (
+                  <p className="mt-0.5 sm:mt-1 text-[11px] sm:text-xs text-gray-500 leading-relaxed">
+                    {option.description}
+                  </p>
+                )}
+              </div>
+            </div>
+          </motion.button>
+        ))}
+      </div>
+    </motion.div>
+  );
+};
+
+export default QuestionCard;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/ReCaptcha.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/ReCaptcha.jsx
new file mode 100644
index 0000000..c96bda3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/ReCaptcha.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+
+const ReCaptcha = ({ onChange }) => {
+  return (
+    <div className="flex justify-center my-4">
+      <ReCAPTCHA
+        sitekey={import.meta.env.VITE_RECAPTCHA_SITE_KEY}
+        onChange={onChange}
+        theme="light"
+      />
+    </div>
+  );
+};
+
+export default ReCaptcha;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/TopicScreen.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/TopicScreen.jsx
new file mode 100644
index 0000000..c8ea9ab
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/TopicScreen.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight } from 'lucide-react';
+
+const TopicScreen = ({ topic, onNext }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="flex flex-col items-center justify-center min-h-[280px] sm:min-h-[400px] 
+                 px-4 sm:px-8 py-8 sm:py-16 text-center"
+    >
+      <span className="inline-block px-3 sm:px-5 py-1.5 sm:py-2 bg-blue-50 text-blue-600 
+                     rounded-full text-xs sm:text-sm font-medium tracking-wide mb-6 sm:mb-8 
+                     shadow-sm">
+        TOPIC {topic.id}
+      </span>
+      
+      <h2 className="text-2xl sm:text-3xl md:text-4xl font-light text-gray-900 
+                     mb-4 sm:mb-6 leading-relaxed max-w-[90%] sm:max-w-full">
+        {topic.title}
+      </h2>
+      
+      <p className="text-sm sm:text-base text-gray-600 max-w-[90%] sm:max-w-2xl 
+                    mb-8 sm:mb-12 leading-relaxed">
+        Let's gather some information about your {topic.title.toLowerCase()} 
+        to help us understand your needs better.
+      </p>
+
+      <motion.button
+        onClick={onNext}
+        whilehover={{ scale: 1.03, y: -2 }}
+        whileTap={{ scale: 0.97 }}
+        className="inline-flex items-center gap-2 sm:gap-3 px-6 sm:px-8 py-3 sm:py-3.5 
+                   bg-blue-600 text-white rounded-full text-sm sm:text-base font-medium 
+                   hover:bg-blue-700 transition-all duration-200 shadow-lg 
+                   hover:shadow-xl hover:shadow-blue-500/20"
+      >
+        Start Topic
+        <ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+      </motion.button>
+    </motion.div>
+  );
+};
+
+export default TopicScreen;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/UserDetailsForm.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/UserDetailsForm.jsx
new file mode 100644
index 0000000..81e3072
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/UserDetailsForm.jsx
@@ -0,0 +1,248 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Send } from 'lucide-react';
+import { validateField, validateForm, isFormValid } from '../utils/formValidation';
+// import ReCaptcha from './ReCaptcha'; // Comment out the ReCaptcha import
+
+const UserDetailsForm = ({ onSubmit, isSubmitting }) => {
+  const [formData, setFormData] = React.useState({
+    first_name: '',
+    last_name: '',
+    email: '',
+    phone_number: '',
+    company: ''
+  });
+
+  const [errors, setErrors] = React.useState({});
+  // const [captchaValue, setCaptchaValue] = React.useState(null); // Comment out captcha state
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+
+    // Clear error when user starts typing
+    if (errors[name]) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: ''
+      }));
+    }
+  };
+
+  const handleBlur = (e) => {
+    const { name, value } = e.target;
+    const error = validateField(name, value);
+    if (error) {
+      setErrors(prev => ({
+        ...prev,
+        [name]: error
+      }));
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const newErrors = validateForm(formData);
+  
+    if (Object.keys(newErrors).length > 0) {
+      setErrors(newErrors);
+      return;
+    }
+  
+    // Construct the response structure
+    const response = {
+      answers: [
+        { question_id: 4, selected_option_id: 3 },
+        { question_id: 2, selected_option_id: 8 },
+        { question_id: 6, selected_option_id: 5 },
+      ],
+      first_name: formData.first_name,
+      last_name: formData.last_name,
+      phone_number: formData.phone_number,
+      email: formData.email,
+      company: formData.company,
+    };
+  
+    // Pass the constructed response to onSubmit
+    onSubmit(response);
+  };
+  
+  // const handleSubmit = (e) => {
+  //   e.preventDefault();
+  //   const newErrors = validateForm(formData);
+    
+  //   if (Object.keys(newErrors).length > 0) {
+  //     setErrors(newErrors);
+  //     return;
+  //   }
+
+  //   // Comment out captcha validation
+  //   // if (!captchaValue) {
+  //   //   setErrors(prev => ({
+  //   //     ...prev,
+  //   //     captcha: 'Please complete the CAPTCHA'
+  //   //   }));
+  //   //   return;
+  //   // }
+
+  //   // Submit the form data
+  //   onSubmit(formData);
+  // };
+
+  // const handleCaptchaChange = (value) => {
+  //   setCaptchaValue(value);
+  //   if (errors.captcha) {
+  //     setErrors(prev => {
+  //       const newErrors = { ...prev };
+  //       delete newErrors.captcha;
+  //       return newErrors;
+  //     });
+  //   }
+  // };
+
+  // Update formIsValid to exclude captcha validation
+  const formIsValid = isFormValid(formData, errors);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="flex flex-col h-full max-h-[calc(85vh-180px)] sm:max-h-[calc(65vh-180px)]"
+    >
+      <div className="flex-shrink-0 px-4 sm:px-6 py-4 bg-white border-b border-gray-100">
+        <h3 className="text-xl sm:text-2xl font-light text-gray-900 mb-2">
+          Almost There!
+        </h3>
+        <p className="text-sm text-gray-600">
+          Please provide your contact details to receive your personalized cloud optimization report.
+        </p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="flex-1 overflow-y-auto px-4 sm:px-6 py-4">
+        <div className="space-y-4 min-h-min">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                First Name
+              </label>
+              <input
+                type="text"
+                name="first_name"
+                value={formData.first_name}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm
+                         focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
+                         transition-all duration-200"
+                required
+              />
+              {errors.first_name && <p className="text-red-500 text-xs mt-1">{errors.first_name}</p>}
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Last Name
+              </label>
+              <input
+                type="text"
+                name="last_name"
+                value={formData.last_name}
+                onChange={handleChange}
+                onBlur={handleBlur}
+                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm
+                         focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
+                         transition-all duration-200"
+                required
+              />
+              {errors.last_name && <p className="text-red-500 text-xs mt-1">{errors.last_name}</p>}
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Email Address
+            </label>
+            <input
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm
+                       focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
+                       transition-all duration-200"
+              required
+            />
+            {errors.email && <p className="text-red-500 text-xs mt-1">{errors.email}</p>}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              phone_number Number
+            </label>
+            <input
+              type="tel"
+              name="phone_number"
+              value={formData.phone_number}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm
+                       focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
+                       transition-all duration-200"
+              required
+            />
+            {errors.phone_number && <p className="text-red-500 text-xs mt-1">{errors.phone_number}</p>}
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Company Name
+            </label>
+            <input
+              type="text"
+              name="company"
+              value={formData.company}
+              onChange={handleChange}
+              onBlur={handleBlur}
+              className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm
+                       focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500
+                       transition-all duration-200"
+              required
+            />
+            {errors.company && <p className="text-red-500 text-xs mt-1">{errors.company}</p>}
+          </div>
+
+          {/* Comment out the ReCaptcha component */}
+          {/* <ReCaptcha onChange={handleCaptchaChange} /> */}
+          
+          {/* {errors.captcha && (
+            <p className="text-red-500 text-xs text-center mt-2">{errors.captcha}</p>
+          )} */}
+        </div>
+      </form>
+
+      <div className="flex-shrink-0 px-4 sm:px-6 py-4 bg-gray-50 border-t border-gray-100">
+        <motion.button
+          type="submit"
+          disabled={!formIsValid || isSubmitting}
+          onClick={handleSubmit}
+          className={`w-full inline-flex items-center justify-center gap-2 
+                     px-6 py-3 rounded-lg text-sm font-medium transition-all duration-200
+                     ${formIsValid && !isSubmitting
+                       ? 'bg-blue-600 text-white hover:bg-blue-700 shadow-lg hover:shadow-xl hover:shadow-blue-500/20'
+                       : 'bg-blue-400/70 text-white cursor-not-allowed'
+                     }`}
+          whilehover={formIsValid && !isSubmitting ? { scale: 1.01 } : {}}
+          whileTap={formIsValid && !isSubmitting ? { scale: 0.99 } : {}}
+        >
+          {isSubmitting ? 'Submitting...' : 'Submit Assessment'}
+          <Send className="w-4 h-4" />
+        </motion.button>
+      </div>
+    </motion.div>
+  );
+};
+
+export default UserDetailsForm;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/WelcomeScreen.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/WelcomeScreen.jsx
new file mode 100644
index 0000000..780cf16
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/components/WelcomeScreen.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight } from 'lucide-react';
+
+const WelcomeScreen = ({ onStart }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      className="flex flex-col items-center justify-center min-h-[300px] sm:min-h-[400px] 
+                 px-4 sm:px-8 py-8 sm:py-12 text-center"
+    >
+      <h2 className="text-xl sm:text-2xl md:text-3xl font-light text-gray-900 mb-3 sm:mb-4">
+        Is Your Business Cloud Ready?
+      </h2>
+      
+      <p className="text-gray-600 max-w-lg mb-6 sm:mb-8 text-sm sm:text-base leading-relaxed">
+        Take this quick assessment to get personalized recommendations for optimizing your cloud infrastructure.
+      </p>
+
+      <motion.button
+        onClick={onStart}
+        whilehover={{ scale: 1.02, y: -2 }}
+        whileTap={{ scale: 0.98 }}
+        className="inline-flex items-center gap-2 sm:gap-2.5 px-5 sm:px-7 py-2.5 sm:py-3 
+                   bg-blue-600 text-white rounded-full text-sm sm:text-base font-medium 
+                   hover:bg-blue-700 transition-all duration-200 shadow-lg 
+                   hover:shadow-xl hover:shadow-blue-500/20"
+      >
+        Start Assessment
+        <ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+      </motion.button>
+
+      <p className="text-xs sm:text-sm text-gray-500 mt-4 sm:mt-6">
+        This will only take about 2-3 minutes
+      </p>
+    </motion.div>
+  );
+};
+
+export default WelcomeScreen;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/animations.js
new file mode 100644
index 0000000..de16cb9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/animations.js
@@ -0,0 +1,68 @@
+export const modalAnimations = {
+    overlay: {
+      hidden: { opacity: 0 },
+      visible: { 
+        opacity: 1,
+        transition: { duration: 0.3 }
+      },
+      exit: { 
+        opacity: 0,
+        transition: { duration: 0.2 }
+      }
+    },
+    
+    modal: {
+      hidden: { 
+        opacity: 0,
+        scale: 0.95,
+        y: 20
+      },
+      visible: { 
+        opacity: 1,
+        scale: 1,
+        y: 0,
+        transition: { 
+          duration: 0.3,
+          ease: "easeOut"
+        }
+      },
+      exit: { 
+        opacity: 0,
+        scale: 0.95,
+        y: 20,
+        transition: { 
+          duration: 0.2,
+          ease: "easeIn"
+        }
+      }
+    },
+  
+    content: {
+      hidden: { opacity: 0, x: -20 },
+      visible: { 
+        opacity: 1,
+        x: 0,
+        transition: { duration: 0.3 }
+      },
+      exit: { 
+        opacity: 0,
+        x: 20,
+        transition: { duration: 0.2 }
+      }
+    },
+  
+    option: {
+      hover: { 
+        scale: 1.02,
+        backgroundColor: "rgba(59, 130, 246, 0.05)",
+        transition: { duration: 0.2 }
+      },
+      tap: { 
+        scale: 0.98
+      },
+      selected: {
+        backgroundColor: "rgba(59, 130, 246, 0.1)",
+        borderColor: "rgb(59, 130, 246)"
+      }
+    }
+  };
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/requirements.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/requirements.js
new file mode 100644
index 0000000..08bc2eb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/requirements.js
@@ -0,0 +1,89 @@
+export const requirementTopics = [
+    {
+      id: 1,
+      title: "Current Infrastructure Overview",
+      questions: [
+        {
+          id: "q1",
+          letter: "A",
+          question: "What type of IT infrastructure are you currently using?",
+          options: [
+            {
+              id: "opt1",
+              title: "Full On-Premise",
+              description: "All systems and data hosted locally"
+            },
+            {
+              id: "opt2",
+              title: "Hybrid",
+              description: "Mix of on-premise and cloud services"
+            },
+            {
+              id: "opt3",
+              title: "Fully Cloud Based",
+              description: "All systems are cloud-hosted"
+            }
+          ]
+        },
+        {
+          id: "q2",
+          letter: "B",
+          question: "What is your current monthly cloud spending?",
+          options: [
+            {
+              id: "opt1",
+              title: "Less than $5,000",
+              description: "Small-scale cloud usage"
+            },
+            {
+              id: "opt2",
+              title: "$5,000 - $20,000",
+              description: "Medium-scale cloud usage"
+            },
+            {
+              id: "opt3",
+              title: "More than $20,000",
+              description: "Large-scale cloud usage"
+            }
+          ]
+        },
+        {
+          id: "q3",
+          letter: "C",
+          question: "Which cloud providers are you currently using?",
+          options: [
+            {
+              id: "opt1",
+              title: "AWS",
+              description: "Amazon Web Services"
+            },
+            {
+              id: "opt2",
+              title: "Azure",
+              description: "Microsoft Azure"
+            },
+            {
+              id: "opt3",
+              title: "GCP",
+              description: "Google Cloud Platform"
+            }
+          ],
+          multiSelect: true
+        }
+      ]
+    }
+  ];
+  
+  export const modalConfig = {
+    welcomeScreen: {
+      title: "Cloud Optimization Requirements",
+      subtitle: "Let's understand your needs",
+      description: "Answer a few questions about your current infrastructure to help us provide the best optimization solutions for your business.",
+      startButtonText: "Start"
+    },
+    navigation: {
+      nextText: "Next",
+      backText: "Previous",
+      submitText: "Submit Requirements"
+    }
+  };
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/response.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/response.json
new file mode 100644
index 0000000..1212451
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/config/response.json
@@ -0,0 +1,408 @@
+{
+    "topics": [
+      {
+        "id": "topic1",
+        "title": "Current Infrastructure Overview",
+        "questions": [
+          {
+            "id": "question1",
+            "text": "What type of IT infrastructure are you currently using?",
+            "options": [
+              {
+                "id": 1,
+                "label": "Fully on-premise"
+              },
+              {
+                "id": 2,
+                "label": "Hybrid"
+              },
+              {
+                "id": 3,
+                "label": "Fully cloud-based"
+              }
+            ]
+          },
+          {
+            "id": "question2",
+            "text": "How old is your current infrastructure?",
+            "options": [
+              {
+                "id": 4,
+                "label": "Less than 1 year"
+              },
+              {
+                "id": 5,
+                "label": "1-3 years"
+              },
+              {
+                "id": 6,
+                "label": "More than 3 years"
+              }
+            ]
+          },
+          {
+            "id": "question3",
+            "text": "Are you using any cloud service providers currently?",
+            "options": [
+              {
+                "id": 7,
+                "label": "Yes (e.g., AWS, Azure, etc.)"
+              },
+              {
+                "id": 8,
+                "label": "No"
+              }
+            ]
+          },
+          {
+            "id": "question4",
+            "text": "What applications are critical to your business operations?",
+            "options": [
+              {
+                "id": 9,
+                "label": "ERP/CRM"
+              },
+              {
+                "id": 10,
+                "label": "Data analytics"
+              },
+              {
+                "id": 11,
+                "label": "E-commerce platform"
+              },
+              {
+                "id": 12,
+                "label": "Custom software"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "topic2",
+        "title": "Performance & Scalability",
+        "questions": [
+          {
+            "id": "question5",
+            "text": "How frequently do you experience performance issues (e.g., downtime)?",
+            "options": [
+              {
+                "id": 13,
+                "label": "Rarely"
+              },
+              {
+                "id": 14,
+                "label": "Occasionally"
+              },
+              {
+                "id": 15,
+                "label": "Frequently"
+              }
+            ]
+          },
+          {
+            "id": "question6",
+            "text": "How easily can you scale your current infrastructure to meet increasing demand?",
+            "options": [
+              {
+                "id": 16,
+                "label": "Easily scalable"
+              },
+              {
+                "id": 17,
+                "label": "Requires some effort"
+              },
+              {
+                "id": 18,
+                "label": "Very difficult or not scalable"
+              }
+            ]
+          },
+          {
+            "id": "question7",
+            "text": "Do you experience peak traffic at specific times (e.g., holiday season, product launches)?",
+            "options": [
+              {
+                "id": 19,
+                "label": "Yes, and we manage it easily"
+              },
+              {
+                "id": 20,
+                "label": "Yes, but we struggle to handle the load"
+              },
+              {
+                "id": 21,
+                "label": "No, traffic is consistent"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "topic3",
+        "title": "Security & Compliance",
+        "questions": [
+          {
+            "id": "question8",
+            "text": "Are you subject to any regulatory compliance requirements (e.g., GDPR, HIPAA)?",
+            "options": [
+              {
+                "id": 22,
+                "label": "Yes, strict requirements"
+              },
+              {
+                "id": 23,
+                "label": "Yes, but moderate requirements"
+              },
+              {
+                "id": 24,
+                "label": "No"
+              }
+            ]
+          },
+          {
+            "id": "question9",
+            "text": "What level of security does your current infrastructure provide?",
+            "options": [
+              {
+                "id": 25,
+                "label": "Full encryption, multi-factor authentication, regular audits"
+              },
+              {
+                "id": 26,
+                "label": "Basic security, firewalls, and encryption"
+              },
+              {
+                "id": 27,
+                "label": "Minimal or no security measures in place"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "topic4",
+        "title": "Cost Efficiency",
+        "questions": [
+          {
+            "id": "question10",
+            "text": "How much are you currently spending on server maintenance, cooling, and electricity?",
+            "options": [
+              {
+                "id": 28,
+                "label": "Less than ₹5,000/month"
+              },
+              {
+                "id": 29,
+                "label": "₹5,000-₹10,000/month"
+              },
+              {
+                "id": 30,
+                "label": "More than ₹10,000/month"
+              }
+            ]
+          },
+          {
+            "id": "question11",
+            "text": "Are you satisfied with the cost-effectiveness of your current infrastructure?",
+            "options": [
+              {
+                "id": 31,
+                "label": "Very satisfied"
+              },
+              {
+                "id": 32,
+                "label": "Neutral"
+              },
+              {
+                "id": 33,
+                "label": "Unsatisfied, it's too expensive"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "topic5",
+        "title": "Cloud Migration Readiness",
+        "questions": [
+          {
+            "id": "question12",
+            "text": "Have you previously explored cloud migration options?",
+            "options": [
+              {
+                "id": 34,
+                "label": "Yes, but we haven't moved forward"
+              },
+              {
+                "id": 35,
+                "label": "No, not yet"
+              }
+            ]
+          },
+          {
+            "id": "question13",
+            "text": "What's holding you back from moving to the cloud?",
+            "options": [
+              {
+                "id": 36,
+                "label": "Security concerns"
+              },
+              {
+                "id": 37,
+                "label": "Migration complexity"
+              },
+              {
+                "id": 38,
+                "label": "Costs"
+              },
+              {
+                "id": 39,
+                "label": "We're still evaluating options"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "id": "topic6",
+        "title": "Openness to New Cloud Providers",
+        "questions": [
+          {
+            "id": "question14",
+            "text": "Have you considered switching cloud service providers in the last 12 months?",
+            "options": [
+              {
+                "id": 40,
+                "label": "Yes, actively looking for alternatives"
+              },
+              {
+                "id": 41,
+                "label": "Yes, but haven't moved forward"
+              },
+              {
+                "id": 42,
+                "label": "No, absolutely satisfied with current provider"
+              },
+              {
+                "id": 43,
+                "label": "We are not using any cloud provider"
+              }
+            ]
+          },
+          {
+            "id": "question15",
+            "text": "What would make you consider switching to a new cloud provider?",
+            "options": [
+              {
+                "id": 44,
+                "label": "Lower costs"
+              },
+              {
+                "id": 45,
+                "label": "Better customer support"
+              },
+              {
+                "id": 46,
+                "label": "More advanced features (e.g., AI/ML, multi-cloud capabilities)"
+              },
+              {
+                "id": 47,
+                "label": "Flexibility in pricing or services"
+              },
+              {
+                "id": 48,
+                "label": "Security improvements"
+              },
+              {
+                "id": 49,
+                "label": "Other"
+              }
+            ]
+          },
+          {
+            "id": "question16",
+            "text": "What concerns do you have about switching to a new cloud provider?",
+            "options": [
+              {
+                "id": 50,
+                "label": "Migration complexity"
+              },
+              {
+                "id": 51,
+                "label": "Downtime risk"
+              },
+              {
+                "id": 52,
+                "label": "Data security and compliance concerns"
+              },
+              {
+                "id": 53,
+                "label": "Costs of switching"
+              },
+              {
+                "id": 54,
+                "label": "Lack of trust in smaller/new providers"
+              },
+              {
+                "id": 55,
+                "label": "Other"
+              }
+            ]
+          },
+          {
+            "id": "question17",
+            "text": "How important is the reputation of a cloud provider when choosing a service?",
+            "options": [
+              {
+                "id": 56,
+                "label": "Extremely important"
+              },
+              {
+                "id": 57,
+                "label": "Moderately important"
+              },
+              {
+                "id": 58,
+                "label": "Somewhat important"
+              },
+              {
+                "id": 59,
+                "label": "Not important at all"
+              },
+              {
+                "id": 60,
+                "label": "As long as it is cost-effective, it's fine"
+              },
+              {
+                "id": 61,
+                "label": "Other"
+              }
+            ]
+          },
+          {
+            "id": "question18",
+            "text": "Would you be open to trying a new cloud service provider that offers localized support and lower costs compared to industry giants like AWS, Azure, and Google Cloud?",
+            "options": [
+              {
+                "id": 62,
+                "label": "Yes, I'm open to exploring alternatives"
+              },
+              {
+                "id": 63,
+                "label": "Maybe, depending on the provider's offerings and reputation"
+              },
+              {
+                "id": 64,
+                "label": "No, I prefer established brands"
+              },
+              {
+                "id": 65,
+                "label": "No, I prefer established brands"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/hooks/useRequirements.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/hooks/useRequirements.js
new file mode 100644
index 0000000..fd6bc61
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/hooks/useRequirements.js
@@ -0,0 +1,194 @@
+import { useState, useCallback } from 'react';
+
+export const useRequirements = (initialTopics) => {
+  // Filter out topics with empty questions
+  const filteredTopics = initialTopics.filter(topic => topic.questions.length > 0);
+
+  const [currentState, setCurrentState] = useState({
+    hasStarted: false,
+    currentTopicIndex: 0,
+    currentQuestionIndex: 0,
+    answers: {},
+    isSubmitting: false,
+    isLastStep: false
+  });
+
+  const [formData, setFormData] = useState({});
+
+  const startAssessment = useCallback(() => {
+    setCurrentState(prev => ({
+      ...prev,
+      hasStarted: true
+    }));
+  }, []);
+
+  const openModal = useCallback(() => {
+    setCurrentState(prev => ({
+      ...prev,
+      isOpen: true
+    }));
+  }, []);
+
+  const closeModal = useCallback(() => {
+    setCurrentState(prev => ({
+      ...prev,
+      isOpen: false
+    }));
+  }, []);
+
+  const handleOptionSelect = useCallback((topicId, questionId, optionId) => {
+    setFormData(prev => ({
+      ...prev,
+      [topicId]: {
+        ...prev[topicId],
+        [questionId]: optionId
+      }
+    }));
+  }, []);
+
+  const goToNextQuestion = useCallback(() => {
+    setCurrentState(prev => {
+      const currentTopic = filteredTopics[prev.currentTopicIndex];
+      const isLastQuestion = prev.currentQuestionIndex === currentTopic.questions.length - 1;
+      const isLastTopic = prev.currentTopicIndex === filteredTopics.length - 1;
+
+      if (isLastQuestion && isLastTopic) {
+        return {
+          ...prev,
+          isLastStep: true
+        };
+      }
+
+      if (isLastQuestion) {
+        return {
+          ...prev,
+          currentTopicIndex: prev.currentTopicIndex + 1,
+          currentQuestionIndex: 0
+        };
+      }
+
+      return {
+        ...prev,
+        currentQuestionIndex: prev.currentQuestionIndex + 1
+      };
+    });
+  }, [filteredTopics]);
+
+  const goToPreviousQuestion = useCallback(() => {
+    setCurrentState(prev => {
+      if (prev.currentQuestionIndex === 0) {
+        if (prev.currentTopicIndex === 0) {
+          return prev;
+        }
+        return {
+          ...prev,
+          currentTopicIndex: prev.currentTopicIndex - 1,
+          currentQuestionIndex: filteredTopics[prev.currentTopicIndex - 1].questions.length - 1
+        };
+      }
+      return {
+        ...prev,
+        currentQuestionIndex: prev.currentQuestionIndex - 1
+      };
+    });
+  }, [filteredTopics]);
+
+  const goToNextTopic = useCallback(() => {
+    setCurrentState(prev => {
+      const isLastTopic = prev.currentTopicIndex === filteredTopics.length - 1;
+      if (!isLastTopic) {
+        return {
+          ...prev,
+          currentTopicIndex: prev.currentTopicIndex + 1,
+          currentQuestionIndex: 0
+        };
+      }
+      return prev;
+    });
+  }, [filteredTopics]);
+
+  const completeAssessment = useCallback(() => {
+    setCurrentState(prev => ({
+      ...prev,
+      isLastStep: true
+    }));
+  }, []);
+
+  const submitRequirements = useCallback(async (userDetails) => {
+    try {
+      setCurrentState((prev) => ({
+        ...prev,
+        isSubmitting: true,
+      }));
+  
+      const { captchaToken, ...userData } = userDetails;
+  
+      // Transform formData into answers array
+      const answers = Object.entries(formData).flatMap(([topicId, questions]) =>
+        Object.entries(questions).map(([questionId, selectedOptionId]) => ({
+          question_id: parseInt(questionId, 10),
+          selected_option_id: parseInt(selectedOptionId, 10),
+        }))
+      );
+  
+      // Prepare submission data
+      const submissionData = {
+        answers,
+        ...userData, // Spread user details into the payload
+        captchaToken,
+      };
+  
+      // API call to submit data
+      const response = await fetch('http://160.187.166.186/api/contacts', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(submissionData),
+      });
+  
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || 'Failed to submit requirements');
+      }
+  
+      const responseData = await response.json();
+  
+      // Reset form and state after successful submission
+      closeModal();
+      setFormData({});
+      setCurrentState((prev) => ({
+        ...prev,
+        currentTopicIndex: 0,
+        currentQuestionIndex: 0,
+        isSubmitting: false,
+        hasStarted: false,
+      }));
+  
+    } catch (error) {
+      console.error('Error submitting requirements:', error.message);
+  
+      setCurrentState((prev) => ({
+        ...prev,
+        isSubmitting: false,
+      }));
+    }
+  }, [formData, closeModal]);
+  
+
+  return {
+    state: currentState,
+    formData,
+    actions: {
+      startAssessment,
+      openModal,
+      closeModal,
+      handleOptionSelect,
+      goToNextQuestion,
+      goToPreviousQuestion,
+      goToNextTopic,
+      completeAssessment,
+      submitRequirements
+    }
+  };
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/styles/RequirementModal.module.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/styles/RequirementModal.module.css
new file mode 100644
index 0000000..820d755
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/styles/RequirementModal.module.css
@@ -0,0 +1,54 @@
+.modalOverlay {
+    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 
+           flex items-center justify-center p-2 sm:p-4;
+  }
+  
+  .modalContainer {
+    @apply bg-white rounded-xl shadow-2xl w-full max-w-xl 
+           max-h-[90vh] sm:max-h-[65vh] overflow-hidden relative;
+  }
+  
+  .modalHeader {
+    @apply px-3 sm:px-5 py-3 sm:py-3.5 border-b border-gray-100 
+           flex items-center justify-between;
+  }
+  
+  .closeButton {
+    @apply p-1.5 text-gray-400 hover:text-gray-600 rounded-full 
+           hover:bg-gray-100 transition-colors;
+  }
+  
+  .modalContent {
+    @apply overflow-hidden flex flex-col;
+    height: calc(85vh - 180px);
+    
+    @screen sm {
+      height: calc(65vh - 180px);
+    }
+  }
+  
+  .title {
+    @apply text-lg font-medium text-gray-900;
+  }
+  
+  .subtitle {
+    @apply text-xs text-gray-500 mt-1;
+  }
+  
+  .optionsGrid {
+    @apply grid gap-2.5 mt-5;
+  }
+  
+  .optionCard {
+    @apply p-3.5 rounded-lg border border-gray-200 cursor-pointer 
+           transition-all duration-200;
+  }
+  
+  .optionCard.selected {
+    @apply border-blue-500 bg-blue-50/50;
+  }
+  
+  .navigationControls {
+    @apply px-5 py-3.5 border-t border-gray-100 
+           flex items-center justify-between sticky bottom-0 bg-white;
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/utils/formValidation.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/utils/formValidation.js
new file mode 100644
index 0000000..d127277
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/components/RequirementModal/utils/formValidation.js
@@ -0,0 +1,65 @@
+// Validation patterns
+const patterns = {
+    name: /^[a-zA-Z\s-']+$/,
+    email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+    phone: /^[\d\s()-+]+$/
+  };
+  
+  // Validation rules
+  export const validateField = (name, value) => {
+    const trimmedValue = value.trim();
+  
+    switch (name) {
+      case 'firstName':
+      case 'lastName':
+        if (!trimmedValue) return 'This field is required';
+        if (trimmedValue.length < 2) return 'Must be at least 2 characters';
+        if (!patterns.name.test(trimmedValue)) {
+          return 'Only letters, spaces, hyphens and apostrophes allowed';
+        }
+        return '';
+  
+      case 'email':
+        if (!trimmedValue) return 'Email is required';
+        if (!patterns.email.test(trimmedValue)) {
+          return 'Please enter a valid email address';
+        }
+        return '';
+  
+      case 'phone':
+        if (!trimmedValue) return 'Phone number is required';
+        if (!patterns.phone.test(trimmedValue)) {
+          return 'Please enter a valid phone number';
+        }
+        if (trimmedValue.replace(/\D/g, '').length < 10) {
+          return 'Phone number must have at least 10 digits';
+        }
+        return '';
+  
+      case 'company':
+        if (!trimmedValue) return 'Company name is required';
+        if (trimmedValue.length < 2) {
+          return 'Company name must be at least 2 characters';
+        }
+        return '';
+  
+      default:
+        return '';
+    }
+  };
+  
+  // Form-level validation
+  export const validateForm = (formData) => {
+    const errors = {};
+    Object.keys(formData).forEach(key => {
+      const error = validateField(key, formData[key]);
+      if (error) errors[key] = error;
+    });
+    return errors;
+  };
+  
+  // Check if form is valid
+  export const isFormValid = (formData, errors) => {
+    return Object.values(formData).every(value => value.trim() !== '') &&
+           Object.values(errors).every(error => !error);
+  };
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/content.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/content.js
new file mode 100644
index 0000000..32b1fff
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/content.js
@@ -0,0 +1,20 @@
+import arrowShape from '/images/cloud/cta/arrow-shape.png';
+
+export const cloudConfig = {
+  heading: "MAXIMIZE YOUR CLOUD INVESTMENT",
+  description: "Optimize cloud deployments on AWS, Azure and Google Cloud with Tech4Biz. Cut costs, reduce labor costs and focus on driving business growth with our tailored cloud solutions",
+  button: {
+    text: "Start Optimizing Today",
+    ariaLabel: "Start cloud optimization process"
+  },
+  images: {
+    arrow: {
+      src: arrowShape,
+      alt: "Decorative arrow shape",
+      srcSet: `${arrowShape} 1x, ${arrowShape.replace('.png', '@2x.png')} 2x`,
+      sizes: "(max-width: 768px) 100vw, 50vw",
+      width: 180,
+      height: 180
+    }
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/index.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/index.js
new file mode 100644
index 0000000..0d4fab6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/index.js
@@ -0,0 +1,2 @@
+export { cloudConfig } from './content';
+export { cloudCTASchema } from './schema';
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/meta.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/meta.js
new file mode 100644
index 0000000..dc01501
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/meta.js
@@ -0,0 +1,10 @@
+export const ctaMeta = {
+  title: "Cloud Investment Optimization | Tech4biz Solutions",
+  description: "Optimize your cloud infrastructure costs across AWS, Azure, and Google Cloud platforms. Start saving today with our expert solutions.",
+  keywords: "cloud optimization, AWS optimization, Azure optimization, Google Cloud optimization, cloud cost savings",
+  openGraph: {
+    title: "Maximize Your Cloud Investment",
+    description: "Save thousands on cloud infrastructure with expert optimization",
+    type: "website"
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/schema.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/schema.js
new file mode 100644
index 0000000..e6e51ae
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/config/schema.js
@@ -0,0 +1,34 @@
+export const cloudCTASchema = {
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "name": "Cloud Investment Optimization",
+  "description": "Cloud server deployment and optimization services for AWS, Azure, and Google Cloud platforms",
+  "provider": {
+    "@type": "Organization",
+    "name": "Tech4biz Solutions Private Limited",
+    "url": "https://tech4bizsolutions.com"
+  },
+  "offers": {
+    "@type": "Offer",
+    "description": "Cloud optimization services to reduce infrastructure and labor costs",
+    "price": "0",
+    "priceCurrency": "INR",
+    "availability": "https://schema.org/InStock"
+  },
+  "serviceType": "Cloud Optimization",
+  "areaServed": "Worldwide",
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "Cloud Optimization Services",
+    "itemListElement": [
+      {
+        "@type": "Offer",
+        "itemOffered": {
+          "@type": "Service",
+          "name": "Cloud Cost Optimization",
+          "description": "Reduce your cloud infrastructure costs"
+        }
+      }
+    ]
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/hooks/useInViewAnimation.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/hooks/useInViewAnimation.js
new file mode 100644
index 0000000..189b036
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/hooks/useInViewAnimation.js
@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+import { useAnimation, useInView } from 'framer-motion';
+import { debouncedAnimation } from '../utils/performance';
+
+export const useInViewAnimation = () => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  const controls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      debouncedAnimation(() => {
+        controls.start("visible");
+      });
+    }
+  }, [isInView, controls]);
+
+  return { ref, controls };
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/index.jsx
new file mode 100644
index 0000000..430097f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/index.jsx
@@ -0,0 +1,10 @@
+import  ErrorBoundary  from '@/components/common/error/ErrorBoundary';
+import CloudCTA from './CloudCTA';
+
+const CloudCTAWrapper = () => (
+  <ErrorBoundary>
+      <CloudCTA />
+  </ErrorBoundary>
+);
+
+export default CloudCTAWrapper;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/styles/CloudCTA.module.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/styles/CloudCTA.module.css
new file mode 100644
index 0000000..a8ba287
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/styles/CloudCTA.module.css
@@ -0,0 +1,112 @@
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}
+
+.container {
+  @apply w-full bg-light-primaryBg p-4 sm:p-6 md:p-8;
+}
+
+.wrapper {
+  @apply max-w-[80rem] mx-auto;
+}
+
+.content {
+  @apply bg-[#1F2937] rounded-[1.5rem] p-6 sm:p-8 md:p-12 flex flex-col gap-[1rem] relative overflow-hidden
+         border border-white/10 shadow-2xl;
+}
+
+.contentWrapper {
+  @apply flex flex-col md:flex-row md:items-center md:gap-16 gap-6;
+}
+
+.textContainer {
+  @apply w-full md:flex-[0.65];
+}
+
+.contentHeading {
+  @apply text-white text-[28px] sm:text-[30px] md:text-[32px] md:whitespace-nowrap font-[600] tracking-[0.03em] leading-[1.25] mb-4 font-sans uppercase;
+}
+
+.divider {
+  @apply w-[7rem] sm:w-[8rem] md:w-[9rem] h-[3px] bg-white/90 mb-6 md:mb-8;
+}
+
+.contentDescription {
+  @apply text-white/80 text-[14px] sm:text-[16px] md:text-[18px] font-[400] leading-[1.6] font-sans;
+}
+
+.buttonContainer {
+  @apply mt-6 sm:mt-8;
+}
+
+.button {
+  @apply bg-[#f4791f] text-white px-6 sm:px-8 py-3 sm:py-3.5 rounded-full text-[15px] sm:text-[16px] md:text-[17px] font-medium
+         flex items-center gap-2 hover:bg-[#ff8827] transition-all duration-300 text-nowrap
+         shadow-lg hover:shadow-xl hover:translate-y-[-2px] justify-center w-full sm:w-auto;
+}
+
+.buttonText {
+  @apply whitespace-nowrap;
+}
+
+.buttonIcon {
+  @apply h-4 w-4 sm:h-5 sm:w-5;
+}
+
+.imageContainer {
+  @apply hidden md:flex md:flex-[0.35] items-center justify-end relative;
+}
+
+.floatingImage {
+  @apply absolute !important;
+  min-width: 400px !important;
+  max-width: 400px !important;
+  width: 400px !important;
+  height: 120px !important;
+  right: -45px !important;
+  bottom: -120px !important;
+  opacity: 100 !important;
+  object-fit: contain !important;
+  filter: brightness(1.2) !important;
+  will-change: transform, opacity !important;
+}
+
+@media (max-width: 480px) {
+  .content {
+    @apply p-5;
+  }
+  
+  .contentHeading {
+    @apply text-[28px] leading-[1] mb-[0.5rem];
+  }
+  
+  .contentDescription {
+    @apply text-[14px] leading-[1.5];
+  }
+  
+  .divider {
+    @apply w-[6rem] mb-5;
+  }
+  
+  .button {
+    @apply px-5 py-2.5 text-[14px];
+  }
+  
+  .buttonIcon {
+    @apply h-4 w-4;
+  }
+}
+
+@media (min-width: 768px) {
+  .content {
+    @apply flex-row items-center justify-between;
+  }
+  
+  .buttonContainer {
+    @apply mt-0;
+  }
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/breakpoints.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/breakpoints.js
new file mode 100644
index 0000000..cc7026c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/breakpoints.js
@@ -0,0 +1,15 @@
+export const breakpoints = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px'
+};
+
+export const mediaQueries = {
+  sm: `@media (min-width: ${breakpoints.sm})`,
+  md: `@media (min-width: ${breakpoints.md})`,
+  lg: `@media (min-width: ${breakpoints.lg})`,
+  xl: `@media (min-width: ${breakpoints.xl})`,
+  '2xl': `@media (min-width: ${breakpoints['2xl']})`
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/performance.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/performance.js
new file mode 100644
index 0000000..97c392b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/performance.js
@@ -0,0 +1,24 @@
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+export const debouncedAnimation = debounce((callback) => {
+  requestAnimationFrame(callback);
+}, 16);
+
+export const preloadImage = (src) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = src;
+    img.onload = resolve;
+    img.onerror = reject;
+  });
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/variants.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/variants.js
new file mode 100644
index 0000000..258f025
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudCTA/utils/variants.js
@@ -0,0 +1,19 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: 0.6,
+      staggerChildren: 0.2
+    }
+  }
+};
+
+export const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5 }
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/CloudSlider.module.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/CloudSlider.module.css
new file mode 100644
index 0000000..821cfe7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/CloudSlider.module.css
@@ -0,0 +1,249 @@
+.container {
+    @apply min-h-screen bg-light-primaryBg flex flex-col items-center justify-center p-4;
+}
+
+.title {
+    @apply text-5xl font-bold text-center mb-16 font-sans;
+}
+
+.titleWhite {
+    @apply text-white;
+}
+
+.titleBlue {
+    @apply text-blue-500;
+}
+
+.sliderContainer {
+    @apply relative w-full max-w-[1200px] mx-auto;
+}
+
+.slide {
+    @apply rounded-xl relative overflow-hidden w-full mx-auto;
+    min-height: 552px;
+    height: auto;
+    padding: 2rem;
+    
+    @media (max-width: 768px) {
+      min-height: auto;
+      padding: 1rem;
+    }
+}
+
+.slideBackground {
+    @apply absolute inset-0 z-0;
+}
+
+.gradientOverlay {
+    @apply absolute inset-0 bg-gradient-to-br from-purple-500/10 to-emerald-500/5 pointer-events-none;
+}
+
+.contentWrapper {
+    @apply h-full flex flex-col relative z-10;
+    justify-content: space-between;
+    min-height: 552px;
+
+    @media (max-width: 768px) {
+      height: 100%;
+      justify-content: flex-start;
+      gap: 1.5rem;
+    }
+}
+
+.slideTitle {
+    @apply text-[24px] text-white font-sans font-semibold text-left;
+
+    @media (max-width: 768px) {
+      font-size: 20px;
+      position: relative;
+      top: 0;
+      left: 0;
+      margin-bottom: 1rem;
+    }
+}
+
+.pointsContainer {
+    @apply flex flex-col relative;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(200px, 1fr));
+    gap: 54px;
+    padding-top: 32px;
+    overflow: hidden;
+
+    @media (max-width: 768px) {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: calc(100% - 60px);
+      overflow-y: auto;
+    }
+}
+
+.pointWrapper {
+    @apply flex justify-center;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+
+    @media (max-width: 768px) {
+      transform-style: flat;
+      perspective: none;
+      width: 100%;
+    }
+}
+
+.navigationButtons {
+    @apply flex justify-center gap-4 mt-8;
+}
+
+.navButton {
+    @apply p-2 rounded-full bg-gray-800/30 hover:bg-gray-700/30 transition-colors backdrop-blur-sm;
+}
+
+.navIcon {
+    @apply w-5 h-5 text-white/80;
+}
+
+.progressBarContainer {
+    @apply absolute bottom-0 left-0 right-0 h-1 bg-gray-800/50;
+    z-index: 20;
+    overflow: hidden;
+}
+
+.progressBar {
+    @apply h-full bg-blue-500;
+    width: 0%;
+}
+
+/* Remove the animation for mobile */
+@media (min-width: 769px) {
+  .progressBar {
+    animation: progressAnimation 5s linear forwards;
+  }
+}
+
+@keyframes progressAnimation {
+    from {
+        width: 0%;
+    }
+    to {
+        width: 100%;
+    }
+}
+
+.deploymentPoint {
+    @apply flex items-start gap-3;
+    position: relative;
+
+    @media (max-width: 768px) {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 12px;
+      padding: 0.75rem;
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      transition: all 0.2s ease;
+      /* Removed backdrop-filter: blur(8px); */
+    }
+}
+
+
+.pointTitle {
+    @apply text-white font-medium tracking-wide font-sans text-[18px] leading-[27px];
+    
+    @media (max-width: 768px) {
+      font-size: 16px;
+      line-height: 1.3;
+      letter-spacing: 0.02em;
+    }
+}
+
+.newTag {
+    @apply px-1.5 py-0.5 text-[9px] bg-[#A3E635]/90 text-[#161616] rounded-[4px] uppercase tracking-wide font-medium;
+}
+
+.pointDescription {
+    @apply text-white font-sans font-medium text-[14px] leading-[21px] mt-1.5 max-w-[280px] text-left;
+    
+    @media (max-width: 768px) {
+      display: none; /* Hide descriptions only on mobile */
+      font-size: 13px;
+      line-height: 20px;
+      max-width: 100%;
+    }
+}
+
+.embla {
+    @apply relative w-full max-w-[1400px] mx-auto overflow-hidden;
+    padding: 1.6rem;
+
+    @media (max-width: 768px) {
+      padding: 1rem;
+    }
+}
+
+.emblaContainer {
+    @apply flex;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    will-change: transform;
+    transition: transform 200ms ease;
+}
+
+.emblaSlide {
+    flex: 0 0 80%;
+    margin: 0 2%;
+    position: relative;
+    overflow: hidden;
+
+    @media (max-width: 768px) {
+      flex: 0 0 calc(100% - 2rem);
+      margin: 0 1rem;
+      scroll-snap-align: center;
+    }
+}
+
+.slideContent {
+    @apply rounded-xl p-12 relative overflow-hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    background: linear-gradient(to bottom right, var(--light-primaryBg), var(--light-primaryBg));
+    min-height: 552px;
+    
+    @media (max-width: 768px) {
+      height: 480px;
+      padding: 1.25rem;
+      background: linear-gradient(200.96deg, rgba(var(--light-primaryBg-rgb), 0.95), rgba(var(--light-primaryBg-rgb), 0.98));
+    }
+}
+
+/* Additional adjustments to ensure proper spacing and sizing */
+@media (max-width: 768px) {
+  .pointsContainer {
+    gap: 12px;
+  }
+
+  .deploymentPoint {
+    padding: 0.75rem;
+    /* backdrop-filter removed */
+  }
+
+  .slideContent {
+    padding: 1.25rem;
+  }
+
+  .pointWrapper {
+    width: 100%;
+  }
+
+  .pointTitle {
+    font-size: 16px;
+  }
+
+  .newTag {
+    font-size: 10px;
+  }
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/CloudSliderNew.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/CloudSliderNew.jsx
new file mode 100644
index 0000000..578d94e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/CloudSliderNew.jsx
@@ -0,0 +1,292 @@
+import React, { useCallback, useRef, useEffect, useMemo, useState } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import cloudFeatures from './data/cloudFeatures.json';
+import styles from './CloudSlider.module.css';
+import { motion } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import cloudSliderSchema from './data/cloudSliderSchema.json';
+
+// Extract animation variants
+const pointAnimationVariants = {
+  mobile: {
+    initial: false,
+    animate: { opacity: 1, y: 0 },
+    transition: {
+      duration: 0.5,
+      ease: [0.25, 0.1, 0.25, 1],
+    },
+  },
+  desktop: {
+    initial: { opacity: 0, y: 20 },
+    animate: (isVisible) => ({
+      opacity: isVisible ? 1 : 0,
+      y: isVisible ? 0 : 20,
+    }),
+    transition: (index) => ({
+      duration: 0.8,
+      delay: index * 0.1,
+      ease: [0.25, 0.1, 0.25, 1],
+    }),
+  },
+};
+
+const DeploymentPoint = React.memo(({ point, index, isVisible, isMobile }) => {
+  // Memoize animation props based on device type
+  const animationProps = useMemo(() => {
+    const variant = isMobile ? pointAnimationVariants.mobile : pointAnimationVariants.desktop;
+    return {
+      initial: variant.initial,
+      animate: typeof variant.animate === 'function' 
+        ? variant.animate(isVisible) 
+        : variant.animate,
+      transition: typeof variant.transition === 'function'
+        ? variant.transition(index)
+        : variant.transition,
+    };
+  }, [isMobile, isVisible, index]);
+
+  return (
+    <motion.div
+      {...animationProps}
+      className={`${styles.deploymentPoint} ${isMobile ? styles.mobilePoint : ''}`}
+    >
+      <div>
+        <div className="flex items-center gap-2">
+          <h3 className={styles.pointTitle}>
+            {`${index + 1}. ${point.title}`}
+          </h3>
+          {point.isNew && (
+            <span className={styles.newTag}>New</span>
+          )}
+        </div>
+        <p className={styles.pointDescription}>{point.description}</p>
+      </div>
+    </motion.div>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison function for memo
+  return (
+    prevProps.point === nextProps.point &&
+    prevProps.isVisible === nextProps.isVisible &&
+    prevProps.isMobile === nextProps.isMobile &&
+    prevProps.index === nextProps.index
+  );
+});
+
+DeploymentPoint.displayName = 'DeploymentPoint'; // For better debugging
+
+export default function CloudSlider() {
+  const progressBarRef = useRef(null);
+  const animationFrame = useRef(null);
+  const startTimeRef = useRef(null);
+  const emblaRef = useRef(null);
+  const [emblaApi, setEmblaApi] = React.useState(null);
+  const [currentSlide, setCurrentSlide] = React.useState(0);
+  const [isMobile, setIsMobile] = React.useState(false);
+  const [isDesktop, setIsDesktop] = useState(true);
+
+  const [emblaCarouselRef, emblaCarouselApi] = useEmblaCarousel({
+    loop: true,
+    align: 'center',
+    skipSnaps: false,
+    containScroll: false,
+    dragFree: false,
+    startIndex: 0,
+    slidesToScroll: 1,
+    speed: 15,
+    breakpoints: {
+      '(max-width: 768px)': {
+        align: 'center',
+        containScroll: 'keepSnaps',
+        dragFree: true
+      }
+    }
+  }, [/* plugins if any */]);
+
+  const slides = cloudFeatures;
+
+  const animateProgress = useCallback((timestamp) => {
+    if (!isDesktop) return;
+
+    if (!startTimeRef.current) startTimeRef.current = timestamp;
+    const elapsed = timestamp - startTimeRef.current;
+    const duration = 5000; // 5 seconds
+    const progress = Math.min((elapsed / duration) * 100, 100);
+    
+    if (progressBarRef.current) {
+      progressBarRef.current.style.width = `${progress}%`;
+    }
+    
+    if (elapsed < duration) {
+      animationFrame.current = requestAnimationFrame(animateProgress);
+    } else {
+      if (emblaApi && isDesktop) {
+        emblaApi.scrollNext();
+      }
+      startTimeRef.current = null;
+      animationFrame.current = null;
+    }
+  }, [emblaApi, isDesktop]);
+
+  const startProgress = useCallback(() => {
+    if (animationFrame.current) {
+      cancelAnimationFrame(animationFrame.current);
+    }
+    animationFrame.current = requestAnimationFrame(animateProgress);
+  }, [animateProgress]);
+
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsDesktop(window.innerWidth > 768);
+    };
+
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
+
+  useEffect(() => {
+    if (emblaCarouselApi) {
+      setEmblaApi(emblaCarouselApi);
+      emblaCarouselApi.on('select', () => {
+        setCurrentSlide(emblaCarouselApi.selectedScrollSnap());
+        if (isDesktop) {
+          startProgress();
+        }
+      });
+
+      if (isDesktop) {
+        startProgress();
+      }
+    }
+
+    return () => {
+      if (animationFrame.current) {
+        cancelAnimationFrame(animationFrame.current);
+      }
+    };
+  }, [emblaCarouselApi, startProgress, isDesktop]);
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev();
+    startProgress();
+  }, [emblaApi, startProgress]);
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext();
+    startProgress();
+  }, [emblaApi, startProgress]);
+
+  const renderProgressBar = (index) => {
+    if (!isDesktop) {
+      return (
+        <div 
+          className={styles.progressBar} 
+          style={{ 
+            width: currentSlide === index ? '100%' : '0%',
+            transition: 'width 0.3s ease'
+          }}
+        />
+      );
+    }
+
+    return currentSlide === index && (
+      <div 
+        ref={progressBarRef}
+        className={styles.progressBar} 
+        style={{ width: '0%' }}
+      />
+    );
+  };
+
+  return (
+    <>
+      <Helmet>
+        {/* JSON-LD Schema */}
+        <script type="application/ld+json">
+          {JSON.stringify(cloudSliderSchema)}
+        </script>
+        
+        {/* Meta tags */}
+        <meta 
+          name="description" 
+          content="Explore our comprehensive cloud infrastructure deployment solutions including orchestration, security, performance, and business integration features."
+        />
+        <meta 
+          property="og:title" 
+          content="Cloud Infrastructure Deployments | Tech4biz Solutions"
+        />
+        <meta 
+          property="og:description" 
+          content="Discover advanced cloud infrastructure solutions with features for orchestration, security, performance optimization, and seamless business integration."
+        />
+        <meta property="og:type" content="website" />
+      </Helmet>
+      
+      <div className={styles.container}>
+        <h1 className={styles.title}>
+          <span className={styles.titleWhite}>Cloud Infrastructure </span>
+          <span className={styles.titleBlue}>Deployments</span>
+        </h1>
+
+        <div className={styles.embla} ref={emblaCarouselRef}>
+          <div className={styles.emblaContainer}>
+            {slides.map((slide, index) => (
+              <div key={index} className={styles.emblaSlide}>
+                <div className={styles.slideContent}>
+                  <div 
+                    className={styles.slideBackground}
+                    style={{
+                      backgroundImage: `url(${slide.backgroundImage})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                      opacity: 0.15
+                    }}
+                  />
+                  <div className={styles.gradientOverlay} />
+                  
+                  <div className={styles.contentWrapper}>
+                    <h2 className={styles.slideTitle}>{slide.title}</h2>
+                    <div className={styles.pointsContainer}>
+                      {slide.points.map((point, idx) => (
+                        <div key={idx} className={styles.pointWrapper}>
+                          <DeploymentPoint 
+                            point={point} 
+                            index={idx} 
+                            isVisible={currentSlide === index}
+                            isMobile={isMobile}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  <div className={styles.progressBarContainer}>
+                    {renderProgressBar(index)}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className={styles.navigationButtons}>
+          <button 
+            onClick={scrollPrev} 
+            className={styles.navButton} 
+            aria-label="Previous slide"
+          >
+            <ChevronLeft className={styles.navIcon} />
+          </button>
+          <button 
+            onClick={scrollNext} 
+            className={styles.navButton} 
+            aria-label="Next slide"
+          >
+            <ChevronRight className={styles.navIcon} />
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/components/Slide.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/components/Slide.jsx
new file mode 100644
index 0000000..56c9e78
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/components/Slide.jsx
@@ -0,0 +1,95 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { gsap } from 'gsap';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+// Extract animation configuration
+const ANIMATION_CONFIG = {
+  active: {
+    scale: 1,
+    opacity: 1,
+    duration: 1,
+    ease: 'power2.inOut',
+  },
+  inactive: {
+    scale: 0.85,
+    opacity: 0.5,
+    duration: 1,
+    ease: 'power2.inOut',
+  }
+};
+
+// Extract animation logic
+const useSlideAnimation = (slideRef, isActive) => {
+  useEffect(() => {
+    const slide = slideRef.current;
+    if (!slide) return;
+
+    const config = isActive ? ANIMATION_CONFIG.active : ANIMATION_CONFIG.inactive;
+    
+    const animation = gsap.to(slide, {
+      ...config,
+    });
+
+    return () => {
+      animation.kill(); // Cleanup animation on unmount or re-render
+    };
+  }, [isActive]);
+};
+
+const Slide = React.memo(({ image, index, currentSlide, totalSlides, isLoaded }) => {
+  const slideRef = useRef(null);
+  const isActive = index === currentSlide;
+
+  // Use extracted animation hook
+  useSlideAnimation(slideRef, isActive);
+
+  // Memoize slide info computation
+  const slideInfo = useCallback(() => ({
+    position: index + 1,
+    total: totalSlides
+  }), [index, totalSlides]);
+
+  return (
+    <div
+      ref={slideRef}
+      className="relative flex-shrink-0 w-full h-full bg-cover bg-center transform-gpu"
+      style={{ 
+        backgroundImage: `url(${image})`,
+        willChange: 'transform, opacity'
+      }}
+    >
+      <div className="absolute inset-0 bg-black bg-opacity-60 backdrop-filter backdrop-blur-sm" />
+      <div className="relative z-10 flex flex-col justify-between h-full p-4 md:p-8">
+        <div className="flex justify-between items-center">
+          <h2 className="text-2xl md:text-4xl font-bold text-white">
+            Slide {slideInfo().position}
+          </h2>
+          <span className="text-lg md:text-2xl text-white">
+            {slideInfo().position} / {slideInfo().total}
+          </span>
+        </div>
+      </div>
+      {isLoaded ? (
+        <img 
+          src={image} 
+          alt={`Slide ${index + 1}`} 
+          className={`transition-transform duration-500 ${currentSlide === index ? 'scale-100' : 'scale-95'}`} 
+        />
+      ) : (
+        <Skeleton height={600} width={800} />
+      )}
+    </div>
+  );
+}, (prevProps, nextProps) => {
+  // Custom comparison function for memo
+  return (
+    prevProps.image === nextProps.image &&
+    prevProps.currentSlide === nextProps.currentSlide ||
+    (prevProps.index !== prevProps.currentSlide && nextProps.index !== nextProps.currentSlide)
+  );
+});
+
+Slide.displayName = 'Slide'; // For better debugging
+export default Slide;
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/data/cloudFeatures.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/data/cloudFeatures.json
new file mode 100644
index 0000000..3ea0b60
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/data/cloudFeatures.json
@@ -0,0 +1,129 @@
+[
+  {
+    "title": "Public Cloud Orchestration and Design",
+    "description": "Enhance your cloud operations with unique features designed for adaptability, growth, and effortless performance.",
+    "backgroundImage": "/images/cloud/public-cloud-orchestration-and-design.webp",
+    "points": [
+      {
+        "title": "Dynamic Implementation",
+        "description": "Customize your cloud infrastructure with customizable deployment options that match your company's needs.",
+        "isNew": false
+      },
+      {
+        "title": "Automatic Scaling",
+        "description": "Automatically modify resources in real time to handle fluctuating workloads and needs with ease.",
+        "isNew": false
+      },
+      {
+        "title": "Support for several regions.",
+        "description": "Improve dependability and accessibility by implementing cloud solutions across several geographies.",
+        "isNew": false
+      },
+      {
+        "title": "Container Management",
+        "description": "Kubernetes-powered orchestration makes managing and deploying containerized apps simple.",
+        "isNew": true
+      },
+      {
+        "title": "Infrastructure as Code (IaC)",
+        "description": "Define and maintain infrastructure with contemporary IaC technologies.",
+        "isNew": true
+      }
+    ]
+  },
+  {
+    "title": "Features for Security and Compliance",
+    "backgroundImage": "/images/cloud/features-for-security-and-compliance.webp",
+    "description": "Strengthen the safety of your cloud setting with all-inclusive protection and adherence solutions.",
+    "points": [
+      {
+        "title": "Advanced encoding",
+        "description": "Using top-tier encryption standards ensures the security of your data both at rest and during transmission.",
+        "isNew": false
+      },
+      {
+        "title": "Regulatory Structure",
+        "description": "Effectively comply with rules like as HIPAA, GDPR, and others by utilizing built-in compliance tools.",
+        "isNew": false
+      },
+      {
+        "title": "Management of Identity",
+        "description": "Improve access management by incorporating role-based access control (RBAC) with Single Sign-On (SSO) for better IAM performance.",
+        "isNew": true
+      },
+      {
+        "title": "Monitoring for Security",
+        "description": "Take advantage of 24/7 threat detection and automatic incident response, ensuring comprehensive security and reassurance.",
+        "isNew": true
+      },
+      {
+        "title": "Log Auditing",
+        "description": "Maintain total accountability by preserving detailed audit trails that track all system actions for clarity.",
+        "isNew": false
+      }
+    ]
+  },
+  {
+    "title": "Performance and Scalability",
+    "backgroundImage": "/images/cloud/performance-and-scalability.webp",
+    "points": [
+      {
+        "title": "Global CDN",
+        "description": "A global content delivery network for best performance.",
+        "isNew": true
+      },
+      {
+        "title": "Load Balancing",
+        "description": "Intelligent traffic distribution ensures high availability.",
+        "isNew": false
+      },
+      {
+        "title": "Elastic Resources",
+        "description": "Dynamic resource allocation according to real-time demands.",
+        "isNew": false
+      },
+      {
+        "title": "Performance Monitoring",
+        "description": "Introducing real-time metrics and performance insights.",
+        "isNew": true
+      },
+      {
+        "title": "Disaster Recovery",
+        "description": "Automated backup and recovery solutions.",
+        "isNew": false
+      }
+    ]
+  },
+  {
+    "title": "Business Integration",
+    "backgroundImage": "/images/cloud/business-integration.webp",
+    "description": "Effortlessly link your cloud infrastructure using enterprise-grade integration tools to enhance operational efficiency.",
+    "points": [
+      {
+        "title": "API Management",
+        "description": "Streamline app development with an all-in-one API gateway and administration tools.",
+        "isNew": true
+      },
+      {
+        "title": "Mixed Cloud",
+        "description": "Combine public and private clouds for a hybrid infrastructure that adapts to your evolving needs.",
+        "isNew": false
+      },
+      {
+        "title": "Data Transfer",
+        "description": "Transfer data in a secure and efficient manner utilizing powerful corporate technologies developed for simple data migration.",
+        "isNew": false
+      },
+      {
+        "title": "DevOps Workflow",
+        "description": "Accelerate your deployment operations by leveraging integrated CI/CD solutions for automation and continuous delivery.",
+        "isNew": true
+      },
+      {
+        "title": "Organizational Assistance",
+        "description": "Experience round-the-clock specialist assistance suited to enterprise environments, ensuring maximum uptime and productivity.",
+        "isNew": false
+      }
+    ]
+  }
+]
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/data/cloudSliderSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/data/cloudSliderSchema.json
new file mode 100644
index 0000000..a559a03
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/data/cloudSliderSchema.json
@@ -0,0 +1,133 @@
+{
+  "@context": "https://schema.org",
+  "@type": "ItemList",
+  "name": "Cloud Infrastructure Deployments",
+  "description": "A comprehensive showcase of cloud infrastructure features including public cloud orchestration, security, performance, and business integration solutions.",
+  "numberOfItems": 4,
+  "itemListElement": [
+    {
+      "@type": "Product",
+      "name": "Public Cloud Orchestration and Design",
+      "description": "Enhance your cloud operations with unique features designed for adaptability, growth, and effortless performance.",
+      "image": "https://tech4bizsolutions.com/images/cloud/public-cloud-orchestration-and-design.webp",
+      "offers": {
+        "@type": "Offer",
+        "category": "Cloud Services",
+        "price": "0.00",
+        "priceCurrency": "USD",
+        "availability": "https://schema.org/InStock",
+        "priceValidUntil": "2025-12-31"
+      },
+      "additionalProperty": [
+        {
+          "@type": "PropertyValue",
+          "name": "Dynamic Implementation",
+          "value": "Customize your cloud infrastructure with customizable deployment options"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "Automatic Scaling",
+          "value": "Automatically modify resources in real time"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "Container Management",
+          "value": "Kubernetes-powered orchestration"
+        }
+      ]
+    },
+    {
+      "@type": "Product",
+      "name": "Features for Security and Compliance",
+      "description": "Strengthen the safety of your cloud setting with all-inclusive protection and adherence solutions.",
+      "image": "https://tech4bizsolutions.com/images/cloud/features-for-security-and-compliance.webp",
+      "offers": {
+        "@type": "Offer",
+        "category": "Security Services",
+        "price": "0.00",
+        "priceCurrency": "USD",
+        "availability": "https://schema.org/InStock",
+        "priceValidUntil": "2025-12-31"
+      },
+      "additionalProperty": [
+        {
+          "@type": "PropertyValue",
+          "name": "Advanced encoding",
+          "value": "Top-tier encryption standards"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "Regulatory Structure",
+          "value": "Built-in compliance tools"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "Security Monitoring",
+          "value": "24/7 threat detection"
+        }
+      ]
+    },
+    {
+      "@type": "Product",
+      "name": "Performance and Scalability",
+      "description": "Optimize performance and scalability with advanced features",
+      "image": "https://tech4bizsolutions.com/images/cloud/performance-and-scalability.webp",
+      "offers": {
+        "@type": "Offer",
+        "category": "Performance Services",
+        "price": "0.00",
+        "priceCurrency": "USD",
+        "availability": "https://schema.org/InStock",
+        "priceValidUntil": "2025-12-31"
+      },
+      "additionalProperty": [
+        {
+          "@type": "PropertyValue",
+          "name": "Global CDN",
+          "value": "Global content delivery network"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "Load Balancing",
+          "value": "Intelligent traffic distribution"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "Performance Monitoring",
+          "value": "Real-time metrics and insights"
+        }
+      ]
+    },
+    {
+      "@type": "Product",
+      "name": "Business Integration",
+      "description": "Effortlessly link your cloud infrastructure using enterprise-grade integration tools",
+      "image": "https://tech4bizsolutions.com/images/cloud/business-integration.webp",
+      "offers": {
+        "@type": "Offer",
+        "category": "Integration Services",
+        "price": "0.00",
+        "priceCurrency": "USD",
+        "availability": "https://schema.org/InStock",
+        "priceValidUntil": "2025-12-31"
+      },
+      "additionalProperty": [
+        {
+          "@type": "PropertyValue",
+          "name": "API Management",
+          "value": "All-in-one API gateway"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "Mixed Cloud",
+          "value": "Hybrid infrastructure solutions"
+        },
+        {
+          "@type": "PropertyValue",
+          "name": "DevOps Workflow",
+          "value": "Integrated CI/CD solutions"
+        }
+      ]
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/hooks/useHorizontalScroll.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/hooks/useHorizontalScroll.js
new file mode 100644
index 0000000..521a3fa
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/hooks/useHorizontalScroll.js
@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+// Add utility functions at the top
+const throttle = (func, limit) => {
+  let inThrottle;
+  return function(...args) {
+    if (!inThrottle) {
+      func.apply(this, args);
+      inThrottle = true;
+      setTimeout(() => inThrottle = false, limit);
+    }
+  };
+};
+
+const rafThrottle = (func) => {
+  let rafId = null;
+  return function(...args) {
+    if (rafId) return;
+    rafId = requestAnimationFrame(() => {
+      func.apply(this, args);
+      rafId = null;
+    });
+  };
+};
+
+const useHorizontalScroll = (scrollRef, setCurrentSlide, slidesCount) => {
+  const isScrolling = useRef(false);
+  const startX = useRef(0);
+  const startScrollLeft = useRef(0);
+
+  // Wrap handleScroll in requestAnimationFrame
+  const handleScroll = useCallback(
+    rafThrottle((deltaX) => {
+      if (!scrollRef.current) return;
+
+      const { scrollWidth, clientWidth } = scrollRef.current;
+      const maxScroll = scrollWidth - clientWidth;
+      const slideWidth = clientWidth;
+
+      let newScrollLeft = scrollRef.current.scrollLeft + deltaX;
+      newScrollLeft = Math.max(0, Math.min(newScrollLeft, maxScroll));
+
+      const currentSlideIndex = Math.round(newScrollLeft / slideWidth);
+      setCurrentSlide(currentSlideIndex);
+
+      scrollRef.current.scrollTo({
+        left: currentSlideIndex * slideWidth,
+        behavior: 'smooth',
+      });
+    }),
+    [setCurrentSlide]
+  );
+
+  // Throttle wheel events
+  const onWheel = useCallback(
+    throttle((e) => {
+      e.preventDefault();
+      const deltaX = e.deltaY;
+      handleScroll(deltaX);
+    }, 50), // 50ms throttle
+    [handleScroll]
+  );
+
+  // Throttle mouse move events
+  const onMouseMove = useCallback(
+    rafThrottle((e) => {
+      if (!isScrolling.current) return;
+      e.preventDefault();
+      const x = e.pageX - scrollRef.current.offsetLeft;
+      const deltaX = (startX.current - x) * 2;
+      handleScroll(deltaX);
+    }),
+    [handleScroll]
+  );
+
+  // Throttle touch move events
+  const onTouchMove = useCallback(
+    rafThrottle((e) => {
+      if (!isScrolling.current) return;
+      const x = e.touches[0].pageX - scrollRef.current.offsetLeft;
+      const deltaX = (startX.current - x) * 2;
+      handleScroll(deltaX);
+    }),
+    [handleScroll]
+  );
+
+  // Keep these handlers as is since they're not performance-critical
+  const onMouseDown = useCallback((e) => {
+    isScrolling.current = true;
+    startX.current = e.pageX - scrollRef.current.offsetLeft;
+    startScrollLeft.current = scrollRef.current.scrollLeft;
+  }, []);
+
+  const onMouseUp = useCallback(() => {
+    isScrolling.current = false;
+  }, []);
+
+  const onTouchStart = useCallback((e) => {
+    isScrolling.current = true;
+    startX.current = e.touches[0].pageX - scrollRef.current.offsetLeft;
+    startScrollLeft.current = scrollRef.current.scrollLeft;
+  }, []);
+
+  useEffect(() => {
+    const slider = scrollRef.current;
+    if (!slider) return;
+
+    // Clean up RAF on unmount
+    let rafId;
+    const cleanup = () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+    };
+
+    slider.addEventListener('wheel', onWheel, { passive: false });
+    slider.addEventListener('mousedown', onMouseDown);
+    slider.addEventListener('touchstart', onTouchStart);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchend', onMouseUp);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('touchmove', onTouchMove);
+
+    return () => {
+      cleanup();
+      slider.removeEventListener('wheel', onWheel);
+      slider.removeEventListener('mousedown', onMouseDown);
+      slider.removeEventListener('touchstart', onTouchStart);
+      window.removeEventListener('mouseup', onMouseUp);
+      window.removeEventListener('touchend', onMouseUp);
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('touchmove', onTouchMove);
+    };
+  }, [onWheel, onMouseDown, onMouseUp, onMouseMove, onTouchStart, onTouchMove]);
+
+  return { handleScroll };
+};
+
+export default useHorizontalScroll;
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/hooks/useIntersectionObserver.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/hooks/useIntersectionObserver.js
new file mode 100644
index 0000000..2c69947
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/CloudSlider/hooks/useIntersectionObserver.js
@@ -0,0 +1,31 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const useIntersectionObserver = (options) => {
+  const [inView, setInView] = useState(false);
+  const [node, setNode] = useState(null);
+
+  const ref = useCallback((node) => {
+    if (node !== null) {
+      setNode(node);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!node) return;
+
+    const observer = new IntersectionObserver(([entry]) => {
+      setInView(entry.isIntersecting);
+    }, options);
+
+    observer.observe(node);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [node, options]);
+
+  return [ref, inView];
+};
+
+export default useIntersectionObserver;
+
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/ChatContent.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/ChatContent.jsx
new file mode 100644
index 0000000..5ac23f6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/ChatContent.jsx
@@ -0,0 +1,27 @@
+import { useTypingAnimation } from "../../hooks/useTypingAnimation";
+import { TEXT_OPTIONS } from "../../constants";
+
+const ChatContent = () => {
+  const { displayText } = useTypingAnimation(TEXT_OPTIONS.CHAT);
+
+  return (
+    <div className="p-6 flex-1 overflow-y-auto">
+      <div className="flex items-start mb-4">
+        <div className="w-8 h-8 rounded-full bg-[#F97316] flex items-center justify-center text-white font-bold mr-3 flex-shrink-0">
+          T
+        </div>
+        <div>
+          <p className="text-gray-800 font-medium">GENAI Assistant</p>
+          <div className="mt-1">
+            <p className="text-gray-700">
+              {displayText}
+              <span className="animate-pulse">|</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatContent;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/InputArea.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/InputArea.jsx
new file mode 100644
index 0000000..817ddaf
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/InputArea.jsx
@@ -0,0 +1,28 @@
+const InputArea = () => {
+  return (
+    <div className="p-4 border-t border-gray-200">
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Ask GENAI Assistant..."
+          className="w-full px-4 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#F97316] focus:border-transparent"
+        />
+        <button className="absolute right-2 top-1/2 transform -translate-y-1/2 text-[#F97316] hover:text-[#ed7f32]">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fillRule="evenodd"
+              d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default InputArea;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/Navbar.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/Navbar.jsx
new file mode 100644
index 0000000..c2c761f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/Navbar.jsx
@@ -0,0 +1,25 @@
+const Navbar = () => {
+  return (
+    <div className="flex items-center justify-between px-4 py-2 border-b border-gray-200">
+      <div className="flex items-center">
+        <svg
+          className="w-5 h-5 text-[#F97316] mr-2"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+        >
+          <circle cx="12" cy="12" r="10" fill="currentColor" />
+          <path
+            d="M12 6v12M6 12h12"
+            stroke="white"
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+        </svg>
+        <span className="font-medium text-gray-800">GENAI Solutions</span>
+      </div>
+      <div className="flex space-x-2">{/* Add navbar buttons */}</div>
+    </div>
+  );
+};
+
+export default Navbar;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/index.jsx
new file mode 100644
index 0000000..7c726b7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/ChatInterface/index.jsx
@@ -0,0 +1,16 @@
+import Navbar from "./Navbar";
+import ChatContent from "./ChatContent";
+import InputArea from "./InputArea";
+
+const ChatInterface = () => {
+  return (
+    <div className="flex-1 flex flex-col relative bg-white/5 backdrop-blur-sm rounded-lg shadow-lg overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent pointer-events-none"></div>
+      <Navbar />
+      <ChatContent />
+      <InputArea />
+    </div>
+  );
+};
+
+export default ChatInterface;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/HeroContent/AnimatedText.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/HeroContent/AnimatedText.jsx
new file mode 100644
index 0000000..5de80d4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/HeroContent/AnimatedText.jsx
@@ -0,0 +1,52 @@
+import { motion } from "framer-motion";
+import { useState, useEffect } from "react";
+import { TEXT_OPTIONS } from "../../constants";
+
+const AnimatedText = () => {
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTextIndex(
+        (prevIndex) => (prevIndex + 1) % TEXT_OPTIONS.HERO.length,
+      );
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+        className="text-4xl md:text-5xl lg:text-6xl font-bold text-white flex flex-wrap"
+      >
+        <span className="mr-4">Generate</span>
+        <div className="relative inline-block h-[60px] min-w-[200px]">
+          {TEXT_OPTIONS.HERO.map((text, index) => (
+            <span
+              key={text}
+              className={`absolute left-0 transition-opacity duration-500 ${
+                index === currentTextIndex ? "opacity-100" : "opacity-0"
+              }`}
+            >
+              {text}
+            </span>
+          ))}
+        </div>
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 0.5, delay: 0.2 }}
+        className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mt-2"
+      >
+        with <span className="text-[#F97316]">GENAI Solutions</span>
+      </motion.div>
+    </div>
+  );
+};
+
+export default AnimatedText;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/HeroContent/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/HeroContent/index.jsx
new file mode 100644
index 0000000..fef90d1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/HeroContent/index.jsx
@@ -0,0 +1,56 @@
+import { motion } from "framer-motion";
+import { Link } from "react-router-dom"; // Import Link from react-router-dom
+import AnimatedText from "./AnimatedText";
+
+const HeroContent = () => {
+  return (
+    <div className="w-full lg:w-1/2">
+      <div className="space-y-6">
+        <AnimatedText />
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5, delay: 0.3 }}
+          className="text-lg text-gray-300 max-w-xl"
+        >
+          Harness the power of Generative AI to transform traditional workflows
+          into intelligent, adaptive processes. Our solutions are built on
+          advanced large language models and diffusion techniques, enabling the
+          generation of text, images, and code that seamlessly align with your
+          specific needs.
+        </motion.p>
+        <div className="space-y-4 pt-4">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5, delay: 0.4 }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            {/* Replace <a> with <Link> for client-side navigation */}
+            <Link
+              to="/generative-ai"
+              className="inline-flex items-center px-8 py-3 bg-[#F97316] text-white font-medium rounded-md hover:bg-[#ed7f32] transition-colors"
+            >
+              <span>Get started with GENAI</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5 ml-2"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </Link>
+          </motion.div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroContent;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/MainMenu.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/MainMenu.jsx
new file mode 100644
index 0000000..efbcad9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/MainMenu.jsx
@@ -0,0 +1,31 @@
+const MainMenu = () => {
+  return (
+    <div className="px-3 py-2 border-b border-gray-200">
+      <div className="text-xs font-semibold text-gray-500 mb-2 px-2">
+        MAIN MENU
+      </div>
+      <div className="space-y-1">
+        <div className="flex items-center px-2 py-1.5 bg-gray-200 rounded-md text-sm font-medium text-gray-900">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="h-4 w-4 mr-2"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+            />
+          </svg>
+          Chat
+        </div>
+        {/* Add other menu items */}
+      </div>
+    </div>
+  );
+};
+
+export default MainMenu;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/RecentChats.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/RecentChats.jsx
new file mode 100644
index 0000000..1a139a6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/RecentChats.jsx
@@ -0,0 +1,28 @@
+const RecentChats = () => {
+  return (
+    <div className="px-3 py-2 flex-1 overflow-y-auto">
+      <div className="flex items-center justify-between">
+        <div className="text-xs font-semibold text-gray-500 mb-2 px-2">
+          RECENT CHATS
+        </div>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4 text-gray-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </div>
+      <div className="space-y-1">{/* Recent chat items */}</div>
+    </div>
+  );
+};
+
+export default RecentChats;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/SidebarHeader.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/SidebarHeader.jsx
new file mode 100644
index 0000000..5c84891
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/SidebarHeader.jsx
@@ -0,0 +1,47 @@
+const SidebarHeader = () => {
+  return (
+    <div className="p-3 border-b border-gray-200">
+      <button className="w-full flex items-center justify-between rounded-md bg-white p-2 text-sm font-medium text-gray-700 shadow-sm border border-gray-200 hover:bg-gray-50">
+        <span>New chat</span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fillRule="evenodd"
+            d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+
+      <div className="mt-3 flex items-center text-sm text-gray-600 hover:text-gray-900 cursor-pointer">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="h-4 w-4 mr-2"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+          />
+        </svg>
+        Settings
+      </div>
+    </div>
+  );
+};
+
+export default SidebarHeader;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/index.jsx
new file mode 100644
index 0000000..75d2840
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/components/Sidebar/index.jsx
@@ -0,0 +1,15 @@
+import SidebarHeader from "./SidebarHeader";
+import MainMenu from "./MainMenu";
+import RecentChats from "./RecentChats";
+
+const Sidebar = () => {
+  return (
+    <div className="w-[180px] bg-gray-50 border-r border-gray-200 flex flex-col h-full">
+      <SidebarHeader />
+      <MainMenu />
+      <RecentChats />
+    </div>
+  );
+};
+
+export default Sidebar;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/constants/index.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/constants/index.js
new file mode 100644
index 0000000..75b452b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/constants/index.js
@@ -0,0 +1,18 @@
+export const TEXT_OPTIONS = {
+  HERO: ["text", "images", "code", "insights"],
+  CHAT: [
+    "Explore the possibilities of AI-generated content with me. I can help you craft unique and relevant content that speaks to your target audience and drives conversions.",
+    "Want to stay ahead of the curve? I can analyze market trends and provide actionable insights for growth using generative AI.",
+    "Let me help you draft professional business communications that maintain your brand voice and deliver results with AI-assisted content creation.",
+  ],
+};
+
+export const BACKGROUND_STYLES = {
+  main: {
+    backgroundColor: "#1b1b1b",
+    backgroundImage:
+      "url('https://joule.keydesign.xyz/ai-copywriting-tool/wp-content/uploads/sites/6/2024/12/joule-gird-large.svg')",
+    backgroundPosition: "center center",
+    backgroundSize: "cover",
+  },
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/hooks/useTypingAnimation.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/hooks/useTypingAnimation.js
new file mode 100644
index 0000000..e1fa87c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/hooks/useTypingAnimation.js
@@ -0,0 +1,31 @@
+import { useState, useEffect } from "react";
+
+export const useTypingAnimation = (textOptions) => {
+  const [displayText, setDisplayText] = useState("");
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentTextIndex, setCurrentTextIndex] = useState(0);
+
+  useEffect(() => {
+    if (currentIndex < textOptions[currentTextIndex].length) {
+      const timeout = setTimeout(
+        () => {
+          setDisplayText(
+            (prev) => prev + textOptions[currentTextIndex][currentIndex],
+          );
+          setCurrentIndex((prev) => prev + 1);
+        },
+        30 + Math.random() * 40,
+      );
+      return () => clearTimeout(timeout);
+    } else {
+      const timeout = setTimeout(() => {
+        setDisplayText("");
+        setCurrentIndex(0);
+        setCurrentTextIndex((prev) => (prev + 1) % textOptions.length);
+      }, 3000);
+      return () => clearTimeout(timeout);
+    }
+  }, [currentIndex, currentTextIndex, textOptions]);
+
+  return { displayText };
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/index.jsx
new file mode 100644
index 0000000..c833242
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Genai/index.jsx
@@ -0,0 +1,34 @@
+import { motion } from "framer-motion";
+import { BACKGROUND_STYLES } from "./constants";
+import HeroContent from "./components/HeroContent";
+import Sidebar from "./components/Sidebar";
+import ChatInterface from "./components/ChatInterface";
+
+const GenAISection = () => {
+  return (
+    <div
+      className="min-h-[75vh] relative overflow-hidden"
+      style={BACKGROUND_STYLES.main}
+    >
+      <div className="container mx-auto px-8 py-12 h-[75vh] flex items-center">
+        <HeroContent />
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.7, delay: 0.2 }}
+        className="absolute bottom-0 right-0 z-10 hidden lg:flex bg-white rounded-tl-xl shadow-2xl overflow-hidden"
+        style={{
+          width: "45%",
+          height: "550px",
+        }}
+      >
+        <Sidebar />
+        <ChatInterface />
+      </motion.div>
+    </div>
+  );
+};
+
+export default GenAISection;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/Hero.jsx
new file mode 100644
index 0000000..1e030b2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/Hero.jsx
@@ -0,0 +1,153 @@
+// Hero.jsx
+import React, { lazy, Suspense, useState, useCallback, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { debounce } from 'lodash';
+import { ANIMATION_VARIANTS } from './animations/heroAnimations';
+import ErrorBoundary from '@components/common/error/ErrorBoundary';
+import AsyncComponent from '@utils/AsyncComponent';
+import CRMModalForm from '@components/modals/CRMModalForm';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+import heroSchema from './schema/heroSchema.json';
+
+const VideoPreview = lazy(() => 
+  import('./components/VideoPreview')
+);
+const LogoCarousel = lazy(() => 
+  import('./components/LogoCarousel')
+);
+
+const Hero = () => {
+  const handleButtonClick = useCallback(
+    debounce((action) => {
+      // Your action handling logic
+    }, 300),
+    []
+  );
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const toggleModal = useCallback((state) => setIsModalVisible(state), []);
+
+  const openModal = () => {
+    setIsModalVisible(true);
+  };
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+  };
+
+  return (
+    <>
+      <ErrorBoundary>
+        <div className="min-h-screen bg-light-primaryBg text-light-primaryText overflow-hidden relative">
+          <Helmet>
+            <meta property="og:title" content="Tech4biz - Advanced IT Services for Business Transformation" />
+            <meta property="og:description" content="Reshaping businesses with comprehensive IT solutions including cloud computing, data management, security, networking, and IT support." />
+            <meta property="og:type" content="website" />
+            <meta property="og:url" content="https://www.tech4bizsolutions.com/" />
+            
+            <script type="application/ld+json">
+              {JSON.stringify(heroSchema)}
+            </script>
+          </Helmet>
+
+          <motion.div 
+            className="mx-auto px-4 py-8 pt-16 md:py-16 md:pt-24 max-w-7xl"
+            variants={ANIMATION_VARIANTS.container}
+            initial="hidden"
+            animate="visible"
+          >
+            <motion.div 
+              className="max-w-6xl mx-auto text-center space-y-6"
+              variants={ANIMATION_VARIANTS.item}
+            >
+              <motion.h1 
+                className="text-4xl md:text-6xl lg:text-7xl font-heading font-bold bg-clip-text text-transparent bg-gradient-to-r from-light-primaryText to-gray-300 leading-tight"
+                variants={ANIMATION_VARIANTS.item}
+              >
+                Reshaping the businesses with advanced IT services.
+              </motion.h1>
+              
+              <p 
+                className="text-[16px] md:text-xl text-light-primaryText font-body max-w-3xl mx-auto leading-relaxed"
+                variants={ANIMATION_VARIANTS.item}
+              >
+                Stay competitive in today's digital world with Tech4Biz's comprehensive IT services. From hassle-free cloud computing to robust data protection, we provide reliable &amp; efficient technology to help the business succeed.
+              </p>
+
+              <motion.div 
+                className="flex flex-col sm:flex-row gap-4 justify-center pt-6"
+                variants={ANIMATION_VARIANTS.item}
+              >
+                <motion.button
+                  className="w-full sm:w-[300px] px-6 py-3 bg-light-primaryAccent font-body rounded-full text-light-primaryText hover:bg-light-primaryHoverColor transition-colors flex items-center justify-center"
+                  whileHover={{ 
+                    scale: 1.05,
+                    boxShadow: "0 0 20px rgba(37, 99, 235, 0.5)",
+                    transition: { duration: 0.2, ease: "easeOut" }
+                  }}
+                  whileTap={{ 
+                    scale: 0.95,
+                    boxShadow: "0 0 5px rgba(37, 99, 235, 0.5)"
+                  }}
+                  initial={{ boxShadow: "0 0 0px rgba(37, 99, 235, 0)" }}
+                  onClick={() => openModal(true)}
+                  aria-label="Connect with our expertise"
+                >
+                  <span className="flex items-center justify-center gap-2">
+                    Connect with Expertise
+                    <ArrowRight className="w-4 h-4" />
+                  </span>
+                </motion.button>
+
+                <Link to='/contact' className="w-full sm:w-auto">
+                  <motion.button
+                    className="w-full sm:w-[200px] px-6 py-3 border border-white/20 rounded-full text-white font-medium hover:bg-white/10 transition-colors flex items-center justify-center"
+                    whileHover={{ 
+                      scale: 1.05,
+                      backgroundColor: "rgba(255, 255, 255, 0.1)",
+                      borderColor: "rgba(255, 255, 255, 0.4)",
+                      transition: { duration: 0.2, ease: "easeOut" }
+                    }}
+                    whileTap={{ 
+                      scale: 0.95,
+                      backgroundColor: "rgba(255, 255, 255, 0.05)"
+                    }}
+                    onClick={() => handleButtonClick('contact')}
+                    aria-label="Contact us"
+                  >
+                    <span className="flex items-center justify-center gap-2">
+                      Choose Us
+                      <ArrowRight className="w-4 h-4" />
+                    </span>
+                  </motion.button>
+                </Link>
+              </motion.div>
+            </motion.div>
+
+            <AsyncComponent
+              component={VideoPreview}
+              fallback={
+                <div className="mt-16 h-96 animate-pulse bg-blue-600/20 rounded-2xl" />
+              }
+            />
+
+            <AsyncComponent
+              component={LogoCarousel}
+              fallback={
+                <div className="mt-20 h-32 animate-pulse bg-white/5 rounded-lg" />
+              }
+            />
+          </motion.div>
+        </div>
+      </ErrorBoundary>
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={handleModalClose}
+        source="Landing page Banner" 
+      />
+    </>
+  );
+}
+
+export default Hero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/animations/heroAnimations.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/animations/heroAnimations.js
new file mode 100644
index 0000000..54b7e69
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/animations/heroAnimations.js
@@ -0,0 +1,17 @@
+export const ANIMATION_VARIANTS = {
+  container: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { delayChildren: 0.5, staggerChildren: 0.6 }
+    }
+  },
+  item: {
+    hidden: { y: 30, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.2, ease: "easeOut" }
+    }
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/components/LogoCarousel.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/components/LogoCarousel.jsx
new file mode 100644
index 0000000..a13bede
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/components/LogoCarousel.jsx
@@ -0,0 +1,57 @@
+import React, { memo, useMemo } from 'react';
+import { motion } from 'framer-motion';
+import heroContent from '../config/heroContent.json';
+
+const LogoCarousel = memo(() => {
+  const duplicatedBrands = useMemo(() => 
+    [...heroContent.trustedBrands, ...heroContent.trustedBrands],
+    []
+  );
+
+  const carouselVariants = useMemo(() => ({
+    animate: {
+      x: [0, -50 * heroContent.trustedBrands.length],
+      transition: {
+        x: {
+          repeat: Infinity,
+          repeatType: "loop",
+          duration: 15,
+          ease: "linear",
+        },
+      },
+    },
+  }), []);
+
+  return (
+    <div className="mt-20 text-center">
+      <h3 className="text-sm font-medium tracking-wider text-gray-400 mb-8">
+        TRUSTED BY INDUSTRY LEADERS
+      </h3>
+      <div className="relative overflow-hidden w-full">
+        <motion.div
+          className="flex items-center gap-8 md:gap-12"
+          variants={carouselVariants}
+          animate="animate"
+        >
+          {duplicatedBrands.map((brand, index) => (
+            <motion.div
+              key={`${brand.id}-${index}`}
+              className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
+              whileHover={{ scale: 1.1 }}
+            >
+              <img
+                src={brand.logo}
+                alt={`${brand.name} logo`}
+                className="h-6 md:h-8 w-auto object-contain filter brightness-0 invert opacity-50 hover:opacity-100 transition-all duration-300"
+                loading="lazy"
+              />
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+});
+
+LogoCarousel.displayName = 'LogoCarousel';
+export default LogoCarousel;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/components/VideoPreview.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/components/VideoPreview.jsx
new file mode 100644
index 0000000..3cb3365
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/components/VideoPreview.jsx
@@ -0,0 +1,307 @@
+import React, { memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import heroContent from '../config/heroContent.json';
+import { debounce } from 'lodash';
+
+const VideoPreview = memo(() => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+  const videoRef = useRef(null);
+  const observerRef = useRef(null);
+  const intervalRef = useRef(null);
+
+  // Loading and error states
+  const [videoError, setVideoError] = useState(null);
+  const [isBuffering, setIsBuffering] = useState(true);
+
+  // Access the current slide from the JSON content
+  const currentSlide = useMemo(() => 
+    heroContent.hero.slides[currentIndex], 
+    [currentIndex]
+  );
+
+  // Intersection Observer setup
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '50px',
+      threshold: 0.1
+    };
+
+    observerRef.current = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting && isPlaying) {
+          handlePlayPause();
+        }
+      });
+    }, options);
+
+    if (videoRef.current) {
+      observerRef.current.observe(videoRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [isPlaying]);
+
+  // Video loading and error handling
+  useEffect(() => {
+    if (videoRef.current) {
+      const video = videoRef.current;
+
+      const handleCanPlayThrough = () => {
+        setIsBuffering(false);
+        setIsVideoLoaded(true);
+        setVideoError(null);
+      };
+
+      const handleWaiting = () => {
+        setIsBuffering(true);
+      };
+
+      const handleError = (error) => {
+        setVideoError(error);
+        setIsPlaying(false);
+        setIsVideoLoaded(false);
+        console.error('Video loading error:', error);
+      };
+
+      const handleStalled = () => {
+        setIsBuffering(true);
+      };
+
+      video.addEventListener('canplaythrough', handleCanPlayThrough);
+      video.addEventListener('waiting', handleWaiting);
+      video.addEventListener('error', handleError);
+      video.addEventListener('stalled', handleStalled);
+
+      video.load();
+
+      return () => {
+        video.removeEventListener('canplaythrough', handleCanPlayThrough);
+        video.removeEventListener('waiting', handleWaiting);
+        video.removeEventListener('error', handleError);
+        video.removeEventListener('stalled', handleStalled);
+      };
+    }
+  }, []);
+
+  // Play/pause handling
+  const handlePlayPause = async () => {
+    if (!videoRef.current || !isVideoLoaded) return;
+
+    try {
+      if (isPlaying) {
+        await videoRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        setVideoError(null);
+        if (videoRef.current.readyState >= 3) {
+          await videoRef.current.play();
+          setIsPlaying(true);
+        } else {
+          setIsBuffering(true);
+          await new Promise((resolve) => {
+            videoRef.current.addEventListener('canplay', resolve, { once: true });
+          });
+          await videoRef.current.play();
+          setIsPlaying(true);
+        }
+      }
+    } catch (error) {
+      setVideoError(error);
+      setIsPlaying(false);
+      console.error('Video playback error:', error);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (videoRef.current) {
+        videoRef.current.pause();
+      }
+    };
+  }, []);
+
+  // Slide interval handling
+  useEffect(() => {
+    if (!isPlaying) {
+      intervalRef.current = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % heroContent.hero.slides.length);
+      }, 5000);
+    } else {
+      clearInterval(intervalRef.current);
+    }
+
+    return () => clearInterval(intervalRef.current);
+  }, [isPlaying]);
+
+  const slideVariants = useMemo(() => ({
+    heading: {
+      enter: { x: -100, opacity: 0 },
+      center: { x: 0, opacity: 1 },
+      exit: { x: 100, opacity: 0 }
+    },
+    subheading: {
+      enter: { x: 100, opacity: 0 },
+      center: { x: 0, opacity: 1 },
+      exit: { x: -100, opacity: 0 }
+    }
+  }), []);
+
+  const backgroundVariants = useMemo(() => ({
+    initial: { scale: 1.05, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 1.05, opacity: 0 }
+  }), []);
+
+  const debouncedSlideChange = useCallback(
+    debounce((newIndex) => {
+      setCurrentIndex(newIndex);
+    }, 200),
+    []
+  );
+
+  return (
+    <motion.div 
+      className="relative w-full h-[600px] mt-12 rounded-2xl overflow-hidden" 
+      style={{ transform: "translateZ(0)", willChange: "transform", backfaceVisibility: "hidden" }}
+    >
+      <video
+        ref={videoRef}
+        className="absolute inset-0 w-full h-full object-cover"
+        style={{
+          opacity: isPlaying ? 1 : 0,
+          transition: "opacity 0.6s ease-in-out",
+          transform: "translateZ(0)",
+          willChange: "opacity"
+        }}
+        preload="metadata"
+        playsInline
+        muted
+        loop
+        onLoadedData={() => setIsVideoLoaded(true)}
+      >
+        <source src={heroContent.hero.video} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+
+      {isBuffering && !videoError && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/50">
+          <span className="text-white">Loading video...</span>
+        </div>
+      )}
+
+      {videoError && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/50">
+          <span className="text-white">Failed to load video. Please try again.</span>
+        </div>
+      )}
+
+      <AnimatePresence mode="popLayout">
+        {!isPlaying && (
+          <motion.div
+            key={`slide-container-${currentIndex}`}
+            className="relative w-full h-full"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+          >
+            <motion.div 
+              className="absolute inset-0 w-full h-full"
+              variants={backgroundVariants}
+              transition={{ duration: 0.7 }}
+            >
+              <img 
+                src={currentSlide.background}
+                alt={currentSlide.heading}
+                className="absolute inset-0 w-full h-full object-cover"
+                fetchpriority={currentIndex <= 1 ? "high" : "auto"}
+                loading={currentIndex <= 1 ? "eager" : "lazy"}
+                decoding="async"
+              />
+              <div
+                className="absolute inset-0"
+                style={{
+                  background: "linear-gradient(135deg, rgba(27,27,27,0.92) 0%, rgba(27,27,27,0.85) 50%, rgba(27,27,27,0.95) 100%)"
+                }}
+              />
+            </motion.div>
+            
+            <motion.div 
+              className="absolute inset-0 flex items-center justify-center z-10 px-4"
+              style={{ transform: "translateZ(0)", willChange: "opacity, transform", background: "transparent", pointerEvents: "none" }}
+              variants={{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }}
+              transition={{ duration: 0.7 }}
+            >
+              <div 
+                className="relative z-20 flex flex-col items-center justify-center text-center"
+                style={{ perspective: "1000px", transformStyle: "preserve-3d" }}
+              >
+                <AnimatePresence mode="popLayout">
+                  <motion.h2
+                    className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-syne leading-tight max-w-4xl mx-auto text-center relative z-20 text-white"
+                    style={{ textShadow: "0 2px 4px rgba(0,0,0,0.3)" }}
+                    variants={slideVariants.heading}
+                    key={`heading-${currentIndex}`}
+                    initial="enter"
+                    animate="center"
+                    exit="exit"
+                    transition={{ duration: 0.7, ease: [0.4, 0.0, 0.2, 1] }}
+                  >
+                    {currentSlide.heading}
+                  </motion.h2>
+                </AnimatePresence>
+
+                <AnimatePresence mode="popLayout">
+                  <motion.p
+                    className="block text-base sm:text-lg md:text-xl lg:text-2xl mt-2 md:mt-4 font-poppins opacity-90 relative text-white max-w-3xl mx-auto text-center"
+                    style={{ textShadow: "0 2px 4px rgba(0,0,0,0.3)" }}
+                    variants={slideVariants.subheading}
+                    key={`subheading-${currentIndex}`}
+                    initial="enter"
+                    animate="center"
+                    exit="exit"
+                    transition={{ duration: 0.7, ease: [0.4, 0.0, 0.2, 1] }}
+                  >
+                    {currentSlide.subheading}
+                  </motion.p>
+                </AnimatePresence>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <motion.button
+        className="absolute top-4 right-4 z-50 flex items-center gap-2 px-4 py-2 bg-black/40 rounded-full text-white hover:bg-black/60 transition-all duration-300"
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={handlePlayPause}
+        disabled={!isVideoLoaded || isBuffering || Boolean(videoError)}
+        aria-label={isPlaying ? "Pause video" : "Play video"}
+      >
+        <motion.svg 
+          className="w-5 h-5" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          {isPlaying ? (
+            <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" fill="currentColor"/>
+          ) : (
+            <path d="M8 5.14v14l11-7-11-7z" fill="currentColor"/>
+          )}
+        </motion.svg>
+        {isPlaying ? 'Pause' : 'Play'}
+      </motion.button>
+    </motion.div>
+  );
+});
+
+VideoPreview.displayName = 'VideoPreview';
+export default VideoPreview;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/config/heroContent.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/config/heroContent.json
new file mode 100644
index 0000000..59018d9
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/config/heroContent.json
@@ -0,0 +1,35 @@
+{
+  "hero": {
+    "video": "/videos/Tech4biz.mp4",
+    "slides": [
+      {
+        "heading": "Business Technology Solutions",
+        "subheading": "Technology Solutions for Business Efficiency",
+        "background": "/images/banners/Img-1.webp"
+      },
+      {
+        "heading": "Cloud-First Business Strategy",
+        "subheading": "Smart Technology for Better Business",
+        "background": "/images/banners/Img-2.webp"
+      },
+      {
+        "heading": "AI-Driven Business Growth",
+        "subheading": "Optimizing Growth with Data Strategy",
+        "background": "/images/banners/Img-3.webp"
+      },
+      {
+        "heading": "Cybersecurity Excellence",
+        "subheading": "Protecting Your Digital Assets 24/7",
+        "background": "/images/banners/Img-4.webp"
+      }
+    ]
+  },
+  "trustedBrands": [
+    { "id": 1, "name": "AWS", "logo": "/images/logos/aws.webp" },
+    { "id": 3, "name": "OpenAI", "logo": "/images/logos/openai.webp" },
+    { "id": 4, "name": "ISO", "logo": "/images/logos/iso.webp" },
+    { "id": 5, "name": "IBM", "logo": "/images/logos/ibm.webp" },
+    { "id": 6, "name": "Cloudtopia", "logo": "/images/logos/Cloudtopia.webp" },
+    { "id": 7, "name": "Azure", "logo": "/images/logos/azure.webp" }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/schema/heroSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/schema/heroSchema.json
new file mode 100644
index 0000000..20620f6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/Hero/schema/heroSchema.json
@@ -0,0 +1,94 @@
+{
+  "@context": "https://schema.org",
+  "@type": "WebContent",
+  "headline": "Reshaping the businesses with advanced IT services",
+  "description": "Tech4Biz Solutions delivers end-to-end engineering solutions, seamlessly integrating hardware and software for 360-degree problem-solving. From design to deployment, we optimize innovation and ensure excellence at every stage.",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Tech4biz",
+    "url": "https://www.tech4bizsolutions.com/"
+  },
+  "mainEntityOfPage": {
+    "@type": "WebPage",
+    "@id": "https://www.tech4bizsolutions.com/"
+  },
+  "video": {
+    "@type": "VideoObject",
+    "name": "Tech4biz Services Overview",
+    "description": "Overview of Tech4biz's comprehensive IT services and solutions",
+    "thumbnailUrl": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+    "uploadDate": "2024-01-01",
+    "contentUrl": "https://tech4bizsolutions.com/videos/Tech4biz.mp4"
+  },
+  "offers": {
+    "@type": "AggregateOffer",
+    "offerCount": "4",
+    "offers": [
+      {
+        "@type": "Offer",
+        "name": "Business Technology Solutions",
+        "description": "Technology Solutions for Business Efficiency"
+      },
+      {
+        "@type": "Offer",
+        "name": "Cloud-First Business Strategy",
+        "description": "Smart Technology for Better Business"
+      },
+      {
+        "@type": "Offer",
+        "name": "AI-Driven Business Growth",
+        "description": "Optimizing Growth with Data Strategy"
+      },
+      {
+        "@type": "Offer",
+        "name": "Cybersecurity Excellence",
+        "description": "Protecting Your Digital Assets 24/7"
+      }
+    ]
+  },
+  "potentialAction": {
+    "@type": "ContactAction",
+    "name": "Connect with Expertise",
+    "target": "https://www.tech4bizsolutions.com/contact"
+  },
+  "about": {
+    "@type": "Thing",
+    "name": "IT Services",
+    "description": "Comprehensive IT solutions including cloud computing, data management, security, networking, and IT support"
+  },
+  "sponsor": {
+    "@type": "ItemList",
+    "itemListElement": [
+      {
+        "@type": "Organization",
+        "name": "AWS",
+        "image": "/images/logos/aws.webp"
+      },
+      {
+        "@type": "Organization",
+        "name": "OpenAI",
+        "image": "/images/logos/openai.webp"
+      },
+      {
+        "@type": "Organization",
+        "name": "ISO",
+        "image": "/images/logos/iso.webp"
+      },
+      {
+        "@type": "Organization",
+        "name": "IBM",
+        "image": "/images/logos/ibm.webp"
+      },
+      {
+        "@type": "Organization",
+        "name": "Cloudtopia",
+        "image": "/images/logos/Cloudtopia.webp"
+      },
+      {
+        "@type": "Organization",
+        "name": "Azure",
+        "image": "/images/logos/azure.webp"
+      }
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/OurServices.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/OurServices.jsx
new file mode 100644
index 0000000..dbe38dd
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/OurServices.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import ErrorBoundary from '@/components/common/error/ErrorBoundary';
+import businessServices from './config/businessServices.json';
+import { experienceSchema } from './config/serviceSchema';
+import { Helmet } from 'react-helmet-async';
+import { useExperienceData } from './hooks/useExperienceData';
+import ExperienceHeader from './components/ExperienceHeader';
+import ExperienceCard from './components/ExperienceCard';
+import { LoadingFallback } from '@/components/common/LoadingFallback';
+
+const OurServices = () => {
+  const { experiences, isLoading } = useExperienceData();
+
+  return (
+    <ErrorBoundary>
+      <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">        
+        <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(experienceSchema)}
+        </script>
+          <meta name="description" content={businessServices.metaDescription} />
+          <meta name="keywords" content="AI Healthcare, Quantum Computing, 3D Engineering Design, EV PCB Design, Tech4biz Solutions" />
+          
+          <meta property="og:title" content={`${businessServices.title} | Tech4biz Solutions`} />
+          <meta property="og:description" content={businessServices.metaDescription} />
+          <meta property="og:type" content="website" />
+        </Helmet>
+
+        <ExperienceHeader />
+
+        {isLoading ? (
+          <LoadingFallback />
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+            {experiences.map((experience, index) => (
+              <ExperienceCard key={experience.id} {...experience} index={index} />
+            ))}
+          </div>
+        )}
+      </section>
+    </ErrorBoundary>
+  );
+};
+
+export default OurServices;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/components/ExperienceCard.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/components/ExperienceCard.jsx
new file mode 100644
index 0000000..0ad9f4f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/components/ExperienceCard.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { ArrowRight, Monitor, Cpu, Box, BatteryCharging } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+// Map icons directly based on experience ID
+const EXPERIENCE_ICONS = {
+  'exp-0': Monitor,
+  'exp-1': Cpu,
+  'exp-2': Box,
+  'exp-3': BatteryCharging,
+};
+
+const ExperienceCard = (props) => {
+  const { id, title, description, stats, slug } = props;
+  const IconComponent = EXPERIENCE_ICONS[id];
+
+  return (
+    <div 
+      className="group relative bg-white rounded-xl p-6 md:p-8 shadow transition-transform duration-300 ease hover:-translate-y-1 hover:shadow-lg"
+    >
+      {/* Icon background now hidden by default and only visible on hover */}
+      <div className="absolute top-0 right-0 w-32 h-32 bg-blue-100 opacity-0 rounded-bl-full transition-all duration-300 group-hover:opacity-20 group-hover:bg-blue-150"></div>
+
+      <div className="relative">
+        <div className="flex items-start gap-4 mb-6">
+          <div className="p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg">
+            {IconComponent && <IconComponent className="w-6 h-6 text-white" aria-hidden="true" />}
+          </div>
+          <div>
+            <h3 className="text-xl lg:text-2xl font-bold text-gray-800 mb-2 line-clamp-2 font-poppins">
+              {title}
+            </h3>
+            {stats && (
+              <span className="inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-semibold rounded-full">
+                {stats}
+              </span>
+            )}
+          </div>
+        </div>
+
+        <p className="text-gray-600 leading-relaxed mb-6 line-clamp-4 lg:line-clamp-none">
+          {description}
+        </p>
+
+        <Link 
+          to={`/business-services/${slug}`}
+          className="inline-flex items-center text-blue-600 font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 group"
+          aria-label={`Learn more about ${title}`}
+        >
+          <span className="mr-2">Learn More</span>
+          <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(ExperienceCard);
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/components/ExperienceHeader.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/components/ExperienceHeader.jsx
new file mode 100644
index 0000000..05d9b4f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/components/ExperienceHeader.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import businessServices from '../config/businessServices.json';
+
+const ExperienceHeader = () => {
+  return (
+    <div className="section-header text-center mb-16 lg:mb-24 animate-fadeIn">
+      <h2 className="text-lg text-gray-600 mb-4 animate-slideDown">
+        {businessServices.subtitle}
+      </h2>
+      <h1 className="text-3xl lg:text-5xl font-bold text-gray-900 mb-6 max-w-3xl mx-auto leading-tight animate-slideUp">
+        {businessServices.title}
+      </h1>
+      <div className="w-24 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto rounded-full animate-scaleX" />
+    </div>
+  );
+};
+
+export default React.memo(ExperienceHeader);
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/config/businessServices.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/config/businessServices.json
new file mode 100644
index 0000000..685af78
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/config/businessServices.json
@@ -0,0 +1,35 @@
+{
+  "title": "How Our Services Will Help You to Grow Your Business",
+  "subtitle": "Innovative solutions to elevate your business.",
+  "metaDescription": "Explore our innovative services in AI, Quantum Computing, 3D Design, and EV Technology to accelerate your business growth.",
+  "experiences": [
+    {
+      "id": "exp-0",
+      "title": "Improving healthcare with AI.",
+      "description": "Using modern AI technology, we want to alter and restructure healthcare by raising the quality of medical services and improving patient outcomes.",
+      "stats": "100% AI-Driven",
+      "slug": "revolutionizing-healcare-through-ai"
+    },
+    {
+      "id": "exp-1",
+      "title": "Acceleration in Quantum Computing",
+      "description": "With more advanced hardware, quantum computing can be made more efficient. This will allow complex problems to be solved faster and meet high-demand computing needs in a timescale that has never been seen before.",
+      "stats": "100x Faster",
+      "slug": "acceleration-in-quantam-computing"
+    },
+    {
+      "id": "exp-2",
+      "title": "3D Engineering Design",
+      "description": "Our advanced design and engineering approaches provide efficient, cost-effective solutions, resulting in outstanding project and product outcomes.",
+      "stats": "$200,000 savings.",
+      "slug": "three-d-engineering-design"
+    },
+    {
+      "id": "exp-3",
+      "title": "EV PCB board designs",
+      "description": "Utilize modern technology to reduce emissions, guiding your business and customers toward a safer, more sustainable future.",
+      "stats": "zero emissions",
+      "slug": "ev-pcb-borads-design"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/config/serviceSchema.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/config/serviceSchema.js
new file mode 100644
index 0000000..fd5f113
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/config/serviceSchema.js
@@ -0,0 +1,84 @@
+export const experienceSchema = {
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Tech4biz Solutions Private Limited",
+  "url": "https://tech4bizsolutions.com",
+  "logo": {
+    "@type": "ImageObject",
+    "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+    "width": "180",
+    "height": "36"
+  },
+  "sameAs": [
+    "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+    "https://x.com/Tech4bizContact",
+    "https://www.youtube.com/@Tech4bizz",
+    "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+  ],
+  "mainEntity": {
+    "@type": "ContactPoint",
+    "telephone": "+1-415-870-3091",
+    "email": "contact@tech4biz.io",
+    "contactType": "Customer Service",
+    "areaServed": "IN",
+    "availableLanguage": ["English", "Hindi", "Kannada"],
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout",
+      "addressLocality": "Bangalore",
+      "addressRegion": "Karnataka",
+      "postalCode": "560102",
+      "addressCountry": "IN"
+    }
+  },
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "Business Growth Services",
+    "itemListElement": [
+      {
+        "@type": "Service",
+        "name": "AI Healthcare Solutions",
+        "description": "Using modern AI technology, we want to alter and restructure healthcare by raising the quality of medical services and improving patient outcomes.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "AI Services",
+        "areaServed": "Worldwide"
+      },
+      {
+        "@type": "Service",
+        "name": "Quantum Computing Solutions",
+        "description": "With more advanced hardware, quantum computing can be made more efficient. This will allow complex problems to be solved faster and meet high-demand computing needs.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "Quantum Computing",
+        "areaServed": "Worldwide"
+      },
+      {
+        "@type": "Service",
+        "name": "3D Engineering Design",
+        "description": "Our advanced design and engineering approaches provide efficient, cost-effective solutions, resulting in outstanding project and product outcomes.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "3D Design",
+        "areaServed": "Worldwide"
+      },
+      {
+        "@type": "Service",
+        "name": "EV PCB Board Designs",
+        "description": "Utilize modern technology to reduce emissions, guiding your business and customers toward a safer, more sustainable future.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "EV Technology",
+        "areaServed": "Worldwide"
+      }
+    ]
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/hooks/useExperienceData.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/hooks/useExperienceData.js
new file mode 100644
index 0000000..bf34eb0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/hooks/useExperienceData.js
@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+import businessServices from '../config/businessServices.json';
+
+export const useExperienceData = () => {
+  const [experiences, setExperiences] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    setExperiences(businessServices.experiences);
+    setIsLoading(false);
+  }, []);
+
+  return { experiences, isLoading };
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/styles/animate.module.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/styles/animate.module.css
new file mode 100644
index 0000000..eceb8c0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/OurServices/styles/animate.module.css
@@ -0,0 +1,9 @@
+/* styles/animate-hover.css */
+.animate-hover {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+  
+  .animate-hover:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/components/ProjectCard/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/components/ProjectCard/index.jsx
new file mode 100644
index 0000000..414d88d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/components/ProjectCard/index.jsx
@@ -0,0 +1,51 @@
+import React, { memo } from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import { animations } from '../../config/animations'
+import { Link } from 'react-router-dom'
+
+const ProjectCard = memo(({ project }) => {
+  return (
+    <motion.div
+      className="relative overflow-hidden rounded-lg group"
+      variants={animations.itemVariants}
+      whilehover={{ scale: 1.02 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="aspect-[4/3] relative">
+        <img
+          src={project.imagePath}
+          alt={project.title}
+          className="object-cover w-full h-full transition-transform duration-500"
+          loading="lazy"
+          width="800"
+          height="600"
+          decoding="async"
+          fetchpriority="auto"
+          srcSet={`${project.imagePath}?w=480 480w, ${project.imagePath}?w=800 800w, ${project.imagePath}?w=1200 1200w`}
+          sizes="(max-width: 768px) 100vw, 50vw"
+          style={{ willChange: 'transform' }}
+        />
+        <div className="absolute inset-0 bg-black/40 transition-opacity" />
+      </div>
+      <div className="p-6">
+        <h3 className="text-xl font-semibold mb-2 text-gray-200 font-poppins">{project.title}</h3>
+        <p className="text-gray-200 text-sm mb-4">{project.description}</p>
+        <motion.button
+          className="inline-flex items-center gap-2 text-sm focus:outline-none focus:ring-2 focus:ring-yellow-500"
+          whilehover={{ x: 5 }}
+          whileTap={{ scale: 0.95 }}
+          aria-label={`Read more about ${project.title}`}
+        >
+          <span className='font-semibold text-[#2563EB]' >
+            <Link to={`/business-solutions/${project.slug}`}>Read More</Link>
+          </span>
+          <ArrowRight className="w-4 h-4 text-[#2563EB]" aria-hidden="true" />
+        </motion.button>
+      </div>
+    </motion.div>
+  )
+})
+
+ProjectCard.displayName = 'ProjectCard'
+export default ProjectCard 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/components/ProjectHero/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/components/ProjectHero/index.jsx
new file mode 100644
index 0000000..22bf375
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/components/ProjectHero/index.jsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import { animations } from '../../config/animations'
+import { Link } from 'react-router-dom'
+
+export default function ProjectHero() {
+  return (
+    <>
+      <motion.div className="mb-24" variants={animations.itemVariants}>
+        <h1 className="text-4xl md:text-6xl font-bold max-w-4xl mb-8 text-gray-200">
+          Empowering businesses with cutting-edge solutions and innovative technology
+        </h1>
+        <motion.button
+          className="inline-flex items-center gap-2 px-6 py-3 rounded-full border border-white/20 hover:bg-white/10 transition-colors focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 focus:ring-offset-gray-900"
+          whilehover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          aria-label="Explore Services"
+        >
+          <span className='font-semibold font-poppins'>
+             <Link to='/services'>
+            Explore Our Services
+             </Link>
+            </span>
+          <ArrowRight className="w-4 h-4" aria-hidden="true" />
+        </motion.button>
+      </motion.div>
+
+      <motion.div className="mb-24 max-w-2xl" variants={animations.itemVariants}>
+        <p className="text-lg text-gray-200">
+          <span className="text-[#2563EB] font-poppins">AI processing solutions</span> with{' '}
+          <span className="text-[#2563EB] font-poppins">ASIC</span> and{' '}
+          <span className="text-[#2563EB] font-poppins">FPGA architectures</span>. Our expertise helps businesses achieve superior performance while significantly reducing costs compared to traditional cloud solutions.
+        </p>
+      </motion.div>
+    </>
+  )
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/animations.js
new file mode 100644
index 0000000..03d9fc2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/animations.js
@@ -0,0 +1,24 @@
+export const animations = {
+  containerVariants: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3,
+      },
+    },
+  },
+  
+  itemVariants: {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { 
+        duration: 0.5,
+        ease: 'easeOut' 
+      },
+    },
+  }
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/projectShowcaseSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/projectShowcaseSchema.json
new file mode 100644
index 0000000..fbacc64
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/projectShowcaseSchema.json
@@ -0,0 +1,72 @@
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Tech4biz Solutions Private Limited",
+  "url": "https://tech4bizsolutions.com",
+  "logo": {
+    "@type": "ImageObject",
+    "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+    "width": "180",
+    "height": "36"
+  },
+  "sameAs": [
+    "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+    "https://x.com/Tech4bizContact",
+    "https://www.youtube.com/@Tech4bizz",
+    "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+  ],
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "AI Processing Solutions",
+    "itemListElement": [
+      {
+        "@type": "Service",
+        "name": "Deployment of ASIC AI",
+        "description": "Use huge AI models on our ASIC boards to outperform Google Cloud and AWS FPGA instances while reducing query invocation costs by hundreds.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "AI Processing",
+        "areaServed": "Worldwide",
+        "image": "/images/services/others/ASIC-AI-Deployment.webp"
+      },
+      {
+        "@type": "Service",
+        "name": "Improved Efficiency",
+        "description": "Improved speed, performance, and multitasking capabilities enable larger AI models to generate faster results.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "AI Processing",
+        "areaServed": "Worldwide",
+        "image": "/images/services/others/Accelerated-Performance.webp"
+      },
+      {
+        "@type": "Service",
+        "name": "Advanced FPGA Design",
+        "description": "Creative FPGA architectures utilizing Artificial Neural Networks (ANN) and Convolutional Neural Networks (CNN) for efficient AI computation.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "FPGA Architecture",
+        "areaServed": "Worldwide",
+        "image": "/images/services/others/Advanced-FPGA-Architecture.webp"
+      },
+      {
+        "@type": "Service",
+        "name": "Flexible Solutions",
+        "description": "We offer adaptable systems that evolve with the needs of our customers, giving increased software speed and effective, high-performance AI processing for optimal results.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "Adaptive Computing",
+        "areaServed": "Worldwide",
+        "image": "/images/services/others/Adaptive-Solutions.webp"
+      }
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/projectsContent.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/projectsContent.json
new file mode 100644
index 0000000..055f0d6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/config/projectsContent.json
@@ -0,0 +1,28 @@
+{
+  "projects": [
+    {
+      "title": "Deployment of ASIC AI",
+      "slug": "deployment-of-asic-ai",
+      "description": "Use huge AI models on our ASIC boards to outperform Google Cloud and AWS FPGA instances while reducing query invocation costs by hundreds.",
+      "imagePath": "/images/services/others/ASIC-AI-Deployment.webp"
+    },
+    {
+      "title": "Improved Efficiency",
+      "slug": "improved-efficiency",
+      "description": "Improved speed, performance, and multitasking capabilities enable larger AI models to generate faster results.",
+      "imagePath": "/images/services/others/Accelerated-Performance.webp"
+    },
+    {
+      "title": "Advanced FPGA Design",
+      "slug": "advanced-fpga-design",
+      "description": "Creative FPGA architectures utilizing Artificial Neural Networks (ANN) and Convolutional Neural Networks (CNN) for efficient AI computation.",
+      "imagePath": "/images/services/others/Advanced-FPGA-Architecture.webp"
+    },
+    {
+      "title": "Flexible Solutions",
+      "slug": "flexible-solutions",
+      "description": "We offer adaptable systems that evolve with the needs of our customers, giving increased software speed and effective, high-performance AI processing for optimal results.",
+      "imagePath": "/images/services/others/Adaptive-Solutions.webp"
+    }
+  ]
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/hooks/useProjectAnimation.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/hooks/useProjectAnimation.js
new file mode 100644
index 0000000..d07d0b2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/hooks/useProjectAnimation.js
@@ -0,0 +1,24 @@
+import { useRef, useState, useEffect } from 'react'
+import { debounce } from '../utils/optimizations'
+
+export default function useProjectAnimation() {
+  const containerRef = useRef(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      debounce(([entry]) => {
+        setIsVisible(entry.isIntersecting)
+      }, 100),
+      { threshold: 0.1 }
+    )
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [])
+
+  return { containerRef, isVisible }
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/index.jsx
new file mode 100644
index 0000000..71a5744
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/index.jsx
@@ -0,0 +1,57 @@
+'use client'
+
+import React from 'react'
+import { motion } from 'framer-motion'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
+import ErrorBoundary from '@components/common/error/ErrorBoundary'
+import projectsData from './config/projectsContent.json'
+import projectShowcaseSchema from './config/projectShowcaseSchema.json'
+import { animations } from './config/animations'
+import useProjectAnimation from './hooks/useProjectAnimation'
+import ProjectCard from './components/ProjectCard'
+import ProjectHero from './components/ProjectHero'
+
+const { projects } = projectsData;
+
+export default function ProjectShowcase() {
+  const { containerRef, isVisible } = useProjectAnimation()
+
+  return (
+    <ErrorBoundary>
+      <HelmetProvider>
+        <div className="min-h-screen bg-light-primaryBg text-white">
+          <Helmet>
+            <meta 
+              name="description" 
+              content="Advanced AI processing solutions with ASIC and FPGA architectures for superior performance and cost efficiency by Tech4biz Solutions."
+            />
+            <meta property="og:title" content="AI Processing Solutions | Tech4biz" />
+            <meta property="og:description" content="Advanced AI processing solutions with ASIC and FPGA architectures for superior performance and cost efficiency." />
+            <script type="application/ld+json">
+              {JSON.stringify(projectShowcaseSchema)}
+            </script>
+          </Helmet>
+
+          <motion.div
+            ref={containerRef}
+            className="container mx-auto px-4 py-16 md:py-24"
+            variants={animations.containerVariants}
+            initial="hidden"
+            animate={isVisible ? "visible" : "hidden"}
+          >
+            <ProjectHero />
+
+            <motion.div 
+              className="grid grid-cols-1 md:grid-cols-2 gap-8"
+              variants={animations.containerVariants}
+            >
+              {projects.map((project) => (
+                <ProjectCard key={project.title} project={project} />
+              ))}
+            </motion.div>
+          </motion.div>
+        </div>
+      </HelmetProvider>
+    </ErrorBoundary>
+  )
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/utils/optimizations.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/utils/optimizations.js
new file mode 100644
index 0000000..d9f0de3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/buisnessSolution/utils/optimizations.js
@@ -0,0 +1,22 @@
+export const debounce = (func, wait) => {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+export const throttle = (func, limit) => {
+  let inThrottle
+  return function executedFunction(...args) {
+    if (!inThrottle) {
+      func(...args)
+      inThrottle = true
+      setTimeout(() => inThrottle = false, limit)
+    }
+  }
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/CardSlider.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/CardSlider.jsx
new file mode 100644
index 0000000..aecbbae
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/CardSlider.jsx
@@ -0,0 +1,83 @@
+import { memo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Helmet } from "react-helmet-async";
+import { slides } from "./config/serviceSliderSlides.json";
+import serviceSliderSchema from "./config/serviceSlider.schema.json";
+import useSlider from "./hooks/useSlider";
+
+// Components Imports
+import Controls from "./components/Controls";
+import MobileLayout from "./components/MobileLayout";
+import DesktopLayout from "./components/DesktopLayout";
+
+const CardSlider = () => {
+  const {
+    currentIndex,
+    isPlaying,
+    handleNext,
+    handlePrev,
+    togglePlayPause
+  } = useSlider(slides.length);
+
+  // Memoize the slide rendering function
+  const renderSlide = (item, index) => {
+    if (index !== currentIndex) return null;
+    
+    return (
+      <motion.div
+        key={item.id}
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -50 }}
+        transition={{ duration: 0.6 }}
+        className="absolute w-full flex flex-col items-center justify-center h-[700px]"
+      >
+          <MobileLayout slide={slides[index]} />
+          <DesktopLayout slide={slides[index]} />
+      </motion.div>
+    );
+  };
+
+  return (
+    <>
+      <Helmet>
+        <meta 
+          name="description" 
+          content={serviceSliderSchema.metaTags.description} 
+        />
+        <meta 
+          property="og:title" 
+          content={serviceSliderSchema.metaTags.title} 
+        />
+        <meta 
+          property="og:description" 
+          content={serviceSliderSchema.metaTags.description} 
+        />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content={slides[currentIndex]?.image} />
+        <script type="application/ld+json">
+          {JSON.stringify(serviceSliderSchema)}
+        </script>
+      </Helmet>
+      <div className="relative w-full bg-light-primaryBg flex flex-col justify-center items-center h-[700px]">
+        <div
+          className="bg-light-primaryBg w-full overflow-hidden relative h-[700px]"
+        >
+          <AnimatePresence>
+            {slides.map((item, index) => renderSlide(item, index))}
+          </AnimatePresence>
+            <Controls
+              isPlaying={isPlaying}
+              currentSlide={currentIndex}
+              totalSlides={slides.length}
+              onPrevClick={handlePrev}
+              onNextClick={handleNext}
+              onPlayPauseClick={togglePlayPause}
+            />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default memo(CardSlider);
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/Controls.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/Controls.jsx
new file mode 100644
index 0000000..b68fb75
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/Controls.jsx
@@ -0,0 +1,69 @@
+import { memo, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Pause, Play } from 'lucide-react';
+import styles from '../styles/slider.module.css';
+import { ARIA_LABELS } from '../utils/constants';
+
+const Controls = memo(({ 
+  isPlaying, 
+  currentSlide, 
+  totalSlides, 
+  onPrevClick, 
+  onNextClick, 
+  onPlayPauseClick 
+}) => {
+  // Memoize the handler functions to prevent unnecessary re-renders
+  const handlePrevClick = useCallback(() => {
+    onPrevClick();
+  }, [onPrevClick]);
+
+  const handleNextClick = useCallback(() => {
+    onNextClick();
+  }, [onNextClick]);
+
+  const handlePlayPauseClick = useCallback(() => {
+    onPlayPauseClick();
+  }, [onPlayPauseClick]);
+
+  return (
+    <>
+      <div className="absolute bottom-8 left-8 z-10">
+        <button
+          onClick={handlePlayPauseClick}
+          className={styles['slider-controls']}
+          aria-label={isPlaying ? ARIA_LABELS.PAUSE : ARIA_LABELS.PLAY}
+        >
+          {isPlaying ? (
+            <Pause className="w-6 h-6 text-white" />
+          ) : (
+            <Play className="w-6 h-6 text-white" />
+          )}
+        </button>
+      </div>
+
+      <div className="absolute bottom-8 right-8 flex items-center space-x-4 z-10">
+        <button
+          onClick={handlePrevClick}
+          className={styles['slider-controls']}
+          aria-label={ARIA_LABELS.PREV}
+        >
+          <ChevronLeft className="w-6 h-6 text-white" />
+        </button>
+        <div className="text-white text-lg font-medium">
+          {currentSlide + 1}/{totalSlides}
+        </div>
+        <button
+          onClick={handleNextClick}
+          className={styles['slider-controls']}
+          aria-label={ARIA_LABELS.NEXT}
+        >
+          <ChevronRight className="w-6 h-6 text-white" />
+        </button>
+      </div>
+    </>
+  );
+});
+
+// Add prop types checking for better development experience
+Controls.displayName = 'Controls';
+
+export default Controls;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/DesktopLayout.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/DesktopLayout.jsx
new file mode 100644
index 0000000..d9af6ce
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/DesktopLayout.jsx
@@ -0,0 +1,67 @@
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { DIMENSIONS, ICON_SIZES } from '../utils/constants';
+import styles from '../styles/slider.module.css';
+
+const DesktopLayout = memo(({ slide }) => {
+  return (
+    <div className="hidden lg:grid grid-cols-2 h-full items-center">
+      {/* Image Animation */}
+      <motion.div
+        initial={{ scale: 1.1, opacity: 0, y: -150 }} // Start with a slight scale and opacity
+        animate={{ scale: 1, opacity: 1, y: 0 }}  // Animate back to normal position
+        exit={{ scale: 1.1, opacity: 0, y: 100 }} // Exit by scaling up and fading out
+        transition={{ duration: 0.5 }}
+        className="relative w-full h-[700px] flex items-center justify-center" // Fixed height
+      >
+        <img 
+          src={slide.image}
+          alt={slide.title}
+          width={DIMENSIONS.DESKTOP_IMAGE_WIDTH}
+          height={DIMENSIONS.SLIDER_HEIGHT}
+          className="w-full h-full object-cover"
+          loading="eager"
+          decoding="async"
+          sizes="50vw"
+        />
+        <div className={styles['image-gradient-desktop']} />
+      </motion.div>
+
+      {/* Text and Button Animations */}
+      <div className="flex flex-col justify-center pl-32 pr-16 bg-light-primaryBg text-light-primaryText"
+      
+      >
+        <motion.h1
+          initial={{ y: 100, opacity: 0 }} 
+          animate={{ y: 0, opacity: 1 }}   // Final position with full opacity
+          transition={{ delay: 0.3 }}
+          className="text-5xl font-bold mb-8 font-poppins"
+        >
+          {slide.title}
+        </motion.h1>
+
+        <motion.p
+          initial={{ y: 100, opacity: 0 }}  // Start from below and fade in
+          animate={{ y: 0, opacity: 1 }}   // Animate into original position
+          transition={{ delay: 0.4 }}
+          className="text-xl text-gray-300 mb-12 max-w-xl"
+        >
+          {slide.description}
+        </motion.p>
+        <Link 
+          to={`/slider-detail/${slide.id}`}
+          className={`${styles['slider-button']} ${styles['desktop-button']}`}
+        >
+          <span className='font-semibold' >Read more</span>
+          <ChevronRight className={`w-${ICON_SIZES.DESKTOP.WIDTH} h-${ICON_SIZES.DESKTOP.HEIGHT}`} />
+        </Link>
+      </div>
+    </div>
+  );
+});
+
+DesktopLayout.displayName = 'DesktopLayout';
+
+export default DesktopLayout;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/MobileLayout.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/MobileLayout.jsx
new file mode 100644
index 0000000..cb80126
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/components/MobileLayout.jsx
@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { DIMENSIONS, ICON_SIZES } from '../utils/constants';
+import styles from '../styles/slider.module.css';
+
+const MobileLayout = memo(({ slide }) => {
+  return (
+    <div className="lg:hidden flex flex-col h-full">
+      <motion.div
+        initial={{ scale: 1.1 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.7 }}
+        className={`relative w-full h-[${DIMENSIONS.MOBILE_IMAGE_HEIGHT}px]`}
+      >
+        <img 
+          src={slide.image}
+          alt={slide.title}
+          width={DIMENSIONS.DESKTOP_IMAGE_WIDTH}
+          height={DIMENSIONS.MOBILE_IMAGE_HEIGHT}
+          className={`w-full h-[${DIMENSIONS.MOBILE_IMAGE_HEIGHT}px] object-cover`}
+          loading="lazy"
+          decoding="async"
+          sizes="(max-width: 768px) 100vw"
+        />
+        <div className={styles['image-gradient-mobile']} />
+      </motion.div>
+      <div className="flex flex-col justify-center px-6 py-8 h-1/2 bg-light-primaryBg text-light-primaryText">
+        <motion.h2
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.3 }}
+          className="text-2xl font-bold mb-4 font-poppins"
+        >
+          {slide.title}
+        </motion.h2>
+        <motion.p
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.4 }}
+          className="text-base text-gray-300 mb-6"
+        >
+          {slide.description}
+        </motion.p>
+        <Link 
+          to={`/slider-detail/${slide.id}`}
+          className={`${styles['slider-button']} ${styles['mobile-button']}`}
+        >
+          <span className='font-semibold'>Read more</span>
+          <ChevronRight className={`w-${ICON_SIZES.MOBILE.WIDTH} h-${ICON_SIZES.MOBILE.HEIGHT}`} />
+        </Link>
+      </div>
+    </div>
+  );
+});
+
+MobileLayout.displayName = 'MobileLayout';
+
+export default MobileLayout;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/config/serviceSlider.schema.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/config/serviceSlider.schema.json
new file mode 100644
index 0000000..0d50af1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/config/serviceSlider.schema.json
@@ -0,0 +1,117 @@
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Tech4biz Solutions Private Limited",
+  "url": "https://tech4bizsolutions.com",
+  "logo": {
+    "@type": "ImageObject",
+    "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+    "width": "180",
+    "height": "36"
+  },
+  "sameAs": [
+    "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+    "https://x.com/Tech4bizContact",
+    "https://www.youtube.com/@Tech4bizz",
+    "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+  ],
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "Case Studies",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "5G Technology in City Connectivity",
+          "description": "Implementing smart city solutions with 5G infrastructure...",
+          "image": "/images/casestudies/urban-connectivity_6.webp",
+          "url": "/slider-detail/urban-connectivity"
+        }
+      },
+      {
+        "@type": "ListItem",
+        "position": 2,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "Building the Future with Blockchain",
+          "description": "An Analysis on EVM-Compatible Smart Contract Platform Development.",
+          "image": "/images/casestudies/building-the-future-with-blockchain.webp",
+          "url": "/slider-detail/blockchain-technology"
+        }
+      },
+      {
+        "@type": "ListItem",
+        "position": 3,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "Enhancing IoT Connectivity through Advanced BLE Board Architecture",
+          "description": "A Case Study on Increased Efficiency and Reliability.",
+          "image": "/images/casestudies/iotconnecctivity_4.webp",
+          "url": "/slider-detail/iot-connectivity"
+        }
+      },
+      {
+        "@type": "ListItem",
+        "position": 4,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "Improving Fitness Training with AR & VR",
+          "description": "Revolutionizing Instructor Education via Immersive Simulations.",
+          "image": "/images/casestudies/fitness_3.webp",
+          "url": "/slider-detail/fitness-training"
+        }
+      },
+      {
+        "@type": "ListItem",
+        "position": 5,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "Enhancing Healthcare Data Management",
+          "description": "Scalable and Secure Infrastructure Fueled by AWS Cloud",
+          "image": "/images/casestudies/enhancing-healthcare-data-management.webp",
+          "url": "/slider-detail/healthcare-management"
+        }
+      },
+      {
+        "@type": "ListItem",
+        "position": 6,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "Optimizing Manufacturing Methods",
+          "description": "A Case Study on Decentralized Processing and Edge Computing Implementation.",
+          "image": "/images/casestudies/optimizing-manufacturing-methods.webp",
+          "url": "/slider-detail/edge-computing"
+        }
+      },
+      {
+        "@type": "ListItem",
+        "position": 7,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "Enhancing Manufacturing Processes with RPA",
+          "description": "Achieving Efficiency and Customer Satisfaction via Automation",
+          "image": "/images/casestudies/enhancing-manufacturing-processes-with-rpa.webp",
+          "url": "/slider-detail/manufacturing-automation"
+        }
+      },
+      {
+        "@type": "ListItem",
+        "position": 8,
+        "item": {
+          "@type": "CreativeWork",
+          "name": "AR Visualization",
+          "description": "A 3d Visual world like no other for world-class movies and storytelling with compact metaphysics libraries, making characters real.",
+          "image": "/images/casestudies/ar-visualization.webp",
+          "url": "/slider-detail/ar-visualization"
+        }
+      }
+    ]
+  },
+  "metaTags": {
+    "title": "Case Studies & Projects | Interactive Showcase",
+    "description": "Explore our technical case studies showcasing innovative solutions in technology, blockchain, IoT, and more.",
+    "keywords": "case studies, technical projects, innovation, technology solutions"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/config/serviceSliderSlides.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/config/serviceSliderSlides.json
new file mode 100644
index 0000000..78bf8e3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/config/serviceSliderSlides.json
@@ -0,0 +1,60 @@
+{
+  "slides": [
+    {
+      "id": "urban-connectivity",
+      "image": "/images/casestudies/urban-connectivity_6.webp",
+      "title": "5G Technology in City Connectivity",
+      "description": "Implementing smart city solutions with 5G infrastructure...",
+      "caseStudySlug": "urban-connectivity"
+    },
+    {
+      "id": "blockchain-technology",
+      "image": "/images/casestudies/building-the-future-with-blockchain.webp",
+      "title": "Building the Future with Blockchain",
+      "description": "An Analysis on EVM-Compatible Smart Contract Platform Development.",
+      "caseStudySlug": "blockchain-technology"
+    },
+    {
+      "id": "iot-connectivity",
+      "image": "/images/casestudies/iotconnecctivity_4.webp",
+      "title": "Enhancing IoT Connectivity through Advanced BLE Board Architecture",
+      "description": "A Case Study on Increased Efficiency and Reliability.",
+      "caseStudySlug": "iot-connectivity"
+    },
+    {
+      "id": "fitness-training",
+      "image": "/images/casestudies/fitness_3.webp",
+      "title": "Improving Fitness Training with AR & VR",
+      "description": "Revolutionizing Instructor Education via Immersive Simulations.",
+      "caseStudySlug": "fitness-training"
+    },
+    {
+      "id": "healthcare-management",
+      "image": "/images/casestudies/enhancing-healthcare-data-management.webp",
+      "title": "Enhancing Healthcare Data Management",
+      "description": "Scalable and Secure Infrastructure Fueled by AWS Cloud",
+      "caseStudySlug": "healthcare-management"
+    },
+    {
+      "id": "edge-computing",
+      "image": "/images/casestudies/optimizing-manufacturing-methods.webp",
+      "title": "Optimizing Manufacturing Methods",
+      "description": "A Case Study on Decentralized Processing and Edge Computing Implementation.",
+      "caseStudySlug": "edge-computing"
+    },
+    {
+      "id": "manufacturing-automation",
+      "image": "/images/casestudies/enhancing-manufacturing-processes-with-rpa.webp",
+      "title": "Enhancing Manufacturing Processes with RPA",
+      "description": "Achieving Efficiency and Customer Satisfaction via Automation",
+      "caseStudySlug": "manufacturing-automation"
+    },
+    {
+      "id": "ar-visualization",
+      "image": "/images/casestudies/ar-visualization.webp",
+      "title": "AR Visualization",
+      "description": "A 3d Visual world like no other for world-class movies and storytelling with compact metaphysics libraries, making characters real.",
+      "caseStudySlug": "ar-visualization"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/hooks/useSlider.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/hooks/useSlider.js
new file mode 100644
index 0000000..b6ed06e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/hooks/useSlider.js
@@ -0,0 +1,40 @@
+import { useState, useCallback, useEffect, useRef } from 'react';
+
+const useSlider = (totalSlides, interval = 5000) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(true);
+  const intervalRef = useRef(null);
+
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => (prev + 1) % totalSlides);
+  }, [totalSlides]);
+
+  const handlePrev = useCallback(() => {
+    setCurrentIndex(prev => (prev - 1 + totalSlides) % totalSlides);
+  }, [totalSlides]);
+
+  const togglePlayPause = useCallback(() => {
+    setIsPlaying(prev => !prev);
+  }, []);
+
+  useEffect(() => {
+    if (isPlaying) {
+      intervalRef.current = setInterval(handleNext, interval);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isPlaying, handleNext, interval]);
+
+  return {
+    currentIndex,
+    isPlaying,
+    handleNext,
+    handlePrev,
+    togglePlayPause
+  };
+};
+
+export default useSlider;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/styles/slider.module.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/styles/slider.module.css
new file mode 100644
index 0000000..8fd4d24
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/styles/slider.module.css
@@ -0,0 +1,39 @@
+:root {
+  --slider-height: 700px;
+  --mobile-image-height: 300px;
+}
+
+.slider-container {
+  @apply relative w-full bg-light-primaryBg overflow-hidden;
+  height: var(--slider-height);
+}
+
+.slider-controls {
+  @apply bg-light-primaryBg/30 backdrop-blur-sm p-4 rounded-full 
+    hover:bg-light-primaryBg/50 transition-all duration-300 
+    border border-white/10 hover:border-white/20;
+}
+
+.slider-button {
+  @apply flex items-center space-x-2 bg-[#2563EB] text-white rounded-sm w-fit hover:bg-[#3e7bff] transition-colors;
+}
+
+.mobile-button {
+  @apply px-4 py-2;
+}
+
+.desktop-button {
+  @apply px-6 py-3;
+}
+
+.image-gradient-mobile {
+  @apply absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30;
+}
+
+.image-gradient-desktop {
+  @apply absolute inset-0 bg-gradient-to-r from-transparent to-black opacity-30;
+}
+
+.mobile-image {
+  height: var(--mobile-image-height);
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/utils/constants.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/utils/constants.js
new file mode 100644
index 0000000..6e81809
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudiesSlider/utils/constants.js
@@ -0,0 +1,36 @@
+export const SLIDE_INTERVAL = 5000;
+export const ANIMATION_DURATION = 0.7;
+export const ANIMATION_DELAY = {
+  TITLE: 0.3,
+  DESCRIPTION: 0.4,
+  BUTTON: 0.5
+};
+
+export const BREAKPOINTS = {
+  MOBILE: 'lg'
+};
+
+export const ARIA_LABELS = {
+  PLAY: 'Play slideshow',
+  PAUSE: 'Pause slideshow',
+  PREV: 'Previous slide',
+  NEXT: 'Next slide'
+};
+
+// Add new dimension constants
+export const DIMENSIONS = {
+  SLIDER_HEIGHT: 700,
+  MOBILE_IMAGE_HEIGHT: 300,
+  DESKTOP_IMAGE_WIDTH: 1920
+};
+
+export const ICON_SIZES = {
+  DESKTOP: {
+    WIDTH: 6,
+    HEIGHT: 6
+  },
+  MOBILE: {
+    WIDTH: 4,
+    HEIGHT: 4
+  }
+};
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/ProductGrid.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/ProductGrid.jsx
new file mode 100644
index 0000000..7845d17
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/ProductGrid.jsx
@@ -0,0 +1,154 @@
+import React, { useState, useEffect, useRef } from 'react';
+import ProductCard from './components/ProductCard';
+import caseStudyConfig from './config/caseStudyCards.json';
+import styles from './styles/ProductGrid.module.css';
+import { useScrollPosition } from '@hooks/useScrollPosition';
+import ProductDots from './components/ProductDots';
+import ProductNavigation from './components/ProductNavigation';
+import { getCaseStudySchema } from './config/caseStudyCard.schema';
+import { Helmet } from 'react-helmet-async';
+
+const productImages = caseStudyConfig.caseStudyCards;
+
+const ProductGrid = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const productGridRef = useRef(null);
+  const isScrolled = useScrollPosition();
+  const [touchStart, setTouchStart] = useState(0);
+  const [touchEnd, setTouchEnd] = useState(0);
+
+  const totalProducts = productImages.length;
+
+  // Check if screen is mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 639);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => {
+      const newIndex = prev === 0 ? totalProducts - 1 : prev - 1;
+      updateSlidePosition(newIndex);
+      return newIndex;
+    });
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => {
+      const newIndex = prev === totalProducts - 1 ? 0 : prev + 1;
+      updateSlidePosition(newIndex);
+      return newIndex;
+    });
+  };
+
+  const handleDotClick = (index) => {
+    setCurrentIndex(index);
+    updateSlidePosition(index);
+  };
+
+  const updateSlidePosition = (index) => {
+    if (productGridRef.current && isMobile) {
+      const containerWidth = productGridRef.current.parentElement.offsetWidth;
+      const cardWidth = containerWidth - 40;
+      const gap = 20;
+      const offset = index * (cardWidth + gap);
+      const centeringOffset = (containerWidth - cardWidth) / 2;
+      productGridRef.current.style.transform = `translateX(calc(-${offset}px + ${centeringOffset}px))`;
+    }
+  };
+
+  // Reset transform on screen resize
+  useEffect(() => {
+    if (!isMobile && productGridRef.current) {
+      productGridRef.current.style.transform = 'translateX(0)';
+    }
+  }, [isMobile]);
+
+  const handleTouchStart = (e) => {
+    setTouchStart(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e) => {
+    setTouchEnd(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!isMobile) return;
+
+    const touchDiff = touchStart - touchEnd;
+    const minSwipeDistance = 50;
+
+    if (Math.abs(touchDiff) > minSwipeDistance) {
+      if (touchDiff > 0) {
+        handleNext();
+      } else {
+        handlePrev();
+      }
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <meta 
+          name="description" 
+          content="Explore our case studies showcasing successful AI and technology implementations that delivered measurable business outcomes for our clients."
+        />
+        <meta 
+          property="og:title" 
+          content="Case Studies | Tech4biz Solutions"
+        />
+        <meta 
+          property="og:description" 
+          content="Discover how our innovative technology solutions have helped businesses overcome challenges and achieve their strategic goals."
+        />
+        <script type="application/ld+json">
+          {JSON.stringify(getCaseStudySchema(productImages))}
+        </script>
+      </Helmet>
+
+      <section className={styles.showcase} aria-label="Product showcase">
+        <div className={styles.polyOverlay} aria-hidden="true" />
+        <div className={styles.glowOverlay} aria-hidden="true" />
+
+        <div className={styles.container}>
+          <h2 className={styles.heading}>Case Studies</h2>
+
+          <div className={styles.gridContainer}>
+            <div 
+              ref={productGridRef}
+              className={styles.grid}
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+            >
+              {productImages.map((product) => (
+                <ProductCard key={product.id} product={product} />
+              ))}
+            </div>
+
+            <ProductDots
+              total={productImages.length}
+              current={currentIndex}
+              onClick={handleDotClick}
+            />
+
+            <ProductNavigation
+              onPrev={handlePrev}
+              onNext={handleNext}
+              isMobile={isMobile}
+            />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default ProductGrid;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductCard.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductCard.jsx
new file mode 100644
index 0000000..2b568ea
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductCard.jsx
@@ -0,0 +1,104 @@
+import React, { memo, useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import styles from '../styles/ProductCard.module.css';
+import { useImageLoader } from '../hooks/useImageLoader';
+import { Link } from 'react-router-dom';
+import { ArrowRight } from 'lucide-react';
+
+const ProductCard = memo(({ product }) => {
+  const { imageLoaded, handleImageLoad } = useImageLoader();
+  const [isPressed, setIsPressed] = useState(false);
+  const touchTimer = useRef(null);
+  const touchStartPos = useRef({ x: 0, y: 0 });
+  const isTouchActive = useRef(false);
+
+  const handleTouchStart = (e) => {
+    if (isTouchActive.current) return;
+    
+    touchStartPos.current = {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    };
+    
+    // Set pressed state immediately for visual feedback
+    setIsPressed(true);
+    isTouchActive.current = true;
+  };
+
+  const handleTouchMove = (e) => {
+    if (!touchStartPos.current) return;
+    
+    const deltaX = Math.abs(e.touches[0].clientX - touchStartPos.current.x);
+    const deltaY = Math.abs(e.touches[0].clientY - touchStartPos.current.y);
+
+    // If there's significant horizontal movement, allow sliding
+    if (deltaX > 50 && deltaX > deltaY * 1.5) {
+      setIsPressed(false);
+      isTouchActive.current = false;
+    }
+  };
+
+  const handleTouchEnd = (e) => {
+    const deltaX = Math.abs(e.changedTouches[0].clientX - touchStartPos.current.x);
+    const deltaY = Math.abs(e.changedTouches[0].clientY - touchStartPos.current.y);
+
+    // If minimal movement, keep the pressed state for the animation
+    if (deltaX < 10 && deltaY < 10) {
+      e.stopPropagation();
+      setTimeout(() => {
+        setIsPressed(false);
+        isTouchActive.current = false;
+      }, 1000); // Match this with your CSS transition duration
+    } else {
+      setIsPressed(false);
+      isTouchActive.current = false;
+    }
+  };
+
+  return (
+    <motion.div
+      className={`${styles.card} ${isPressed ? styles.touched : ''}`}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: imageLoaded ? 1 : 0 }}
+      whilehover={{ y: -5 }}
+      transition={{ duration: 0.3 }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      onTouchCancel={() => {
+        setIsPressed(false);
+        isTouchActive.current = false;
+      }}
+    >
+      <motion.img
+        src={product.path}
+        srcSet={`${product.path} 300w, ${product.path} 600w`}
+        sizes="(max-width: 639px) 300px, 600px"
+        alt={product.alt}
+        className={styles.cardImage}
+        loading="lazy"
+        onLoad={handleImageLoad}
+        width={600}
+        height={400}
+      />
+      
+      <div className={styles.cardContent}>
+        <h3 className={styles.title}>{product.title}</h3>
+        <h4 className={styles.subtitle}>{product.subtitle}</h4>
+        <p className={styles.description}>{product.description}</p>
+        <Link 
+          to={`/case-studies/${product.caseStudySlug}`} 
+          className={styles.button}
+          state={{ caseStudyData: product }}
+        >
+          Expand
+          <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    </motion.div>
+  );
+});
+
+ProductCard.displayName = 'ProductCard';
+
+export default ProductCard;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductDots.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductDots.jsx
new file mode 100644
index 0000000..d32386b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductDots.jsx
@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import styles from '../styles/ProductGrid.module.css';
+
+const ProductDots = memo(({ total, current, onClick }) => {
+  return (
+    <div className={styles.dots} role="tablist">
+      {Array.from({ length: total }, (_, index) => (
+        <button
+          key={index}
+          className={`${styles.dot} ${current === index ? styles.activeDot : ''}`}
+          onClick={() => onClick(index)}
+          role="tab"
+          aria-selected={current === index}
+          aria-label={`Go to product ${index + 1}`}
+        />
+      ))}
+    </div>
+  );
+});
+
+ProductDots.displayName = 'ProductDots';
+
+export default ProductDots;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductNavigation.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductNavigation.jsx
new file mode 100644
index 0000000..8d76f3f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/components/ProductNavigation.jsx
@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import styles from '../styles/ProductGrid.module.css';
+
+const ProductNavigation = memo(({ onPrev, onNext, isMobile }) => {
+  if (!isMobile) return null;
+
+  return (
+    <div className={styles.navigation} role="navigation">
+      <button
+        onClick={onPrev}
+        className={styles.navButton}
+        aria-label="Previous product"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+      <button
+        onClick={onNext}
+        className={styles.navButton}
+        aria-label="Next product"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </div>
+  );
+});
+
+ProductNavigation.displayName = 'ProductNavigation';
+
+export default ProductNavigation;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/config/caseStudyCard.schema.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/config/caseStudyCard.schema.js
new file mode 100644
index 0000000..40d9b82
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/config/caseStudyCard.schema.js
@@ -0,0 +1,12 @@
+export const getCaseStudySchema = (caseStudies) => ({
+  "@context": "https://schema.org",
+  "@type": "ItemList",
+  "itemListElement": caseStudies.map((caseStudy, index) => ({
+    "@type": "CreativeWork",
+    "position": index + 1,
+    "name": caseStudy.title,
+    "description": caseStudy.description,
+    "image": caseStudy.path,
+    "url": `/case-studies/${caseStudy.caseStudySlug}`
+  }))
+});
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/config/caseStudyCards.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/config/caseStudyCards.json
new file mode 100644
index 0000000..7923432
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/config/caseStudyCards.json
@@ -0,0 +1,144 @@
+{
+  "breakpoints": {
+    "mobile": 639,
+    "tablet": 1023,
+    "desktop": 1279
+  },
+  "cardConfig": {
+    "width": 280,
+    "height": 450,
+    "gap": 2,
+    "cardsPerView": {
+      "mobile": 1,
+      "tablet": 2,
+      "desktop": 4
+    }
+  },
+  "caseStudyCards": [
+    {
+      "id": 1,
+      "title": "Defending against cyber threats",
+      "subtitle": "Advanced Security for Financial Systems",
+      "description": "The award-winning enterprise security platform offers AI-powered threat detection, 24/7 network monitoring, and automated incident response to ensure maximum business protection.",
+      "path": "/images/casestudies/defending-against-cyber-threats.webp",
+      "caseStudySlug": "security-platform",
+      "alt": "Enterprise Security Platform Dashboard",
+      "imageSizes": {
+        "sm": "/images/casestudies/defending-against-cyber-threats.webp?w=300",
+        "md": "/images/casestudies/defending-against-cyber-threats.webp?w=600",
+        "lg": "/images/casestudies/defending-against-cyber-threats.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    },
+    {
+      "id": 2,
+      "title": "Improving Financial Security",
+      "subtitle": "AI-Powered Banking Analytics Solutions",
+      "description": "Enterprise-grade financial analytics platform leveraging artificial intelligence for real-time risk assessment and fraud detection.",
+      "path": "/images/casestudies/Improving-financial-security.webp",
+      "caseStudySlug": "risk-analytics",
+      "alt": "Financial Analytics Dashboard",
+      "imageSizes": {
+        "sm": "/images/casestudies/Improving-financial-security.webp?w=300",
+        "md": "/images/casestudies/Improving-financial-security.webp?w=600",
+        "lg": "/images/casestudies/Improving-financial-security.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    },
+    {
+      "id": 3,
+      "title": "Dynamic Pricing Analytics",
+      "subtitle": "Smart Pricing for E-commerce Excellence",
+      "description": "A cloud-based e-commerce analytics package that uses machine learning algorithms to optimize pricing strategies and increase conversions.",
+      "path": "/images/casestudies/dynamic-pricing-and-analytics.webp",
+      "caseStudySlug": "commerce-intelligence",
+      "alt": "Commerce Intelligence Dashboard",
+      "imageSizes": {
+        "sm": "/images/casestudies/dynamic-pricing-and-analytics.webp?w=300",
+        "md": "/images/casestudies/dynamic-pricing-and-analytics.webp?w=600",
+        "lg": "/images/casestudies/dynamic-pricing-and-analytics.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    },
+    {
+      "id": 4,
+      "title": "Smart Mall Revolution",
+      "subtitle": "Next-Gen Retail Management Solutions",
+      "description": "A comprehensive retail operations platform that uses IoT technology, real-time analytics, and smart inventory systems to enhance customer shopping experiences.",
+      "path": "/images/casestudies/smart-mall-revolution.webp",
+      "caseStudySlug": "retail-management",
+      "alt": "Retail Management Dashboard",
+      "imageSizes": {
+        "sm": "/images/casestudies/smart-mall-revolution.webp?w=300",
+        "md": "/images/casestudies/smart-mall-revolution.webp?w=600",
+        "lg": "/images/casestudies/smart-mall-revolution.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    },
+    {
+      "id": 5,
+      "title": "Voice Recognition AI",
+      "subtitle": "Advanced Voice Recognition Platform",
+      "description": "Learning algorithms power an innovative voice recognition system that converts speech to text and responds to spoken instructions.",
+      "path": "/images/casestudies/voice-recognition-ai.webp",
+      "caseStudySlug": "speech-recognition",
+      "alt": "Speech Recognition Interface",
+      "imageSizes": {
+        "sm": "/images/casestudies/voice-recognition-ai.webp?w=300",
+        "md": "/images/casestudies/voice-recognition-ai.webp?w=600",
+        "lg": "/images/casestudies/voice-recognition-ai.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    },
+    {
+      "id": 6,
+      "title": "Metaverses and AR",
+      "subtitle": "Immersive Learning Technologies",
+      "description": "Next-generation learning management system that combines augmented reality technology with adaptive algorithms to provide individualized instruction.",
+      "path": "/images/casestudies/metaverse-and-ar.webp",
+      "caseStudySlug": "learning-platform",
+      "alt": "Learning Platform Interface",
+      "imageSizes": {
+        "sm": "/images/casestudies/metaverse-and-ar.webp?w=300",
+        "md": "/images/casestudies/metaverse-and-ar.webp?w=600",
+        "lg": "/images/casestudies/metaverse-and-ar.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    },
+    {
+      "id": 7,
+      "title": "Smart Retail Assistant",
+      "subtitle": "AI-Powered Retail Automation",
+      "description": "The system is an intelligent retail automation system that uses computer vision and predictive analytics to streamline store operations.",
+      "path": "/images/casestudies/smart-retail-assistant.webp",
+      "caseStudySlug": "retail-automation",
+      "alt": "Retail Automation Dashboard",
+      "imageSizes": {
+        "sm": "/images/casestudies/smart-retail-assistant.webp?w=300",
+        "md": "/images/casestudies/smart-retail-assistant.webp?w=600",
+        "lg": "/images/casestudies/smart-retail-assistant.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    },
+    {
+      "id": 8,
+      "title": "Transforming E-commerce",
+      "subtitle": "Enterprise Cloud Commerce Platform",
+      "description": "High-performance cloud commerce platform with corporate scalability, advanced security protocols, and extensive business intelligence analytics.",
+      "path": "/images/casestudies/transforming-e-commerce.webp",
+      "caseStudySlug": "cloud-commerce",
+      "alt": "Cloud Commerce Dashboard",
+      "imageSizes": {
+        "sm": "/images/casestudies/transforming-e-commerce.webp?w=300",
+        "md": "/images/casestudies/transforming-e-commerce.webp?w=600",
+        "lg": "/images/casestudies/transforming-e-commerce.webp?w=900"
+      },
+      "fallback": "/images/services/others/placeholder.jpg"
+    }
+  ],
+  "metaConfig": {
+    "title": "Case Studies - Tech4biz",
+    "description": "Explore our innovative case studies showcasing enterprise security, AI-powered solutions, and transformative technologies.",
+    "keywords": "enterprise security, AI solutions, case studies, digital transformation, technology innovation"
+  }
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/hooks/useImageLoader.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/hooks/useImageLoader.js
new file mode 100644
index 0000000..d285814
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/hooks/useImageLoader.js
@@ -0,0 +1,11 @@
+import { useState, useCallback } from 'react';
+
+export const useImageLoader = () => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const handleImageLoad = useCallback(() => {
+    setImageLoaded(true);
+  }, []);
+
+  return { imageLoaded, handleImageLoad };
+};
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/hooks/useProductGrid.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/hooks/useProductGrid.js
new file mode 100644
index 0000000..c00a674
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/hooks/useProductGrid.js
@@ -0,0 +1,44 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { debounce } from 'lodash';
+
+export function useProductGrid(totalProducts) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const productGridRef = useRef(null);
+
+  const checkMobile = useCallback(
+    debounce(() => {
+      setIsMobile(window.innerWidth <= 639);
+    }, 150),
+    []
+  );
+
+  useEffect(() => {
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => {
+      checkMobile.cancel();
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, [checkMobile]);
+
+  const handlePrev = useCallback(() => {
+    setCurrentIndex(prev => prev === 0 ? totalProducts - 1 : prev - 1);
+  }, [totalProducts]);
+
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => prev === totalProducts - 1 ? 0 : prev + 1);
+  }, [totalProducts]);
+
+  const handleDotClick = useCallback((index) => {
+    setCurrentIndex(index);
+  }, []);
+
+  return {
+    currentIndex,
+    isMobile,
+    handlePrev,
+    handleNext,
+    handleDotClick
+  };
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/index.jsx
new file mode 100644
index 0000000..19cbf96
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ErrorBoundary from '@components/common/error/ErrorBoundary';
+import styles from './styles/ProductGrid.module.css';
+import ProductGrid from './ProductGrid';
+
+export default function CaseStudyShowcase() {
+  return (
+    <ErrorBoundary>
+      <div className={styles.showcase}>
+          <ProductGrid />
+      </div>
+    </ErrorBoundary>
+  );
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/styles/ProductCard.module.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/styles/ProductCard.module.css
new file mode 100644
index 0000000..baeb6b5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/styles/ProductCard.module.css
@@ -0,0 +1,145 @@
+.card {
+    @apply relative overflow-hidden cursor-pointer;
+    height: var(--card-height);
+    background: transparent;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .cardImage {
+    @apply absolute inset-0 w-full h-full object-cover;
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    backface-visibility: hidden;
+  }
+  
+  .card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card:hover .cardImage {
+    transform: scale(5);
+    filter: blur(3px);
+  }
+  
+  .card:hover .description {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  
+  .card:hover .button {
+    opacity: 1;
+    transform: scale(1.05) translateX(0);
+  }
+  
+  .card:hover .title,
+  .card:hover .subtitle {
+    transform: translateX(-10px);
+  }
+  
+  .cardContent {
+    @apply relative z-10 h-full p-6 flex flex-col;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.7) 0%,
+      rgba(0, 0, 0, 0.4) 30%,
+      rgba(0, 0, 0, 0.4) 70%,
+      rgba(0, 0, 0, 0.7) 100%
+    );
+    backface-visibility: hidden;
+  }
+  
+  .title {
+    @apply text-white text-xl font-bold mb-2;
+    font-family: "Poppins", sans-serif !important;
+    transform: translateX(0);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .subtitle {
+    @apply text-gray-200 text-lg mb-4;
+    transform: translateX(0);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .description {
+    @apply text-white/90 mb-4 mt-auto;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0.1s;
+  }
+  
+  .button {
+    @apply inline-flex items-center mt-2 px-6 py-2 text-white font-medium;
+    opacity: 0;
+    transform: translateX(-100%);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+                background-color 0.3s ease;
+    transition-delay: 0.2s;
+    align-self: flex-end;
+    border-radius: 4px;
+    text-transform: capitalize;
+  }
+  
+  .button:hover {
+    transform: scale(1.05) translateX(0);
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .buttonArrow {
+    @apply ml-2 w-4 h-4;
+    transition: transform 0.3s ease;
+  }
+  
+  .button:hover .buttonArrow {
+    transform: translateX(3px);
+  }
+  
+  .revealed .cardContent {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  /* Responsive Styles */
+  @media (max-width: 639px) {
+    .card {
+      flex: 0 0 calc(100% - 40px);
+      width: calc(100% - 40px);
+      margin: 0;
+      scroll-snap-align: center;
+    }
+  }
+  
+  @media (max-width: 639px) {
+    .touched {
+      transform: translateY(-5px);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+    }
+
+    .touched .cardImage {
+      transform: scale(5);
+      filter: blur(3px);
+    }
+
+    .touched .description {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    .touched .button {
+      opacity: 1;
+      transform: scale(1.05) translateX(0);
+    }
+
+    .touched .title,
+    .touched .subtitle {
+      transform: translateX(-10px);
+    }
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/styles/ProductGrid.module.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/styles/ProductGrid.module.css
new file mode 100644
index 0000000..8247169
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/styles/ProductGrid.module.css
@@ -0,0 +1,192 @@
+.showcase {
+    --card-width: 280px;
+    --card-height: 450px;
+    --card-gap: 2rem;
+    --cards-per-view: 4;
+    position: relative;
+    padding: 2rem 0;
+    background: #1B1B1B;
+    overflow: hidden;
+  }
+  
+  .showcase::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: #1B1B1B;
+    background-size: 35px 35px;
+    opacity: 0.5;
+  }
+  
+  .showcase::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(
+      circle at center,
+      rgba(233, 228, 228, 0.15) 2px,
+      transparent 2px
+    );
+    background-size: 30px 30px;
+    background-position: -5px -5px;
+    opacity: 0.2;
+    z-index: 1;
+  }
+  
+  .polyOverlay {
+    @apply absolute inset-0;
+    background: #1B1B1B;
+    background-size: 70px 70px;
+    opacity: 0.4;
+    z-index: 1;
+  }
+ 
+  
+  .container {
+    width: 100%;
+    max-width: 90rem;
+    margin: 2rem auto 4rem;
+    padding: 0 1rem;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .heading {
+    @apply text-4xl md:text-5xl font-bold text-white text-center mb-16;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
+  
+  .gridContainer {
+    position: relative;
+    overflow: hidden;
+    padding: 0 var(--card-gap);
+    z-index: 2;
+  }
+  
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(var(--cards-per-view), minmax(var(--card-width), 1fr));
+    gap: var(--card-gap);
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  @media (max-width: 1279px) {
+    .grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  
+  @media (max-width: 1023px) {
+    .grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  
+  @media (max-width: 639px) {
+    .showcase {
+      --cards-per-view: 1;
+      padding: 2rem 0;
+    }
+  
+    .gridContainer {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+  
+    .grid {
+      display: flex;
+      width: 100%;
+      scroll-snap-type: x mandatory;
+      gap: 20px;
+      touch-action: pan-y pan-x pinch-zoom;
+      pointer-events: auto;
+    }
+  
+    .grid * {
+      touch-action: pan-y pan-x pinch-zoom;
+    }
+  
+    .card {
+      flex: 0 0 calc(100% - 20px);
+      width: calc(100% - 20px);
+      margin: 0;
+      scroll-snap-align: center;
+    }
+  
+    .navigation {
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+      margin-top: 1.5rem;
+    }
+  
+    .dots {
+      display: flex !important;
+      justify-content: center;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+  
+    .container {
+      margin: 1rem auto 1rem;
+    }
+  }
+  
+  .dots {
+    display: none;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+  
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgba(75, 85, 99, 0.4);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .activeDot {
+    background-color: rgba(75, 85, 99, 1);
+  }
+  
+  .navigation {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
+  
+  .navButton {
+    background-color: rgba(75, 85, 99, 0.8);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    z-index: 10;
+  }
+  
+  .navButton:hover {
+    background-color: rgba(75, 85, 99, 1);
+  }
+  
+  .navButton svg {
+    width: 24px;
+    height: 24px;
+    color: #ffffff;
+  }
+  
+  .navButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/utils/accessibility.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/utils/accessibility.js
new file mode 100644
index 0000000..66cd35b
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/utils/accessibility.js
@@ -0,0 +1,23 @@
+export const handleKeyboardNavigation = (event, handlers) => {
+    switch (event.key) {
+      case 'ArrowLeft':
+        handlers.prev();
+        break;
+      case 'ArrowRight':
+        handlers.next();
+        break;
+      case 'Enter':
+      case 'Space':
+        handlers.select();
+        break;
+      default:
+        break;
+    }
+  };
+  
+  export const getAriaLabels = (product) => ({
+    card: `Product card for ${product.title}`,
+    image: product.alt,
+    title: `Product name: ${product.title}`,
+    description: `Product description: ${product.description}`
+  });
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/utils/imageutils.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/utils/imageutils.js
new file mode 100644
index 0000000..4a94d22
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/caseStudyShowcase/utils/imageutils.js
@@ -0,0 +1,24 @@
+export const getResponsiveImageProps = (product) => ({
+    src: product.path,
+    srcSet: `
+      ${product.imageSizes.sm} 300w,
+      ${product.imageSizes.md} 600w,
+      ${product.imageSizes.lg} 900w
+    `,
+    sizes: `
+      (max-width: ${BREAKPOINTS.MOBILE}px) 300px,
+      (max-width: ${BREAKPOINTS.TABLET}px) 600px,
+      900px
+    `,
+    loading: "lazy",
+    width: 600,
+    height: 400,
+    alt: product.alt
+  });
+  
+  export const preloadImages = (products) => {
+    products.forEach(product => {
+      const img = new Image();
+      img.src = product.path;
+    });
+  };
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/animations/variants.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/animations/variants.js
new file mode 100644
index 0000000..dfb2dde
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/animations/variants.js
@@ -0,0 +1,23 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+      delayChildren: 0.2,
+      ease: [0.25, 0.1, 0.25, 1.0]
+    }
+  }
+}
+
+export const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { 
+      duration: 0.5, 
+      ease: [0.25, 0.1, 0.25, 1.0] 
+    }
+  }
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/components/ServiceCard.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/components/ServiceCard.jsx
new file mode 100644
index 0000000..d9559b8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/components/ServiceCard.jsx
@@ -0,0 +1,59 @@
+import React, { memo } from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import { Link } from 'react-router-dom'
+import { cardVariants } from '../animations/variants'
+
+const serviceColorMap = {
+  pcbaManufacturing: "#1E2875",
+  "3dPrinting": "#2563EB",
+}
+
+const ServiceCard = ({ service, index }) => {
+  return (
+    <motion.div
+      className="service-card"
+      style={{ backgroundColor: serviceColorMap[service.id] || "#4B5563" }} // Fallback color
+      variants={cardVariants}
+      role="article"
+      aria-labelledby={`service-title-${index}`}
+    >
+      <div className="service-category">
+        <h6 className='text-white'>{service.category}</h6>
+      </div>
+
+      <div className="service-content">
+        <div className="service-text">
+          <h3 
+            id={`service-title-${index}`}
+            className="service-title"
+          >
+            {service.title}
+          </h3>
+          <p className="service-description">
+            {service.description}
+          </p>
+        </div>
+
+        <Link 
+          to={`/service-details/${service.id}`}
+          className="service-cta group"
+          aria-label={`${service.cta} for ${service.title}`}
+        >
+          <motion.div
+            className="cta-arrow flex"
+            whilehover={{ x: 5 }}
+            transition={{ duration: 0.2 }}
+          >
+            <span>{service.cta}</span>
+            <div className="cta-arrow">
+              <ArrowRight />
+            </div>
+          </motion.div>
+        </Link>
+      </div>
+    </motion.div>
+  )
+}
+
+export default memo(ServiceCard)
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/components/ServiceHeader.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/components/ServiceHeader.jsx
new file mode 100644
index 0000000..4bb16f0
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/components/ServiceHeader.jsx
@@ -0,0 +1,45 @@
+import React, { memo } from 'react'
+import { motion } from 'framer-motion'
+import servicesData from '../config/servicesContent.json'
+
+const textVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: (custom) => ({
+    opacity: 1,
+    y: 0,
+    transition: { 
+      duration: 0.8,
+      delay: custom * 0.1,
+      ease: [0.25, 0.1, 0.25, 1.0]
+    }
+  })
+}
+
+const ServiceHeader = ({ isInView }) => {
+  const { sectionContent } = servicesData
+
+  return (
+    <div className="text-center mb-16">
+      <motion.h2 
+        className="text-4xl md:text-5xl font-bold text-gray-900 mb-6"
+        custom={0}
+        variants={textVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        {sectionContent.title}
+      </motion.h2>
+      <motion.p 
+        className="text-xl text-gray-600 max-w-3xl mx-auto"
+        custom={2}
+        variants={textVariants}
+        initial="hidden"
+        animate={isInView ? "visible" : "hidden"}
+      >
+        {sectionContent.subtitle}
+      </motion.p>
+    </div>
+  )
+}
+
+export default memo(ServiceHeader)
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/schema.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/schema.js
new file mode 100644
index 0000000..90413a7
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/schema.js
@@ -0,0 +1,19 @@
+import servicesData from './servicesContent.json'
+
+export const serviceCardsSchema = {
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "provider": {
+    "@type": "Organization",
+    "name": "Your Company Name"
+  },
+  "serviceType": "Manufacturing Services",
+  "offers": servicesData.services.map(service => ({
+    "@type": "Offer",
+    "itemOffered": {
+      "@type": "Service",
+      "name": service.title,
+      "description": service.description
+    }
+  }))
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/serviceSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/serviceSchema.json
new file mode 100644
index 0000000..d0d0b68
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/serviceSchema.json
@@ -0,0 +1,78 @@
+{
+  "@context": "https://schema.org",
+  "@type": "Organization",
+  "name": "Tech4biz Solutions Private Limited",
+  "url": "https://tech4bizsolutions.com",
+  "logo": {
+    "@type": "ImageObject",
+    "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+    "width": "180",
+    "height": "36"
+  },
+  "sameAs": [
+    "https://www.linkedin.com/company/tech4biz-solutions-private-limited",
+    "https://x.com/Tech4bizContact",
+    "https://www.youtube.com/@Tech4bizz",
+    "https://www.facebook.com/share/1KHPoaj6Y7/?mibextid=wwXIfr"
+  ],
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "Manufacturing Services",
+    "itemListElement": [
+      {
+        "@type": "Service",
+        "name": "PCBA Manufacturing",
+        "description": "Digitally revolutionize organizations with seamless integration, simpler procedures, and intelligent automation.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "Manufacturing",
+        "areaServed": "Worldwide",
+        "offers": {
+          "@type": "Offer",
+          "itemOffered": {
+            "@type": "Service",
+            "name": "PCBA Manufacturing",
+            "description": "Digitally revolutionize organizations with seamless integration, simpler procedures, and intelligent automation."
+          }
+        }
+      },
+      {
+        "@type": "Service",
+        "name": "3D Printing Solutions",
+        "description": "We offer advanced 3D printing solutions for rapid prototyping and manufacturing.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4biz Solutions Private Limited"
+        },
+        "serviceType": "Design",
+        "areaServed": "Worldwide",
+        "offers": {
+          "@type": "Offer",
+          "itemOffered": {
+            "@type": "Service",
+            "name": "3D Printing Solutions",
+            "description": "We offer advanced 3D printing solutions for rapid prototyping and manufacturing."
+          }
+        }
+      }
+    ]
+  },
+  "mainEntity": {
+    "@type": "ContactPoint",
+    "telephone": "+1-415-870-3091",
+    "email": "contact@tech4biz.io",
+    "contactType": "Customer Service",
+    "areaServed": "IN",
+    "availableLanguage": ["English", "Hindi", "Kannada"],
+    "address": {
+      "@type": "PostalAddress",
+      "streetAddress": "4th floor, NGR Arcade, BDA Layout, HSR Layout",
+      "addressLocality": "Bangalore",
+      "addressRegion": "Karnataka",
+      "postalCode": "560102",
+      "addressCountry": "IN"
+    }
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/servicesContent.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/servicesContent.json
new file mode 100644
index 0000000..79d53db
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/config/servicesContent.json
@@ -0,0 +1,52 @@
+{
+    "sectionContent": {
+      "title": "Advanced Manufacturing Solutions.",
+      "subtitle": "Utilize our expertise in advanced manufacturing and design to turn your ideas into reality with precision and quality."
+    },
+    "services": [
+      {
+        "id": "pcbaManufacturing",
+        "title": "PCBA Manufacturing",
+        "description": "Digitally revolutionize organizations with seamless integration, simpler procedures, and intelligent automation.",
+        "cta": "Explore Solutions",
+        "bgColor": "bg-[#1E2875]",
+        "category": "Manufacturing",
+        "features": [
+          {
+            "id": "automation-feature-1",
+            "title": "Process Automation",
+            "description": "Streamline your manufacturing processes",
+            "technologies": ["Robotic Process Automation", "AI Integration"]
+          },
+          {
+            "id": "automation-feature-2",
+            "title": "Smart Integration",
+            "description": "Connect your systems seamlessly",
+            "technologies": ["API Integration", "IoT Connectivity"]
+          }
+        ]
+      },
+      {
+        "id": "3dPrinting",
+        "title": "3D Printing Solutions",
+        "description": "We offer advanced 3D printing solutions for rapid prototyping and manufacturing.",
+        "cta": "View Services",
+        "bgColor": "bg-[#2563EB]",
+        "category": "Design",
+        "features": [
+          {
+            "id": "3d-printing-feature-1",
+            "title": "Advanced FDM Technology",
+            "description": "High-precision FDM printing services",
+            "technologies": ["FDM", "High-precision printing"]
+          },
+          {
+            "id": "3d-printing-feature-2",
+            "title": "Rapid Prototyping Services",
+            "description": "Quick turnaround for prototypes",
+            "technologies": ["Quick prototyping", "Iterative design"]
+          }
+        ]
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/index.jsx
new file mode 100644
index 0000000..43d373f
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/index.jsx
@@ -0,0 +1,71 @@
+'use client'
+
+import React, { useRef, memo } from 'react'
+import { motion, useInView } from 'framer-motion'
+import { containerVariants } from './animations/variants'
+import servicesData from './config/servicesContent.json'
+import serviceSchema from './config/serviceSchema.json'
+import ErrorBoundary from '@/components/common/error/ErrorBoundary'
+import './styles/ServiceCards.css'
+import { Helmet } from 'react-helmet-async'
+
+import ServiceHeader from './components/ServiceHeader'
+import ServiceCard from './components/ServiceCard'
+
+const Services = () => {
+  const sectionRef = useRef(null)
+  const isInView = useInView(sectionRef, { once: true, margin: "0px 0px -20% 0px" })
+  const { services } = servicesData
+
+  return (
+    <ErrorBoundary>
+      <Helmet>
+        <meta
+          name="description"
+          content="Advanced Manufacturing Solutions - Utilize our expertise in advanced manufacturing and design to turn your ideas into reality with precision and quality."
+        />
+        <meta
+          name="keywords"
+          content="manufacturing, advanced manufacturing, PCBA manufacturing, 3D printing, design solutions, technology solutions"
+        />
+        <meta 
+          property="og:title" 
+          content="Advanced Manufacturing Solutions | Tech4biz"
+        />
+        <meta 
+          property="og:description" 
+          content="Transform your ideas into reality with our precision manufacturing services including PCBA manufacturing and 3D printing solutions."
+        />
+        <meta property="og:type" content="website" />
+        <script type="application/ld+json">
+          {JSON.stringify(serviceSchema)}
+        </script>
+      </Helmet>
+      
+      <section 
+        ref={sectionRef} 
+        className="service-cards-section"
+        aria-label="Our Services"
+      >
+        <ServiceHeader isInView={isInView} />
+
+        <motion.div 
+          className="service-cards-grid"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? "visible" : "hidden"}
+        >
+          {services.map((service, index) => (
+            <ServiceCard 
+              key={service.id}
+              service={service} 
+              index={index}
+            />
+          ))}
+        </motion.div>
+      </section>
+    </ErrorBoundary>
+  )
+}
+
+export default memo(Services) 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/styles/ServiceCards.css b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/styles/ServiceCards.css
new file mode 100644
index 0000000..7fa2de8
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/manufacturingSolutions/styles/ServiceCards.css
@@ -0,0 +1,73 @@
+.service-cards-section {
+  @apply py-20 bg-gray-50;
+}
+
+.service-cards-grid {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-6 p-6 max-w-7xl mx-auto;
+}
+
+.service-card {
+  @apply rounded-2xl p-8 relative overflow-hidden min-h-[500px] flex flex-col;
+}
+
+.service-category {
+  @apply mb-16;
+}
+
+.service-category span {
+  @apply text-white/80 text-sm;
+}
+
+.service-content {
+  @apply flex flex-col h-full justify-between;
+}
+
+.service-text {
+  @apply space-y-6;
+}
+
+.service-title {
+  @apply text-white text-4xl md:text-5xl font-medium leading-tight;
+}
+
+.service-description {
+  @apply text-white/80 text-lg max-w-md;
+}
+
+.service-cta {
+  @apply mt-8 bg-white rounded-full py-4 px-6 
+  inline-flex items-center justify-between 
+  w-full sm:w-auto min-w-[240px] max-w-[280px]
+  transition-all duration-200 hover:shadow-lg;
+}
+
+.cta-content {
+  @apply w-full flex items-center justify-between;
+}
+
+.cta-content span {
+  @apply text-base font-semibold tracking-wide px-2;
+}
+
+.cta-arrow {
+  @apply flex-shrink-0 px-2;
+}
+
+.cta-arrow svg {
+  @apply w-5 h-5;
+}
+
+.loading-skeleton {
+  @apply animate-pulse bg-gray-200 rounded-lg h-32 w-full max-w-3xl mx-auto;
+}
+
+.card-skeleton {
+  @apply animate-pulse bg-gray-200 rounded-2xl h-[500px] w-full;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-skeleton,
+  .card-skeleton {
+    @apply animate-none;
+  }
+}
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/ServiceSection.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/ServiceSection.jsx
new file mode 100644
index 0000000..7fe141e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/ServiceSection.jsx
@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import ServiceCard from './components/ServiceCard';
+import { useServiceSection } from './hooks/useServiceSection';
+import content from './config/servicesContent.json';
+import { Helmet } from 'react-helmet-async';
+import { serviceSchema } from './config/serviceSection.schema.json';
+
+const ServiceSection = memo(() => {
+  const { imageRef, secondImageRef, isScrolled } = useServiceSection();
+  const { first, second } = content.services;
+
+  return (
+    < >
+      <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(serviceSchema)}
+        </script>
+      </Helmet>
+      <section 
+        className={`container  mx-auto px-4 py-16 lg:py-20 space-y-16 lg:space-y-32 overflow-hidden ${isScrolled ? 'scroll-mt-20' : ''}`}
+        aria-label="Our Services"
+      >
+        <ServiceCard 
+          data={first}
+          imagePath={first.image}
+          imageRef={imageRef}
+          direction="left"
+        />
+        <ServiceCard 
+          data={second}
+          imagePath={second.image}
+          imageRef={secondImageRef}
+          direction="right"
+          reverse
+        />
+      </section>
+    </>
+  );
+});
+
+ServiceSection.displayName = 'ServiceSection';
+export default ServiceSection;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/components/ServiceCard.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/components/ServiceCard.jsx
new file mode 100644
index 0000000..acdee31
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/components/ServiceCard.jsx
@@ -0,0 +1,123 @@
+import { memo, useCallback, useState } from 'react';
+import { motion } from 'framer-motion';
+import { HiArrowRight } from 'react-icons/hi';
+import { HiOutlinePhotograph } from 'react-icons/hi';
+import StatNumber from './StatNumber';
+import { fadeInUp, useSlideIn } from '../config/animations';
+import { Link } from 'react-router-dom';
+
+const ImagePlaceholder = memo(({ title }) => (
+  <div className="w-full h-full flex items-center justify-center bg-gray-100 rounded-lg">
+    <div className="text-center">
+      <HiOutlinePhotograph className="w-16 h-16 mx-auto text-gray-400" />
+      <p className="mt-2 text-sm text-gray-500">
+        {title || 'Image unavailable'}
+      </p>
+    </div>
+  </div>
+));
+
+ImagePlaceholder.displayName = 'ImagePlaceholder';
+
+const ServiceCard = memo(({ data, imagePath, imageRef, direction, reverse }) => {
+  const slideAnimation = useSlideIn(direction);
+  const [imageError, setImageError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const handleImageError = useCallback(() => {
+    console.error(`Failed to load image: ${data.title} illustration`);
+    setImageError(true);
+    setIsLoading(false);
+  }, [data.title]);
+
+  const handleImageLoad = useCallback(() => {
+    setIsLoading(false);
+    if (imageRef.current) {
+      imageRef.current.classList.add('loaded');
+    }
+  }, [imageRef]);
+
+  return (
+    <div
+      className={`flex flex-col lg:flex-row items-center gap-12 w-full overflow-hidden ${
+        reverse ? 'lg:flex-row-reverse' : ''
+      }`}
+    >
+      <motion.div 
+        {...slideAnimation} 
+        className="lg:w-1/2 space-y-6"
+      >
+        <motion.h2 
+          {...fadeInUp} 
+          className="text-2xl sm:text-4xl lg:text-5xl font-bold text-gray-900"
+        >
+          {data.title}
+        </motion.h2>
+        
+        <motion.h3 
+          {...fadeInUp} 
+          transition={{ delay: 0.1 }} 
+          className="text-lg sm:text-xl lg:text-2xl text-gray-600 font-medium"
+        >
+          {data.subtitle}
+        </motion.h3>
+        
+        <motion.p 
+          {...fadeInUp} 
+          transition={{ delay: 0.2 }} 
+          className="text-gray-600 leading-relaxed"
+        >
+          {data.description}
+        </motion.p>
+        
+        <Link
+          to={data.slug}
+          className="group inline-flex items-center gap-2 font-medium cursor-pointer bg-[#2563EB] text-white px-4 py-2 rounded-md hover:bg-[#3e7bff] active:bg-[#3e7bff] transition-all duration-300 focus:outline-none font-poppins"
+          whilehover={{ x: 10 }}
+          transition={{ type: "spring", stiffness: 400 }}
+          aria-label={`Explore ${data.title}`}
+        >
+          Explore our services 
+          <HiArrowRight 
+            aria-hidden="true" 
+            className="transition-transform group-hover:translate-x-1" 
+          />
+        </Link>
+
+        <div className="pt-8 grid grid-cols-3 gap-4 lg:flex lg:flex-wrap lg:gap-8">
+          {data.stats.map((stat, index) => (
+            <StatNumber key={index} {...stat} />
+          ))}
+        </div>
+      </motion.div>
+
+      <motion.div 
+        {...useSlideIn(direction === 'left' ? 'right' : 'left')}
+        className="w-full h-[300px] lg:h-auto lg:w-1/2 relative overflow-hidden rounded-lg aspect-[6/4]"
+      >
+        {isLoading && (
+          <div className="absolute inset-0 bg-gray-100 animate-pulse rounded-lg" />
+        )}
+        
+        {imageError ? (
+          <ImagePlaceholder title={data.title} />
+        ) : (
+          <img
+            ref={imageRef}
+            src={imagePath}
+            alt={`${data.title} illustration`}
+            loading="lazy"
+            onError={handleImageError}
+            onLoad={handleImageLoad}
+            className={`w-full h-full object-cover transition-all duration-300 hover:scale-105 ${
+              isLoading ? 'opacity-0' : 'opacity-100'
+            }`}
+          />
+        )}
+      </motion.div>
+    </div>
+  );
+});
+
+ServiceCard.displayName = 'ServiceCard';
+export default ServiceCard; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/components/StatNumber.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/components/StatNumber.jsx
new file mode 100644
index 0000000..49cb6e4
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/components/StatNumber.jsx
@@ -0,0 +1,42 @@
+import { memo, useRef, useEffect } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { useCountAnimation } from '../hooks/useCountAnimation';
+import { fadeInUp } from '../config/animations';
+
+const StatNumber = memo(({ number, label }) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  
+  // Check if the number is "24/7" to handle it differently
+  const is24_7 = number === "24/7";
+  const rawNumber = is24_7 ? 24 : parseInt(number);
+  const [count, setHasAnimated] = useCountAnimation(rawNumber, 2000, !is24_7);
+  
+  useEffect(() => {
+    if (isInView) {
+      setHasAnimated(true);
+    }
+  }, [isInView, setHasAnimated]);
+
+  return (
+    <motion.div
+      ref={ref}
+      {...fadeInUp}
+      className="text-center"
+      role="group"
+      aria-label={`${label}: ${number}`}
+    >
+      <span className="block text-3xl lg:text-4xl font-bold bg-[#161616] bg-clip-text text-transparent">
+        {is24_7 ? "24/7" : 
+          `${count}${number.includes('+') ? '+' : number.includes('%') ? '%' : ''}`
+        }
+      </span>
+      <span className="text-sm text-gray-600 mt-1">
+        {label}
+      </span>
+    </motion.div>
+  );
+});
+
+StatNumber.displayName = 'StatNumber';
+export default StatNumber; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/animations.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/animations.js
new file mode 100644
index 0000000..c1b7fb3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/animations.js
@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+
+export const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true },
+  transition: { duration: 0.5 }
+};
+
+export const useSlideIn = (direction) => {
+  return useMemo(() => ({
+    initial: { 
+      opacity: 0, 
+      x: direction === 'left' ? -50 : 50,
+      width: '100%'
+    },
+    whileInView: { 
+      opacity: 1, 
+      x: 0,
+      width: '100%'
+    },
+    viewport: { once: true },
+    transition: { duration: 0.5 }
+  }), [direction]);
+};
+
+export const pulseAnimation = {
+  initial: { scale: 1 },
+  animate: { 
+    scale: [1, 1.05, 1],
+    transition: {
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/serviceSection.schema.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/serviceSection.schema.json
new file mode 100644
index 0000000..9d8f0ee
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/serviceSection.schema.json
@@ -0,0 +1,30 @@
+{
+  "serviceSchema": {
+    "@context": "https://schema.org",
+    "@type": "Service",
+    "provider": {
+      "@type": "Organization",
+      "name": "Tech4Biz"
+    },
+    "serviceType": [
+      {
+        "@type": "Service",
+        "name": "Software Development Solutions",
+        "description": "Professional software development services include designing, implementing, and maintaining custom solutions. We offer scalable and secure software solutions for businesses of all sizes.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4Biz"
+        }
+      },
+      {
+        "@type": "Service",
+        "name": "VLSI Design Services",
+        "description": "Tech4Biz offers VLSI services like analog and mixed-signal verification, IP development, RF design, and custom solutions, ensuring precision, efficiency, and innovation.",
+        "provider": {
+          "@type": "Organization",
+          "name": "Tech4Biz"
+        }
+      }
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/servicesContent.json b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/servicesContent.json
new file mode 100644
index 0000000..c6c7a42
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/config/servicesContent.json
@@ -0,0 +1,28 @@
+{
+  "services": {
+    "first": {
+      "slug": "/software-development",
+      "image": "/images/software/software-development-solutions.webp",
+      "title": "Software Development Solutions",
+      "subtitle": "Expert Development Services and Continuous Support",
+      "description": "Professional software development services include designing, implementing, and maintaining custom solutions. We offer scalable and secure software solutions for businesses of all sizes.",
+      "stats": [
+        { "number": "80+", "label": "Expert Engineers" },
+        { "number": "560+", "label": "Successful Projects" },
+        { "number": "8+", "label": "Years of Excellence" }
+      ]
+    },
+    "second": {
+      "slug": "/vlsi-design",
+      "image": "/images/software/VLSI-design-services.webp",
+      "title": "VLSI Design Services",
+      "subtitle": "Analog and Digital Circuit Design Services",
+      "description": "Tech4Biz offers VLSI services like analog and mixed-signal verification, IP development, RF design, and custom solutions, ensuring precision, efficiency, and innovation.",
+      "stats": [
+        { "number": "30+", "label": "VLSI Designs" },
+        { "number": "99%", "label": "Design Accuracy" },
+        { "number": "24/7", "label": "Technical Support" }
+      ]
+    }
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/hooks/useCountAnimation.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/hooks/useCountAnimation.js
new file mode 100644
index 0000000..ae0ac6e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/hooks/useCountAnimation.js
@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback } from 'react';
+
+export const useCountAnimation = (end, duration = 2000, startOnView = false) => {
+  const [count, setCount] = useState(0);
+  const [hasAnimated, setHasAnimated] = useState(!startOnView);
+
+  const animate = useCallback((timestamp, startTime, startValue, endValue) => {
+    if (!startTime) {
+      startTime = timestamp;
+    }
+
+    const progress = timestamp - startTime;
+    const percentage = Math.min(progress / duration, 1);
+    
+    // Easing function for smoother animation
+    const easeOutQuad = t => t * (2 - t);
+    const easedProgress = easeOutQuad(percentage);
+    
+    const currentValue = Math.floor(startValue + (endValue - startValue) * easedProgress);
+    setCount(currentValue);
+
+    if (percentage < 1) {
+      requestAnimationFrame((newTimestamp) => 
+        animate(newTimestamp, startTime, startValue, endValue)
+      );
+    }
+  }, [duration]);
+
+  useEffect(() => {
+    if (!hasAnimated) return;
+
+    const startNumber = 0;
+    const endNumber = parseInt(end);
+    let animationFrame;
+
+    animationFrame = requestAnimationFrame((timestamp) => 
+      animate(timestamp, null, startNumber, endNumber)
+    );
+
+    return () => {
+      if (animationFrame) {
+        cancelAnimationFrame(animationFrame);
+      }
+    };
+  }, [end, hasAnimated, animate]);
+
+  return [count, setHasAnimated];
+};
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/hooks/useServiceSection.js b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/hooks/useServiceSection.js
new file mode 100644
index 0000000..f7ee43e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/hooks/useServiceSection.js
@@ -0,0 +1,69 @@
+import { useCallback, useRef, useEffect, useState } from 'react';
+import { useScrollPosition } from '@/hooks/useScrollPosition';
+
+export const useServiceSection = () => {
+  const imageRef = useRef(null);
+  const secondImageRef = useRef(null);
+  const isScrolled = useScrollPosition();
+  const [firstImageLoaded, setFirstImageLoaded] = useState(false);
+  const [secondImageLoaded, setSecondImageLoaded] = useState(false);
+
+  // Create a reusable Intersection Observer callback
+  const handleIntersection = useCallback((entries, observer) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const targetElement = entry.target;
+        
+        // Add lazy-loaded class for animation
+        targetElement.classList.add('lazy-loaded');
+        
+        // Update state based on which image was intersected
+        if (targetElement === imageRef.current) {
+          setFirstImageLoaded(true);
+        } else if (targetElement === secondImageRef.current) {
+          setSecondImageLoaded(true);
+        }
+
+        // Once the image is loaded, we can unobserve it
+        observer.unobserve(targetElement);
+      }
+    });
+  }, []);
+
+  useEffect(() => {
+    // Create Intersection Observer with options
+    const observerOptions = {
+      root: null, // Use viewport as root
+      rootMargin: '50px', // Start loading slightly before the image enters viewport
+      threshold: 0.1 // Trigger when even 10% of the target is visible
+    };
+
+    const observer = new IntersectionObserver(handleIntersection, observerOptions);
+
+    // Observe both image references if they exist
+    if (imageRef.current) {
+      observer.observe(imageRef.current);
+    }
+    if (secondImageRef.current) {
+      observer.observe(secondImageRef.current);
+    }
+
+    // Cleanup function to disconnect observer
+    return () => {
+      observer.disconnect();
+    };
+  }, [handleIntersection]);
+
+  // Optional: Add loading state getters for components that need them
+  const getLoadingState = useCallback(() => ({
+    firstImageLoaded,
+    secondImageLoaded
+  }), [firstImageLoaded, secondImageLoaded]);
+
+  return {
+    imageRef,
+    secondImageRef,
+    isScrolled,
+    loadingState: getLoadingState()
+  };
+}; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/index.jsx
new file mode 100644
index 0000000..df373b5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/home/components/softwareVlsiServices/index.jsx
@@ -0,0 +1,12 @@
+import ServiceSection from './ServiceSection';
+import ErrorBoundary from '@components/common/error/ErrorBoundary';
+
+const ServiceSectionWrapper = () => {
+  return (
+    <ErrorBoundary>
+      <ServiceSection />
+    </ErrorBoundary>
+  );
+};
+
+export default ServiceSectionWrapper; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/RelatedContent.jsx b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/RelatedContent.jsx
new file mode 100644
index 0000000..af7ec78
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/RelatedContent.jsx
@@ -0,0 +1,159 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+
+// Sample news data
+const newsItems = [
+  {
+    id: 1,
+    title: 'How to watch USA v France live - full schedule',
+    image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=300&width=400&query=basketball%20players%20USA%20vs%20France',
+    category: 'Basketball',
+    readTime: '3 minute read'
+  },
+  {
+    id: 2,
+    title: 'Full schedule and medal events on Saturday August 10',
+    image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=300&width=400&query=basketball%20olympic%20schedule',
+    category: 'Basketball',
+    readTime: '6 minute read'
+  },
+  {
+    id: 3,
+    title: 'The key players are going to be the young guys',
+    image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=300&width=400&query=young%20basketball%20player%20in%20teal%20jersey',
+    category: 'Basketball',
+    readTime: '3 minute read'
+  },
+  {
+    id: 4,
+    title: 'Victor Wembanyama inspires Team France to gold medal match',
+    image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=300&width=400&query=basketball%20player%20in%20France%20jersey',
+    category: 'Basketball',
+    readTime: '6 minute read'
+  },
+  {
+    id: 5,
+    title: 'NBA Draft 2024: Top prospects to watch',
+    image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=300&width=400&query=basketball%20nba%20draft%20prospects',
+    category: 'Basketball',
+    readTime: '4 minute read'
+  },
+  {
+    id: 6,
+    title: 'WNBA All-Star weekend highlights',
+    image: 'https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ob7miW3mUreePYfXdVwkpFWHthzoR5.svg?height=300&width=400&query=wnba%20all%20star%20game',
+    category: 'Basketball',
+    readTime: '5 minute read'
+  }
+];
+
+// Card animation variants
+const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 }
+};
+
+// Individual news card component
+const NewsCard = ({ item }) => {
+  return (
+    <motion.div 
+      className="flex flex-col h-full"
+      variants={cardVariants}
+      whileHover={{ scale: 1.03 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="overflow-hidden rounded-lg mb-3">
+        <img 
+          src={item.image || "/placeholder.svg"} 
+          alt={item.title} 
+          className="w-full h-48 object-cover transition-transform duration-300 hover:scale-105"
+        />
+      </div>
+      <h3 className="font-bold text-lg mb-2">{item.title}</h3>
+      <div className="flex items-center mt-auto">
+        <span className="text-[#2563EB] text-sm">{item.category}</span>
+        <span className="mx-2 text-gray-300">|</span>
+        <span className="text-gray-500 text-sm">{item.readTime}</span>
+      </div>
+      <button className="text-[#2563EB] font-medium mt-2 text-sm hover:underline self-start">
+        Read more
+      </button>
+    </motion.div>
+  );
+};
+
+// Custom hook to detect media query
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+
+  React.useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+
+  return matches;
+}
+
+// Main component
+const BasketballNews = () => {
+  const [showAll, setShowAll] = useState(false);
+  const isMdUp = useMediaQuery('(min-width: 768px)');
+
+  // Determine how many cards to show
+  let visibleItems;
+  if (isMdUp) {
+    visibleItems = newsItems.slice(0, 4);
+  } else {
+    visibleItems = showAll ? newsItems.slice(0, 4) : newsItems.slice(0, 2);
+  }
+
+  // Reset showAll when switching to md+
+  React.useEffect(() => {
+    if (isMdUp) setShowAll(false);
+  }, [isMdUp]);
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-8">
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl font-bold">Related Content</h2>
+      </div>
+      <motion.div 
+        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"
+        initial="hidden"
+        animate="visible"
+        variants={{
+          visible: {
+            transition: {
+              staggerChildren: 0.1
+            }
+          }
+        }}
+      >
+        {visibleItems.map((item) => (
+          <NewsCard key={item.id} item={item} />
+        ))}
+      </motion.div>
+      {/* View All button: only on small screens, only if not showing all */}
+      {!isMdUp && !showAll && (
+        <button
+          className="block md:hidden mt-6 mx-auto text-[#2563EB] font-semibold text-base"
+          onClick={() => setShowAll(true)}
+        >
+          View All
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default BasketballNews;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/cta.jsx b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/cta.jsx
new file mode 100644
index 0000000..c2199c3
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/cta.jsx
@@ -0,0 +1,101 @@
+"use client"
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { FaXTwitter, FaInstagram, FaFacebook, FaLinkedin } from "react-icons/fa6"
+
+const NewsletterCTA = () => {
+  const [email, setEmail] = useState("");
+  
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle subscription logic here
+    console.log("Subscribing email:", email);
+    setEmail("");
+  };
+
+  return (
+    <motion.div
+      className="bg-[#222222] text-white py-16"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.3 }}
+    >
+      <div className="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-12 px-4">
+        <div className="md:w-1/2 w-full flex flex-col items-center md:items-start">
+          <h2 className="text-4xl font-bold mb-6 text-center md:text-left">
+            Ready to Get
+            <br />
+            Our New Stuff?
+          </h2>
+          <div className="w-full max-w-md">
+            <form onSubmit={handleSubmit}>
+              <div className="flex flex-col sm:flex-row items-center gap-3">
+                <input
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder="Your email address"
+                  className="w-full py-3 px-4 bg-white text-gray-800 rounded-md border-0 focus:ring-2 focus:ring-[#2563EB] outline-none transition-all"
+                  required
+                />
+                <motion.button
+                  type="submit"
+                  className="w-full sm:w-auto bg-[#2563EB] text-white font-medium py-3 px-6 rounded-md transition-colors duration-200 hover:bg-[#1d4ed8]"
+                  whileHover={{ y: -2 }}
+                  whileTap={{ y: 1 }}
+                >
+                  Subscribe
+                </motion.button>
+              </div>
+              <p className="mt-2 text-sm text-gray-400 text-center md:text-left">
+                We respect your privacy. Unsubscribe at any time.
+              </p>
+            </form>
+          </div>
+        </div>
+        <div className="md:w-1/2 w-full mt-8 md:mt-0 flex flex-col items-center md:items-start">
+          <div className="flex justify-end mb-2">
+            <div className="flex space-x-2">
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaXTwitter className="w-5 h-5" />
+              </motion.a>
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaInstagram className="w-5 h-5" />
+              </motion.a>
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaFacebook className="w-5 h-5" />
+              </motion.a>
+              <motion.a
+                href="#"
+                whileHover={{ scale: 1.1 }}
+                className="bg-white/20 rounded-full p-2 flex items-center justify-center"
+              >
+                <FaLinkedin className="w-5 h-5" />
+              </motion.a>
+            </div>
+          </div>
+
+          <h3 className="text-lg font-semibold mb-2">Stuffus for Homes and Needs</h3>
+          <p className="text-gray-300">
+            We'll listen to your needs, identify the best approach, and then create a bespoke smart EV charging solution
+            that's right for you.
+          </p>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
+
+export default NewsletterCTA
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/hero-section.jsx b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/hero-section.jsx
new file mode 100644
index 0000000..ffa7139
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/hero-section.jsx
@@ -0,0 +1,155 @@
+"use client"
+import { motion } from "framer-motion"
+
+const HeroSection = () => {
+  return (
+    <div className="relative w-full h-[95vh] overflow-hidden">
+      {/* Background Image */}
+      <img
+        src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+        alt="Scenic mountain landscape with adventure theme"
+        className="absolute inset-0 w-full h-full object-cover"
+      />
+
+      {/* Overlay for better text readability */}
+      <div className="absolute inset-0 bg-black/35"></div>
+
+      {/* Content Container */}
+      <div className="relative z-10 h-full flex flex-col md:justify-between justify-center gap-20">
+        {/* Top Section with Tags - Centered */}
+        <div className="px-6 md:px-12 lg:px-16 mt-36 md:mt-40 max-w-7xl mx-auto w-full">
+          <div className="flex space-x-3">
+            <motion.button
+              className="bg-black/10 backdrop-blur-sm text-white px-4 py-2 rounded-full text-sm"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Editor Choice
+            </motion.button>
+            <motion.button
+              className="bg-black/10 backdrop-blur-sm text-white px-4 py-2 rounded-full text-sm"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Adventure Event
+            </motion.button>
+          </div>
+        </div>
+
+        {/* Middle Section with Title - Centered */}
+        <div className="px-6 md:px-12 lg:px-16 max-w-7xl mx-auto w-full">
+          <motion.h1
+            className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-8 max-w-2xl"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            Announcing AdventureWeek at Okinawa
+          </motion.h1>
+
+          <motion.div
+            className="flex items-center space-x-2"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.4, duration: 0.8 }}
+          >
+            <motion.button
+              className="flex items-center justify-center bg-white/20 backdrop-blur-sm text-white p-2 md:p-3 rounded-full"
+              whileHover={{ scale: 1.1 }}
+              whileTap={{ scale: 0.9 }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
+              </svg>
+            </motion.button>
+            <div className="flex items-center space-x-2">
+              <span className="text-white font-medium">Read Story</span>
+              <span className="text-white/70">•</span>
+              <span className="text-white/70">5 mins read</span>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Bottom Section with Cards - Full Width */}
+        <div className="w-full hidden md:block">
+          {/* Border line */}
+          <div className="w-full h-px bg-gray-500/50"></div>
+          
+          {/* Cards container with blackish blur background - Full Width */}
+          <div className="w-full bg-black/10 backdrop-blur-sm py-6">
+            <motion.div
+              className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 max-w-7xl mx-auto px-8 md:px-3"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.6, duration: 0.8 }}
+            >
+              <ArticleCard 
+                number="2" 
+                title="Protecting Animals and Nature in Adventure Travel" 
+                progress={90}
+              />
+              <ArticleCard 
+                number="3" 
+                title="Guides are the Storytellers of Destinations" 
+                progress={75}
+              />
+              <ArticleCard 
+                number="4" 
+                title="Together to Promote Sustainable Development" 
+                progress={60}
+              />
+              <ArticleCard 
+                number="5" 
+                title="Empowers Adventure Operators in Kyrgyzstan" 
+                progress={45}
+              />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ArticleCard = ({ number, title, progress }) => {
+  return (
+    <div className="bg-white/20 backdrop-blur-sm p-5 rounded-lg flex items-start space-x-4">
+      <div className="relative">
+        <div className="bg-gray-600/50 rounded-full w-10 h-10 flex items-center justify-center flex-shrink-0">
+          <motion.div 
+            className="absolute inset-0 rounded-full border-4 border-white/30"
+            initial={{ pathLength: 0 }}
+            animate={{ 
+              pathLength: progress / 100,
+            }}
+            style={{
+              background: 'transparent',
+              borderRadius: '50%',
+              borderTop: '4px solid white',
+              borderRight: '4px solid transparent',
+              borderBottom: '4px solid transparent',
+              borderLeft: '4px solid transparent',
+              transform: `rotate(${-90 + (progress * 3.6)}deg)`,
+              transformOrigin: 'center'
+            }}
+            transition={{ 
+              duration: 1.5,
+              ease: "easeInOut",
+              repeat: 0
+            }}
+          />
+          <span className="text-white font-bold relative z-10">{number}</span>
+        </div>
+      </div>
+      <p className="text-white font-medium">{title}</p>
+    </div>
+  )
+}
+
+export default HeroSection
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/latest-news-section.jsx b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/latest-news-section.jsx
new file mode 100644
index 0000000..b187c3d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/latest-news-section.jsx
@@ -0,0 +1,191 @@
+"use client"
+import { motion } from "framer-motion"
+
+const LatestNewsSection = () => {
+  return (
+    <section className="w-full bg-white py-12 px-6 md:px-12 lg:px-16">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Left Column - The Latest */}
+          <div className="lg:col-span-2">
+            <h2 className="text-xl font-bold text-gray-900 border-l-4 border-[#2563EB] pl-3 mb-6">The Latest</h2>
+
+            <div className="space-y-8">
+              {/* Article 1 */}
+              <ArticleCard
+                image="https://images.unsplash.com/photo-1501555088652-021faa106b9b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1473&q=80"
+                title="How to enjoy an outdoor adventure – in the Lake District and beyond"
+                description="With festivals, clubs and courses galore it's a great time to try your hand at an open-air activity or sport – from rock climbing to canoeing or birdwatching"
+                tag="Adventure Hack"
+                readTime="3 mins read"
+              />
+
+              {/* Article 2 */}
+              <ArticleCard
+                image="https://images.unsplash.com/photo-1465310477141-6fb93167a273?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                title="Inside 75-Year-Old Will French's Globe-Trotting Adventure on the International Appalachian Trail"
+                description="For most AT thru-hikers, Katahdin is the finish line. For Will French, it was the halfway point on a 25-year, 4,320-mile journey along the prehistoric spine of the Appalachians."
+                tag="Hiking"
+                readTime="5 mins read"
+              />
+
+              {/* Article 3 */}
+              <ArticleCard
+                image="https://images.unsplash.com/photo-1551632811-561732d1e306?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                title="How to Live the Spirit of Adventure"
+                description="Iconic ways to make every day count and infuse more adventure"
+                tag="Adventure Hack"
+                readTime="8 mins read"
+              />
+
+              {/* Article 4 */}
+              <ArticleCard
+                image="https://images.unsplash.com/photo-1530541930197-ff16ac917b0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                title="A New Year's Message from Shannon Stowell"
+                description="About a decade ago, I was asked to moderate a sustainability session at a high-profile travel industry gathering"
+                tag="Tourism"
+                readTime="5 mins read"
+              />
+
+              <ArticleCard
+                image="https://images.unsplash.com/photo-1530541930197-ff16ac917b0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
+                title="A New Year's Message from Shannon Stowell"
+                description="About a decade ago, I was asked to moderate a sustainability session at a high-profile travel industry gathering"
+                tag="Tourism"
+                readTime="5 mins read"
+              />  
+            </div>
+          </div>
+
+          {/* Right Column - Trending and Videos */}
+          <div className="space-y-8">
+            {/* On Trending Section */}
+            <div className="bg-gray-50 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-lg font-bold text-[#2563EB] flex items-center">
+                  On Trending
+                </h3>
+              </div>
+
+              <div className="space-y-4">
+                <TrendingItem
+                  number="1"
+                  title="&quot;These Brides Are Trying to Kill Us&quot;"
+                  readTime="6 mins read"
+                />
+
+                <TrendingItem
+                  number="2"
+                  title="A Lost Hiker Used an Online Bear Camera to Call for Rescue"
+                  readTime="3 mins read"
+                />
+
+                <TrendingItem
+                  number="3"
+                  title="Tourists Chasing a Bear Is the Dumbest Yellowstone Video Yet"
+                  readTime="5 mins read"
+                />
+
+                <TrendingItem
+                  number="4"
+                  title="Let's All Agree to Stop Stealing Hawaii's Lava Rocks"
+                  readTime="5 mins read"
+                />
+
+                <TrendingItem
+                  number="5"
+                  title="A Wild Ride on the Pony Express"
+                  readTime="8 mins read"
+                />
+              </div>
+            </div>
+
+            {/* Popular Videos Section */}
+            <div className="bg-gray-50 rounded-lg p-6">
+              <div className="flex items-center justify-between mb-4">
+                <h3 className="text-base font-bold text-[#2563EB] flex items-center">
+                  Popular Videos
+                </h3>
+              </div>
+
+              <div className="space-y-6">
+                <VideoCard
+                  videoId="FTddz7IpkdU"
+                  title="An alligator was Caught on Camera Appearing in a Swamp Near a Neighborhood in Arizona"
+                />
+
+                <VideoCard
+                  videoId="6Dh-RL__uN4"
+                  title="The Beautiful Landscape of Everest"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const ArticleCard = ({ image, title, description, tag, readTime }) => {
+  return (
+    <motion.div className="flex flex-col md:flex-row gap-4" whileHover={{ y: -5 }} transition={{ duration: 0.3 }}>
+      <div className="w-full md:w-1/3 h-48 overflow-hidden rounded-lg flex-shrink-0">
+        <img src={image || "/placeholder.svg"} alt={title} className="w-full h-full object-cover" />
+      </div>
+      <div className="flex-1">
+        <h3 className="text-lg font-bold text-gray-900 mb-2">{title}</h3>
+        <p className="text-gray-600 text-sm mb-3">{description}</p>
+        <div className="flex items-center justify-start gap-6">
+          <span className="bg-[#2563EB]/90 text-white text-xs px-2 py-1 rounded">{tag}</span>
+          <div className="text-gray-500 text-xs">
+            <span>{readTime}</span>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
+
+const TrendingItem = ({ number, title, readTime }) => {
+  return (
+    <motion.div className="flex gap-3" whileHover={{ x: 5 }} transition={{ duration: 0.2 }}>
+      <div className="text-2xl font-bold text-gray-300">#{number}</div>
+      <div>
+        <h4 className="font-medium text-gray-900 mb-1">{title}</h4>
+        <div className="text-gray-500 text-xs">
+          <span>{readTime}</span>
+        </div>
+      </div>
+    </motion.div>
+  )
+}
+
+const VideoCard = ({ videoId, title }) => {
+  return (
+    <motion.div
+      className="flex flex-col mb-6"
+      whileHover={{ scale: 1.02 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="w-full rounded-lg overflow-hidden">
+        <iframe 
+          width="560" 
+          height="215" 
+          src={`https://www.youtube.com/embed/${videoId}`}
+          title="YouTube video player" 
+          frameBorder="0" 
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+          referrerPolicy="strict-origin-when-cross-origin" 
+          allowFullScreen
+          className="w-full aspect-video"
+        ></iframe>
+      </div>
+      <h4 className="text-gray-700 text-sm md:text-base mt-3">
+        {title}
+      </h4>
+    </motion.div>
+  )
+}
+
+export default LatestNewsSection
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/person-of-week-section.jsx b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/person-of-week-section.jsx
new file mode 100644
index 0000000..9e489b1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/components/person-of-week-section.jsx
@@ -0,0 +1,805 @@
+// "use client"
+// import { useState, useEffect, useRef } from "react"
+// import { motion, AnimatePresence } from "framer-motion"
+
+// const PersonOfWeekSection = () => {
+//   const [isPlaying, setIsPlaying] = useState(false)
+//   const [currentSlide, setCurrentSlide] = useState(0)
+//   const [progress, setProgress] = useState(0)
+//   const [audioTime, setAudioTime] = useState(0)
+//   const [isLiked, setIsLiked] = useState(Array(3).fill(false))
+//   const [volume, setVolume] = useState(80)
+//   const [isMuted, setIsMuted] = useState(false)
+//   const [playbackRate, setPlaybackRate] = useState(1)
+//   const [showSharePanel, setShowSharePanel] = useState(false)
+//   const [showPlaybackOptions, setShowPlaybackOptions] = useState(false)
+
+//   const sharePanelRef = useRef(null)
+//   const playbackOptionsRef = useRef(null)
+
+//   // Close panels when clicking outside
+//   useEffect(() => {
+//     const handleClickOutside = (event) => {
+//       if (sharePanelRef.current && !sharePanelRef.current.contains(event.target)) {
+//         setShowSharePanel(false)
+//       }
+//       if (playbackOptionsRef.current && !playbackOptionsRef.current.contains(event.target)) {
+//         setShowPlaybackOptions(false)
+//       }
+//     }
+
+//     document.addEventListener("mousedown", handleClickOutside)
+//     return () => document.removeEventListener("mousedown", handleClickOutside)
+//   }, [])
+
+//   // Simulate audio progress when playing
+//   useEffect(() => {
+//     let interval
+//     if (isPlaying) {
+//       interval = setInterval(() => {
+//         setProgress((prev) => {
+//           const newProgress = prev + 0.5 * playbackRate
+//           if (newProgress >= 100) {
+//             setIsPlaying(false)
+//             return 100
+//           }
+//           return newProgress
+//         })
+//         setAudioTime((prev) => prev + 0.5 * playbackRate)
+//       }, 1000)
+//     }
+//     return () => clearInterval(interval)
+//   }, [isPlaying, playbackRate])
+
+//   const people = [
+//     {
+//       id: 0,
+//       name: "Matty Cobra",
+//       title: "Beyond Beautiful",
+//       role: "Adventure Photographer",
+//       image:
+//         "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
+//       duration: 2088, // in seconds (34:48)
+//       color: "#3B82F6", // blue
+//       topics: ["Wildlife Photography", "Conservation", "Travel"],
+//       description:
+//         "Matty shares his journey through the most beautiful landscapes on Earth and how his photography has helped conservation efforts worldwide.",
+//       episodeNumber: "EP 42",
+//       releaseDate: "Apr 15, 2025",
+//     },
+//     {
+//       id: 1,
+//       name: "Sarah Johnson",
+//       title: "The Summit Seeker",
+//       role: "Mountain Climber",
+//       image:
+//         "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
+//       duration: 1860, // in seconds (31:00)
+//       color: "#EF4444", // red
+//       topics: ["Mountain Climbing", "Extreme Sports", "Mental Strength"],
+//       description:
+//         "Sarah discusses her experiences climbing the world's highest peaks and the mental fortitude required to push beyond your limits.",
+//       episodeNumber: "EP 41",
+//       releaseDate: "Apr 8, 2025",
+//     },
+//     {
+//       id: 2,
+//       name: "David Chen",
+//       title: "Ocean Explorer",
+//       role: "Marine Biologist",
+//       image:
+//         "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80",
+//       duration: 2220, // in seconds (37:00)
+//       color: "#10B981", // green
+//       topics: ["Marine Conservation", "Ocean Life", "Climate Change"],
+//       description:
+//         "David takes us deep into the mysteries of the ocean and explains how marine ecosystems are being affected by climate change.",
+//       episodeNumber: "EP 40",
+//       releaseDate: "Apr 1, 2025",
+//     },
+//   ]
+
+//   const formatTime = (seconds) => {
+//     const mins = Math.floor(seconds / 60)
+//     const secs = Math.floor(seconds % 60)
+//     return `${mins}:${secs < 10 ? "0" : ""}${secs}`
+//   }
+
+//   const nextSlide = () => {
+//     setIsPlaying(false)
+//     setProgress(0)
+//     setAudioTime(0)
+//     setCurrentSlide((prev) => (prev === people.length - 1 ? 0 : prev + 1))
+//     setShowSharePanel(false)
+//     setShowPlaybackOptions(false)
+//   }
+
+//   const prevSlide = () => {
+//     setIsPlaying(false)
+//     setProgress(0)
+//     setAudioTime(0)
+//     setCurrentSlide((prev) => (prev === 0 ? people.length - 1 : prev - 1))
+//     setShowSharePanel(false)
+//     setShowPlaybackOptions(false)
+//   }
+
+//   const togglePlay = () => {
+//     setIsPlaying(!isPlaying)
+//   }
+
+//   const toggleLike = (index) => {
+//     const newLiked = [...isLiked]
+//     newLiked[index] = !newLiked[index]
+//     setIsLiked(newLiked)
+//   }
+
+//   const toggleMute = () => {
+//     setIsMuted(!isMuted)
+//   }
+
+//   const handleVolumeChange = (e) => {
+//     setVolume(Number.parseInt(e.target.value))
+//     if (Number.parseInt(e.target.value) === 0) {
+//       setIsMuted(true)
+//     } else {
+//       setIsMuted(false)
+//     }
+//   }
+
+//   const handlePlaybackRateChange = (rate) => {
+//     setPlaybackRate(rate)
+//     setShowPlaybackOptions(false)
+//   }
+
+//   const currentPerson = people[currentSlide]
+
+//   return (
+//     <section className="w-full py-20 bg-gradient-to-b from-gray-50 to-white">
+//       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+//         <div className="text-center mb-12">
+//           <h2 className="text-3xl font-bold text-gray-900 mb-3">Featured Voices</h2>
+//           <p className="text-gray-600 max-w-2xl mx-auto">
+//             Listen to our weekly interviews with extraordinary individuals who are making a difference in the world of
+//             adventure and exploration.
+//           </p>
+//         </div>
+
+//         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+//           {/* Featured Person Card - Takes more space */}
+//           <div className="lg:col-span-8 lg:order-1 order-2">
+//             <AnimatePresence mode="wait">
+//               <motion.div
+//                 key={currentPerson.id}
+//                 initial={{ opacity: 0, y: 20 }}
+//                 animate={{ opacity: 1, y: 0 }}
+//                 exit={{ opacity: 0, y: -20 }}
+//                 transition={{ duration: 0.3 }}
+//                 className="bg-white rounded-xl shadow-lg overflow-hidden"
+//               >
+//                 {/* Header with image and gradient overlay */}
+//                 <div className="relative h-64 sm:h-80 overflow-hidden">
+//                   <div
+//                     className="absolute inset-0 bg-cover bg-center"
+//                     style={{ backgroundImage: `url(${currentPerson.image})` }}
+//                   ></div>
+//                   <div
+//                     className="absolute inset-0 opacity-90"
+//                     style={{
+//                       background: `linear-gradient(135deg, ${currentPerson.color}cc, ${currentPerson.color}22)`,
+//                     }}
+//                   ></div>
+//                   <div className="absolute inset-0 flex flex-col justify-between p-6 text-white">
+//                     <div className="flex justify-between items-start">
+//                       <div className="flex items-center gap-2">
+//                         <div className="flex items-center gap-1">
+//                           <span className="w-3 h-3 bg-white rounded-full animate-pulse"></span>
+//                           <span className="text-sm font-medium">LIVE</span>
+//                         </div>
+//                         <span className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm">
+//                           {currentPerson.episodeNumber}
+//                         </span>
+//                       </div>
+//                       <div className="flex gap-2">
+//                         <button
+//                           onClick={() => toggleLike(currentSlide)}
+//                           className="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors"
+//                           aria-label="Like episode"
+//                         >
+//                           {isLiked[currentSlide] ? (
+//                             <svg
+//                               width="20"
+//                               height="20"
+//                               viewBox="0 0 24 24"
+//                               fill="none"
+//                               xmlns="http://www.w3.org/2000/svg"
+//                             >
+//                               <path
+//                                 d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+//                                 fill="#FFF"
+//                               />
+//                             </svg>
+//                           ) : (
+//                             <svg
+//                               width="20"
+//                               height="20"
+//                               viewBox="0 0 24 24"
+//                               fill="none"
+//                               xmlns="http://www.w3.org/2000/svg"
+//                             >
+//                               <path
+//                                 d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+//                                 stroke="#FFF"
+//                                 strokeWidth="2"
+//                                 fill="none"
+//                               />
+//                             </svg>
+//                           )}
+//                         </button>
+//                         <div className="relative">
+//                           <button
+//                             onClick={() => setShowSharePanel(!showSharePanel)}
+//                             className="w-10 h-10 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-sm hover:bg-white/30 transition-colors"
+//                             aria-label="Share episode"
+//                           >
+//                             <svg
+//                               width="20"
+//                               height="20"
+//                               viewBox="0 0 24 24"
+//                               fill="none"
+//                               xmlns="http://www.w3.org/2000/svg"
+//                             >
+//                               <path
+//                                 d="M18 8C19.6569 8 21 6.65685 21 5C21 3.34315 19.6569 2 18 2C16.3431 2 15 3.34315 15 5C15 5.12548 15.0077 5.24917 15.0227 5.37061L8.08261 9.84066C7.54305 9.32015 6.80891 9 6 9C4.34315 9 3 10.3431 3 12C3 13.6569 4.34315 15 6 15C6.80891 15 7.54305 14.6798 8.08261 14.1593L15.0227 18.6294C15.0077 18.7508 15 18.8745 15 19C15 20.6569 16.3431 22 18 22C19.6569 22 21 20.6569 21 19C21 17.3431 19.6569 16 18 16C17.1911 16 16.457 16.3202 15.9174 16.8407L8.97733 12.3706C8.99229 12.2492 9 12.1255 9 12C9 11.8745 8.99229 11.7508 8.97733 11.6294L15.9174 7.15934C16.457 7.67985 17.1911 8 18 8Z"
+//                                 fill="white"
+//                               />
+//                             </svg>
+//                           </button>
+
+//                           {/* Share Panel */}
+//                           {showSharePanel && (
+//                             <div
+//                               ref={sharePanelRef}
+//                               className="absolute top-12 right-0 bg-white rounded-lg shadow-lg p-3 z-10 w-48"
+//                             >
+//                               <div className="grid grid-cols-2 gap-2">
+//                                 <button className="flex flex-col items-center justify-center p-2 rounded hover:bg-gray-100">
+//                                   <div className="w-10 h-10 rounded-full bg-[#1877F2] flex items-center justify-center mb-1">
+//                                     <svg
+//                                       width="20"
+//                                       height="20"
+//                                       viewBox="0 0 24 24"
+//                                       fill="none"
+//                                       xmlns="http://www.w3.org/2000/svg"
+//                                     >
+//                                       <path
+//                                         d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3V2z"
+//                                         fill="white"
+//                                       />
+//                                     </svg>
+//                                   </div>
+//                                   <span className="text-xs text-gray-700">Facebook</span>
+//                                 </button>
+//                                 <button className="flex flex-col items-center justify-center p-2 rounded hover:bg-gray-100">
+//                                   <div className="w-10 h-10 rounded-full bg-[#1DA1F2] flex items-center justify-center mb-1">
+//                                     <svg
+//                                       width="20"
+//                                       height="20"
+//                                       viewBox="0 0 24 24"
+//                                       fill="none"
+//                                       xmlns="http://www.w3.org/2000/svg"
+//                                     >
+//                                       <path
+//                                         d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z"
+//                                         fill="white"
+//                                       />
+//                                     </svg>
+//                                   </div>
+//                                   <span className="text-xs text-gray-700">Twitter</span>
+//                                 </button>
+//                                 <button className="flex flex-col items-center justify-center p-2 rounded hover:bg-gray-100">
+//                                   <div className="w-10 h-10 rounded-full bg-[#25D366] flex items-center justify-center mb-1">
+//                                     <svg
+//                                       width="20"
+//                                       height="20"
+//                                       viewBox="0 0 24 24"
+//                                       fill="none"
+//                                       xmlns="http://www.w3.org/2000/svg"
+//                                     >
+//                                       <path
+//                                         fillRule="evenodd"
+//                                         clipRule="evenodd"
+//                                         d="M18.403 5.633A8.919 8.919 0 0 0 12.053 3c-4.948 0-8.976 4.027-8.978 8.977 0 1.582.413 3.126 1.198 4.488L3 21.116l4.759-1.249a8.981 8.981 0 0 0 4.29 1.093h.004c4.947 0 8.975-4.027 8.977-8.977a8.926 8.926 0 0 0-2.627-6.35m-6.35 13.812h-.003a7.446 7.446 0 0 1-3.798-1.041l-.272-.162-2.824.741.753-2.753-.177-.282a7.448 7.448 0 0 1-1.141-3.971c.002-4.114 3.349-7.461 7.465-7.461a7.413 7.413 0 0 1 5.275 2.188 7.42 7.42 0 0 1 2.183 5.279c-.002 4.114-3.349 7.462-7.461 7.462m4.093-5.589c-.225-.113-1.327-.655-1.533-.73-.205-.075-.354-.112-.504.112s-.58.729-.711.879-.262.168-.486.056-.947-.349-1.804-1.113c-.667-.595-1.117-1.329-1.248-1.554s-.014-.346.099-.458c.101-.1.224-.262.336-.393.112-.131.149-.224.224-.374s.038-.281-.019-.393c-.056-.113-.505-1.217-.692-1.666-.181-.435-.366-.377-.504-.383a9.65 9.65 0 0 0-.429-.008.826.826 0 0 0-.599.28c-.206.225-.785.767-.785 1.871s.804 2.171.916 2.321c.112.15 1.582 2.415 3.832 3.387.536.231.954.369 1.279.473.537.171 1.026.146 1.413.089.431-.064 1.327-.542 1.514-1.066.187-.524.187-.973.131-1.067-.056-.094-.207-.151-.43-.263"
+//                                         fill="white"
+//                                       />
+//                                     </svg>
+//                                   </div>
+//                                   <span className="text-xs text-gray-700">WhatsApp</span>
+//                                 </button>
+//                                 <button className="flex flex-col items-center justify-center p-2 rounded hover:bg-gray-100">
+//                                   <div className="w-10 h-10 rounded-full bg-gradient-to-tr from-[#405DE6] via-[#E1306C] to-[#FFDC80] flex items-center justify-center mb-1">
+//                                     <svg
+//                                       width="20"
+//                                       height="20"
+//                                       viewBox="0 0 24 24"
+//                                       fill="none"
+//                                       xmlns="http://www.w3.org/2000/svg"
+//                                     >
+//                                       <path
+//                                         d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153.509.5.902 1.105 1.153 1.772.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 01-1.153 1.772c-.5.508-1.105.902-1.772 1.153-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 01-1.772-1.153 4.904 4.904 0 01-1.153-1.772c-.247-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 011.153-1.772A4.897 4.897 0 015.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 100 10 5 5 0 000-10zm6.5-.25a1.25 1.25 0 10-2.5 0 1.25 1.25 0 002.5 0zM12 9a3 3 0 110 6 3 3 0 010-6z"
+//                                         fill="white"
+//                                       />
+//                                     </svg>
+//                                   </div>
+//                                   <span className="text-xs text-gray-700">Instagram</span>
+//                                 </button>
+//                               </div>
+//                               <div className="mt-2 pt-2 border-t border-gray-100">
+//                                 <button className="w-full text-left text-xs text-gray-700 hover:text-gray-900 p-2 rounded hover:bg-gray-100 flex items-center">
+//                                   <svg
+//                                     width="16"
+//                                     height="16"
+//                                     viewBox="0 0 24 24"
+//                                     fill="none"
+//                                     xmlns="http://www.w3.org/2000/svg"
+//                                     className="mr-2"
+//                                   >
+//                                     <path
+//                                       d="M10 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V14"
+//                                       stroke="currentColor"
+//                                       strokeWidth="2"
+//                                       strokeLinecap="round"
+//                                       strokeLinejoin="round"
+//                                     />
+//                                     <path
+//                                       d="M13 11L21 3"
+//                                       stroke="currentColor"
+//                                       strokeWidth="2"
+//                                       strokeLinecap="round"
+//                                       strokeLinejoin="round"
+//                                     />
+//                                     <path
+//                                       d="M16 3H21V8"
+//                                       stroke="currentColor"
+//                                       strokeWidth="2"
+//                                       strokeLinecap="round"
+//                                       strokeLinejoin="round"
+//                                     />
+//                                   </svg>
+//                                   Copy Link
+//                                 </button>
+//                               </div>
+//                             </div>
+//                           )}
+//                         </div>
+//                       </div>
+//                     </div>
+//                     <div className="mt-auto">
+//                       <p className="text-white/80 mb-1">{currentPerson.role}</p>
+//                       <h3 className="text-2xl font-bold mb-1">{currentPerson.name}</h3>
+//                       <h2 className="text-3xl sm:text-4xl font-bold">{currentPerson.title}</h2>
+//                     </div>
+//                   </div>
+//                 </div>
+
+//                 {/* Content */}
+//                 <div className="p-6">
+//                   <div className="flex justify-between items-center mb-4">
+//                     <div className="flex flex-wrap gap-2">
+//                       {currentPerson.topics.map((topic) => (
+//                         <span
+//                           key={topic}
+//                           className="px-3 py-1 rounded-full text-xs font-medium"
+//                           style={{
+//                             backgroundColor: `${currentPerson.color}15`,
+//                             color: currentPerson.color,
+//                           }}
+//                         >
+//                           {topic}
+//                         </span>
+//                       ))}
+//                     </div>
+//                     <div className="text-sm text-gray-500">{currentPerson.releaseDate}</div>
+//                   </div>
+
+//                   <p className="text-gray-700 mb-6">{currentPerson.description}</p>
+
+//                   {/* Audio Player */}
+//                   <div className="bg-gray-50 rounded-lg p-5">
+//                     <div className="flex items-center justify-between mb-3">
+//                       <div className="flex items-center gap-2">
+//                         <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+//                           <svg
+//                             width="16"
+//                             height="16"
+//                             viewBox="0 0 24 24"
+//                             fill="none"
+//                             xmlns="http://www.w3.org/2000/svg"
+//                           >
+//                             <path
+//                               d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z"
+//                               fill="currentColor"
+//                             />
+//                             <path
+//                               d="M16.2426 17.6569C16.5856 17.3139 17.1187 17.3139 17.4618 17.6569C17.8048 18 17.8048 18.5331 17.4618 18.8761L16.2426 17.6569ZM17.4618 18.8761C17.1187 19.2192 16.5856 19.2192 16.2426 18.8761C15.8995 18.5331 15.8995 18 16.2426 17.6569L17.4618 18.8761ZM6.75736 7.75736C6.41421 8.1005 5.88114 8.1005 5.53799 7.75736C5.19485 7.41421 5.19485 6.88114 5.53799 6.53799L6.75736 7.75736ZM5.53799 6.53799C5.88114 6.19485 6.41421 6.19485 6.75736 6.53799C7.1005 6.88114 7.1005 7.41421 6.75736 7.75736L5.53799 6.53799ZM19.0711 12C19.0711 15.9033 15.9033 19.0711 12 19.0711V20.9289C16.9279 20.9289 20.9289 16.9279 20.9289 12H19.0711ZM12 19.0711C8.09669 19.0711 4.92893 15.9033 4.92893 12H3.07107C3.07107 16.9279 7.07214 20.9289 12 20.9289V19.0711ZM4.92893 12C4.92893 8.09669 8.09669 4.92893 12 4.92893V3.07107C7.07214 3.07107 3.07107 7.07214 3.07107 12H4.92893ZM12 4.92893C15.9033 4.92893 19.0711 8.09669 19.0711 12H20.9289C20.9289 7.07214 16.9279 3.07107 12 3.07107V4.92893ZM16.2426 17.6569L17.4618 18.8761L16.2426 17.6569ZM6.75736 7.75736L5.53799 6.53799L6.75736 7.75736Z"
+//                               fill="currentColor"
+//                             />
+//                           </svg>
+//                         </div>
+//                         <span className="text-sm font-medium text-gray-900">Adventure Cast</span>
+//                       </div>
+//                       <div className="text-xs text-gray-500">
+//                         {formatTime(audioTime)} / {formatTime(currentPerson.duration)}
+//                       </div>
+//                     </div>
+
+//                     {/* Waveform */}
+//                     <div className="relative h-12 mb-4">
+//                       <div className="absolute inset-0 flex items-center">
+//                         {Array.from({ length: 50 }).map((_, i) => {
+//                           const height = Math.random() * 100
+//                           const isActive = (i / 50) * 100 <= progress
+//                           return (
+//                             <div
+//                               key={i}
+//                               className="w-1 mx-0.5 rounded-full"
+//                               style={{
+//                                 height: `${height}%`,
+//                                 backgroundColor: isActive ? currentPerson.color : "#E5E7EB",
+//                               }}
+//                             ></div>
+//                           )
+//                         })}
+//                       </div>
+
+//                       {/* Progress Bar (hidden but functional for clicking) */}
+//                       <div className="absolute inset-0 opacity-0">
+//                         <div className="h-2 bg-gray-200 rounded-full overflow-hidden">
+//                           <div
+//                             className="h-full rounded-full transition-all duration-300"
+//                             style={{
+//                               width: `${progress}%`,
+//                               backgroundColor: currentPerson.color,
+//                             }}
+//                           ></div>
+//                         </div>
+//                       </div>
+//                     </div>
+
+//                     {/* Controls */}
+//                     <div className="flex items-center justify-between">
+//                       <div className="flex items-center gap-3">
+//                         <button
+//                           onClick={prevSlide}
+//                           className="w-8 h-8 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors"
+//                           aria-label="Previous episode"
+//                         >
+//                           <svg
+//                             width="16"
+//                             height="16"
+//                             viewBox="0 0 24 24"
+//                             fill="none"
+//                             xmlns="http://www.w3.org/2000/svg"
+//                           >
+//                             <path d="M19 20L9 12L19 4V20Z" fill="currentColor" />
+//                           </svg>
+//                         </button>
+
+//                         <button
+//                           onClick={togglePlay}
+//                           className="w-14 h-14 flex items-center justify-center rounded-full shadow-md transition-colors"
+//                           style={{ backgroundColor: currentPerson.color }}
+//                           aria-label={isPlaying ? "Pause" : "Play"}
+//                         >
+//                           {isPlaying ? (
+//                             <svg
+//                               width="24"
+//                               height="24"
+//                               viewBox="0 0 24 24"
+//                               fill="none"
+//                               xmlns="http://www.w3.org/2000/svg"
+//                             >
+//                               <rect x="6" y="4" width="4" height="16" fill="white" />
+//                               <rect x="14" y="4" width="4" height="16" fill="white" />
+//                             </svg>
+//                           ) : (
+//                             <svg
+//                               width="24"
+//                               height="24"
+//                               viewBox="0 0 24 24"
+//                               fill="none"
+//                               xmlns="http://www.w3.org/2000/svg"
+//                             >
+//                               <path d="M5 3L19 12L5 21V3Z" fill="white" />
+//                             </svg>
+//                           )}
+//                         </button>
+
+//                         <button
+//                           onClick={nextSlide}
+//                           className="w-8 h-8 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors"
+//                           aria-label="Next episode"
+//                         >
+//                           <svg
+//                             width="16"
+//                             height="16"
+//                             viewBox="0 0 24 24"
+//                             fill="none"
+//                             xmlns="http://www.w3.org/2000/svg"
+//                           >
+//                             <path d="M5 4L15 12L5 20V4Z" fill="currentColor" />
+//                           </svg>
+//                         </button>
+
+//                         <div className="relative">
+//                           <button
+//                             onClick={() => setShowPlaybackOptions(!showPlaybackOptions)}
+//                             className="w-8 h-8 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors"
+//                             aria-label="Playback speed"
+//                           >
+//                             <span className="text-xs font-medium">{playbackRate}x</span>
+//                           </button>
+
+//                           {/* Playback Speed Options */}
+//                           {showPlaybackOptions && (
+//                             <div
+//                               ref={playbackOptionsRef}
+//                               className="absolute top-10 left-0 bg-white rounded-lg shadow-lg p-2 z-10 w-24"
+//                             >
+//                               {[0.5, 0.75, 1, 1.25, 1.5, 2].map((rate) => (
+//                                 <button
+//                                   key={rate}
+//                                   onClick={() => handlePlaybackRateChange(rate)}
+//                                   className={`w-full text-left px-3 py-1 text-sm rounded ${
+//                                     playbackRate === rate ? "bg-gray-100 font-medium" : "hover:bg-gray-50"
+//                                   }`}
+//                                 >
+//                                   {rate}x
+//                                 </button>
+//                               ))}
+//                             </div>
+//                           )}
+//                         </div>
+//                       </div>
+
+//                       <div className="flex items-center gap-2">
+//                         <button
+//                           onClick={toggleMute}
+//                           className="w-8 h-8 flex items-center justify-center rounded-full text-gray-500 hover:bg-gray-200 transition-colors"
+//                           aria-label={isMuted ? "Unmute" : "Mute"}
+//                         >
+//                           {isMuted || volume === 0 ? (
+//                             <svg
+//                               width="16"
+//                               height="16"
+//                               viewBox="0 0 24 24"
+//                               fill="none"
+//                               xmlns="http://www.w3.org/2000/svg"
+//                             >
+//                               <path d="M11 5L6 9H2V15H6L11 19V5Z" fill="currentColor" />
+//                               <path
+//                                 d="M23 9L17 15"
+//                                 stroke="currentColor"
+//                                 strokeWidth="2"
+//                                 strokeLinecap="round"
+//                                 strokeLinejoin="round"
+//                               />
+//                               <path
+//                                 d="M17 9L23 15"
+//                                 stroke="currentColor"
+//                                 strokeWidth="2"
+//                                 strokeLinecap="round"
+//                                 strokeLinejoin="round"
+//                               />
+//                             </svg>
+//                           ) : (
+//                             <svg
+//                               width="16"
+//                               height="16"
+//                               viewBox="0 0 24 24"
+//                               fill="none"
+//                               xmlns="http://www.w3.org/2000/svg"
+//                             >
+//                               <path d="M11 5L6 9H2V15H6L11 19V5Z" fill="currentColor" />
+//                               <path
+//                                 d="M15.54 8.46C16.4774 9.39764 17.0039 10.6692 17.0039 11.995C17.0039 13.3208 16.4774 14.5924 15.54 15.53"
+//                                 stroke="currentColor"
+//                                 strokeWidth="2"
+//                                 strokeLinecap="round"
+//                                 strokeLinejoin="round"
+//                               />
+//                               <path
+//                                 d="M19.07 5.93C20.9447 7.80528 21.9979 10.3447 21.9979 13C21.9979 15.6553 20.9447 18.1947 19.07 20.07"
+//                                 stroke="currentColor"
+//                                 strokeWidth="2"
+//                                 strokeLinecap="round"
+//                                 strokeLinejoin="round"
+//                               />
+//                             </svg>
+//                           )}
+//                         </button>
+//                         <input
+//                           type="range"
+//                           min="0"
+//                           max="100"
+//                           value={volume}
+//                           onChange={handleVolumeChange}
+//                           className="w-20 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
+//                           style={{
+//                             background: `linear-gradient(to right, ${currentPerson.color} 0%, ${currentPerson.color} ${volume}%, #E5E7EB ${volume}%, #E5E7EB 100%)`,
+//                           }}
+//                         />
+//                       </div>
+//                     </div>
+//                   </div>
+
+//                   {/* Action Buttons */}
+//                   <div className="flex justify-between items-center mt-6">
+//                     <div className="flex items-center gap-2">
+//                       <span className="flex items-center gap-1 text-gray-500 text-sm">
+//                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                           <path
+//                             d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
+//                             stroke="currentColor"
+//                             strokeWidth="2"
+//                             fill="none"
+//                           />
+//                         </svg>
+//                         {Math.floor(Math.random() * 500) + 100}
+//                       </span>
+//                       <span className="flex items-center gap-1 text-gray-500 text-sm">
+//                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                           <path
+//                             d="M21 11.5C21.0034 12.8199 20.6951 14.1219 20.1 15.3C19.3944 16.7118 18.3098 17.8992 16.9674 18.7293C15.6251 19.5594 14.0782 19.9994 12.5 20C11.1801 20.0035 9.87812 19.6951 8.7 19.1L3 21L4.9 15.3C4.30493 14.1219 3.99656 12.8199 4 11.5C4.00061 9.92179 4.44061 8.37488 5.27072 7.03258C6.10083 5.69028 7.28825 4.6056 8.7 3.90003C9.87812 3.30496 11.1801 2.99659 12.5 3.00003H13C15.0843 3.11502 17.053 3.99479 18.5291 5.47089C20.0052 6.94699 20.885 8.91568 21 11V11.5Z"
+//                             stroke="currentColor"
+//                             strokeWidth="2"
+//                             strokeLinecap="round"
+//                             strokeLinejoin="round"
+//                           />
+//                         </svg>
+//                         {Math.floor(Math.random() * 50) + 5}
+//                       </span>
+//                       <span className="flex items-center gap-1 text-gray-500 text-sm">
+//                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                           <path
+//                             d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+//                             stroke="currentColor"
+//                             strokeWidth="2"
+//                             strokeLinecap="round"
+//                             strokeLinejoin="round"
+//                           />
+//                           <path
+//                             d="M12 6V12L16 14"
+//                             stroke="currentColor"
+//                             strokeWidth="2"
+//                             strokeLinecap="round"
+//                             strokeLinejoin="round"
+//                           />
+//                         </svg>
+//                         {formatTime(currentPerson.duration)}
+//                       </span>
+//                     </div>
+
+//                     <div className="flex gap-2">
+//                       <button
+//                         className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+//                         style={{
+//                           backgroundColor: `${currentPerson.color}15`,
+//                           color: currentPerson.color,
+//                         }}
+//                       >
+//                         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                           <path
+//                             d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3V2z"
+//                             stroke="currentColor"
+//                             strokeWidth="2"
+//                             strokeLinecap="round"
+//                             strokeLinejoin="round"
+//                           />
+//                         </svg>
+//                         Share
+//                       </button>
+//                     </div>
+//                   </div>
+//                 </div>
+//               </motion.div>
+//             </AnimatePresence>
+//           </div>
+
+//           {/* Person Selector - Takes less space */}
+//           <div className="lg:col-span-4 lg:order-2 order-1">
+//             <div className="bg-white rounded-xl shadow-lg p-6">
+//               <div className="flex items-center justify-between mb-4">
+//                 <h3 className="text-lg font-semibold text-gray-900">This Week's Guests</h3>
+//                 <a href="#" className="text-sm font-medium" style={{ color: people[currentSlide].color }}>
+//                   View All
+//                 </a>
+//               </div>
+//               <div className="space-y-3">
+//                 {people.map((person, index) => (
+//                   <PersonSelector
+//                     key={person.id}
+//                     person={person}
+//                     isActive={index === currentSlide}
+//                     onClick={() => {
+//                       setCurrentSlide(index)
+//                       setIsPlaying(false)
+//                       setProgress(0)
+//                       setAudioTime(0)
+//                       setShowSharePanel(false)
+//                       setShowPlaybackOptions(false)
+//                     }}
+//                   />
+//                 ))}
+//               </div>
+
+//               <div className="mt-6 pt-6 border-t border-gray-100">
+//                 <h4 className="text-sm font-semibold text-gray-900 mb-3">Subscribe to Podcast</h4>
+//                 <div className="flex flex-wrap gap-3">
+//                   <button className="p-2 rounded-lg hover:bg-gray-50">
+//                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                       <path
+//                         d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM6.5 9H17.5C17.78 9 18 9.22 18 9.5C18 9.78 17.78 10 17.5 10H6.5C6.22 10 6 9.78 6 9.5C6 9.22 6.22 9 6.5 9ZM17.5 15H6.5C6.22 15 6 14.78 6 14.5C6 14.22 6.22 14 6.5 14H17.5C17.78 14 18 14.22 18 14.5C18 14.78 17.78 15 17.5 15ZM17.5 12H6.5C6.22 12 6 11.78 6 11.5C6 11.22 6.22 11 6.5 11H17.5C17.78 11 18 11.22 18 11.5C18 11.78 17.78 12 17.5 12Z"
+//                         fill="#7C3AED"
+//                       />
+//                     </svg>
+//                   </button>
+//                   <button className="p-2 rounded-lg hover:bg-gray-50">
+//                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                       <path
+//                         d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"
+//                         fill="#EF4444"
+//                       />
+//                     </svg>
+//                   </button>
+//                   <button className="p-2 rounded-lg hover:bg-gray-50">
+//                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                       <path
+//                         d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12 7.5C10.34 7.5 9 8.84 9 10.5H11C11 9.95 11.45 9.5 12 9.5C12.55 9.5 13 9.95 13 10.5C13 11.5 11.5 11.25 11.5 13.5H13.5C13.5 12 15 12.25 15 10.5C15 8.84 13.66 7.5 12 7.5ZM11 14.5H13V16.5H11V14.5Z"
+//                         fill="#10B981"
+//                       />
+//                     </svg>
+//                   </button>
+//                   <button className="p-2 rounded-lg hover:bg-gray-50">
+//                     <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+//                       <path
+//                         d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+//                         fill="#3B82F6"
+//                       />
+//                     </svg>
+//                   </button>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </section>
+//   )
+// }
+
+// const PersonSelector = ({ person, isActive, onClick }) => {
+//   return (
+//     <motion.button
+//       whileHover={{ x: 5 }}
+//       onClick={onClick}
+//       className={`w-full flex items-center gap-4 p-4 rounded-lg text-left transition-colors ${
+//         isActive ? "bg-gray-50 shadow-sm border-l-4" : "hover:bg-gray-50 border-l-4 border-transparent"
+//       }`}
+//       style={{ borderLeftColor: isActive ? person.color : "transparent" }}
+//     >
+//       <div
+//         className="w-12 h-12 rounded-full flex-shrink-0 bg-cover bg-center"
+//         style={{ backgroundImage: `url(${person.image})` }}
+//       ></div>
+//       <div>
+//         <div className="flex items-center gap-2">
+//           <h4 className="font-medium text-gray-900">{person.name}</h4>
+//           <span className="text-xs text-gray-500">{person.episodeNumber}</span>
+//         </div>
+//         <p className="text-sm text-gray-500">{person.title}</p>
+//       </div>
+//     </motion.button>
+//   )
+// }
+
+// export default PersonOfWeekSection
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/index.jsx
new file mode 100644
index 0000000..79f1d0a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/newsandblogs/index.jsx
@@ -0,0 +1,14 @@
+import HeroSection from "./components/hero-section";
+import LatestNewsSection from "./components/latest-news-section";
+import RelatedContent from "./components/RelatedContent";
+import Cta from "./components/cta"
+export default function NewsAndBlogsPage() {
+  return (
+    <>
+      <HeroSection />
+      <LatestNewsSection />
+      <RelatedContent />
+      <Cta />
+    </>
+  );
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Hero.jsx
new file mode 100644
index 0000000..b439172
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Hero.jsx
@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { ArrowRight, Cookie, Settings, Bell } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const Hero = React.memo(() => {
+  // Check if user prefers reduced motion
+  const prefersReducedMotion = useReducedMotion();
+  
+  // Memoize the background animation circles to prevent re-calculation on re-renders
+  // Reduce number of circles for better performance
+  // Disable animations if user prefers reduced motion
+  const animationCircles = useMemo(() => {
+    // Determine circle count based on motion preference and device capability
+    const circleCount = prefersReducedMotion ? 5 : 10;
+    
+    return [...Array(circleCount)].map((_, i) => (
+      <motion.div
+        key={i}
+        className="absolute rounded-full border border-white/10"
+        style={{
+          width: `${(i + 1) * 15}%`, // Increased size increment to maintain coverage
+          height: `${(i + 1) * 15}%`,
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+        animate={prefersReducedMotion ? {} : {
+          rotate: 360,
+          scale: [1, 1.05, 1], // Reduced scale variation for better performance
+        }}
+        transition={prefersReducedMotion ? {} : {
+          duration: 25 + i * 2, // Simplified duration calculation
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      />
+    ));
+  }, [prefersReducedMotion]);
+
+  // Memoize feature cards to prevent unnecessary re-renders
+  const featureCards = useMemo(() => (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={prefersReducedMotion ? {} : { delay: 0.5 }}
+      className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"
+    >
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+          <Cookie className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Essential Cookies</h3>
+        <p className="text-white/80 text-sm">These cookies are necessary for the website to function properly and securely.</p>
+      </div>
+      
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+          <Settings className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Cookie Management</h3>
+        <p className="text-white/80 text-sm">You have full control over which cookies you accept through your browser settings.</p>
+      </div>
+      
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+          <Bell className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Stay Informed</h3>
+        <p className="text-white/80 text-sm">We'll notify you of any significant changes to our cookie practices.</p>
+      </div>
+    </motion.div>
+  ), [prefersReducedMotion]);
+
+  // Memoize CTA buttons to prevent unnecessary re-renders
+  const ctaButtons = useMemo(() => (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+      animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+      transition={prefersReducedMotion ? {} : { delay: 0.6 }}
+      className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+    >
+      <Link
+        to="/contact"
+        className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-3 px-8 rounded-full hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-md hover:shadow-lg"
+      >
+        Contact Us
+        <ArrowRight className="w-4 h-4" />
+      </Link>
+      
+      <Link
+        to="/privacy-policy"
+        className="inline-flex items-center gap-2 bg-white/10 text-white font-semibold py-3 px-8 rounded-full hover:bg-white/20 transition-all duration-300"
+      >
+        Privacy Policy
+      </Link>
+    </motion.div>
+  ), [prefersReducedMotion]);
+
+  return (
+    <div className="min-h-[70vh] bg-gradient-to-br from-[#1d1d1d] to-[#2d2d2d] relative overflow-hidden">
+      {/* Background animation circles - reduced and optimized */}
+      {animationCircles}
+
+      <div className="max-w-6xl mx-auto py-20 px-4 relative">
+        {/* Hero Content */}
+        <motion.div
+          initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+          transition={prefersReducedMotion ? {} : { duration: 0.6 }}
+          className="text-center max-w-3xl mx-auto"
+        >
+          <motion.span
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.2 }}
+            className="inline-block px-4 py-1.5 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full text-white text-sm font-medium mb-6"
+          >
+            Cookie Policy
+          </motion.span>
+          
+          <motion.h1
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.3 }}
+            className="text-4xl md:text-6xl font-bold text-white mb-6"
+          >
+            How We Use Cookies
+          </motion.h1>
+          
+          <motion.p
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.4 }}
+            className="text-[#fff] text-lg md:text-xl mb-8"
+          >
+            We use cookies to enhance your browsing experience and provide personalized services.
+            Learn how we respect your privacy while improving your site experience.
+          </motion.p>
+
+          {/* Key cookie points */}
+          {featureCards}
+
+          {/* CTA Buttons */}
+          {ctaButtons}
+        </motion.div>
+      </div>
+    </div>
+  );
+});
+
+export default Hero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Main.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Main.jsx
new file mode 100644
index 0000000..02026eb
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Main.jsx
@@ -0,0 +1,234 @@
+import React, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import cookiesData from '../config/cookiesContent.json';
+import { Cookie, Settings, Bell, FileText, Shield, RefreshCw, ExternalLink } from 'lucide-react';
+import Newsletter from './Newsletter';
+
+// Extracted section component for better performance
+const PolicySection = React.memo(({ section, index, prefersReducedMotion }) => {
+  // Map section titles to their respective icons
+  const sectionIcons = {
+    "1. Introduction": <FileText className="w-6 h-6 text-blue-600" />,
+    "2. Types of Cookies We Use": <Cookie className="w-6 h-6 text-green-600" />,
+    "3. Managing Your Cookies": <Settings className="w-6 h-6 text-blue-600" />,
+    "4. Security and Compliance": <Shield className="w-6 h-6 text-yellow-600" />,
+    "5. Staying Informed": <Bell className="w-6 h-6 text-red-600" />,
+    "6. Contact Us": <RefreshCw className="w-6 h-6 text-indigo-600" />
+  };
+
+  // Get background color based on section title
+  const getBgColor = (title) => {
+    const colors = {
+      "1. Introduction": "bg-blue-100",
+      "2. Types of Cookies We Use": "bg-green-100",
+      "3. Managing Your Cookies": "bg-blue-100",
+      "4. Security and Compliance": "bg-yellow-100",
+      "5. Staying Informed": "bg-red-100",
+      "6. Contact Us": "bg-indigo-100"
+    };
+    return colors[title] || "bg-gray-100";
+  };
+
+  return (
+    <motion.div 
+      key={index}
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={prefersReducedMotion ? {} : { duration: 0.6 }}
+      className="relative"
+    >
+      {/* Section header with icon */}
+      <div className="flex items-center mb-6">
+        <div className={`w-12 h-12 rounded-full ${getBgColor(section.title)} flex items-center justify-center mr-4`}>
+          {sectionIcons[section.title]}
+        </div>
+        <h2 className="text-2xl font-semibold text-gray-800">{section.title}</h2>
+      </div>
+
+      {/* Section content with elegant styling */}
+      <div className="ml-16">
+        <p className="text-gray-600 leading-relaxed mb-8">
+          {section.content}
+        </p>
+
+        {/* Custom content for each section */}
+        {section.title === "2. Types of Cookies We Use" && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
+            <CookieTypeCard 
+              icon={<Cookie className="w-5 h-5 text-green-600" />}
+              title="Essential Cookies"
+              description="These are crucial for the basic functionality of our website, helping us remember your login status and preferences."
+              delay={0.1}
+              prefersReducedMotion={prefersReducedMotion}
+            />
+            
+            <CookieTypeCard 
+              icon={<FileText className="w-5 h-5 text-green-600" />}
+              title="Analytics Cookies"
+              description="These cookies allow us to understand how users interact with our website to improve performance and usability."
+              delay={0.2}
+              prefersReducedMotion={prefersReducedMotion}
+            />
+            
+            <CookieTypeCard 
+              icon={<ExternalLink className="w-5 h-5 text-green-600" />}
+              title="Marketing Cookies"
+              description="We use these cookies to display advertisements tailored to your interests and browsing habits."
+              delay={0.3}
+              prefersReducedMotion={prefersReducedMotion}
+            />
+          </div>
+        )}
+
+        {section.title === "3. Managing Your Cookies" && (
+          <div className="bg-white rounded-xl p-6 shadow-sm mt-6 border-l-4 border-blue-400">
+            <h4 className="font-medium text-blue-800 mb-4">Browser-Specific Instructions</h4>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="p-4 bg-blue-50 rounded-lg">
+                <h5 className="font-medium text-blue-700 mb-2">Chrome</h5>
+                <p className="text-blue-600 text-sm">Settings → Privacy and Security → Cookies and other site data</p>
+              </div>
+              <div className="p-4 bg-blue-50 rounded-lg">
+                <h5 className="font-medium text-blue-700 mb-2">Firefox</h5>
+                <p className="text-blue-600 text-sm">Options → Privacy & Security → Cookies and Site Data</p>
+              </div>
+              <div className="p-4 bg-blue-50 rounded-lg">
+                <h5 className="font-medium text-blue-700 mb-2">Safari</h5>
+                <p className="text-blue-600 text-sm">Preferences → Privacy → Cookies and website data</p>
+              </div>
+              <div className="p-4 bg-blue-50 rounded-lg">
+                <h5 className="font-medium text-blue-700 mb-2">Edge</h5>
+                <p className="text-blue-600 text-sm">Settings → Cookies and site permissions → Manage and delete cookies</p>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {section.title === "4. Security and Compliance" && (
+          <div className="relative overflow-hidden bg-white rounded-xl shadow-sm mt-6">
+            <div className="relative p-6 z-10">
+              <div className="flex flex-col md:flex-row gap-6">
+                <div className="flex-1">
+                  <h4 className="font-medium text-yellow-800 mb-3 flex items-center">
+                    <Shield className="w-5 h-5 mr-2" /> GDPR Compliance
+                  </h4>
+                  <p className="text-gray-600 text-sm">
+                    We adhere to the EU General Data Protection Regulation, giving you control over your personal data and ensuring transparency in our data collection practices.
+                  </p>
+                </div>
+                <div className="flex-1">
+                  <h4 className="font-medium text-yellow-800 mb-3 flex items-center">
+                    <Shield className="w-5 h-5 mr-2" /> CCPA Compliance
+                  </h4>
+                  <p className="text-gray-600 text-sm">
+                    We respect the California Consumer Privacy Act requirements, providing California residents with specific rights regarding their personal information.
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {section.title === "5. Staying Informed" && (
+          <div className="bg-white rounded-xl p-6 shadow-sm mt-6 relative overflow-hidden">
+            <div className="absolute top-0 right-0 w-40 h-40 bg-red-50 rounded-full -mt-20 -mr-20"></div>
+            <div className="relative z-10">
+              <div className="flex items-start">
+                <Bell className="w-6 h-6 text-red-500 mr-4 mt-1 flex-shrink-0" />
+                <div>
+                  <h4 className="font-medium text-red-800 mb-3">How We'll Notify You</h4>
+                  <p className="text-gray-600 mb-4">
+                    When we make significant changes to our cookie policy, we'll notify you through:
+                  </p>
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                    <div className="bg-red-50 p-3 rounded-lg">
+                      <p className="text-red-700 text-sm font-medium">Website Notifications</p>
+                    </div>
+                    <div className="bg-red-50 p-3 rounded-lg">
+                      <p className="text-red-700 text-sm font-medium">Email Updates</p>
+                    </div>
+                    <div className="bg-red-50 p-3 rounded-lg">
+                      <p className="text-red-700 text-sm font-medium">Policy Page Updates</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {section.points && section.points.length > 0 && section.title !== "2. Types of Cookies We Use" && (
+          <ul className="list-disc pl-6 text-gray-700 space-y-2 mt-4">
+            {section.points.map((point, idx) => (
+              <li key={idx} className="text-base">{point}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </motion.div>
+  );
+});
+
+// Cookie type card component
+const CookieTypeCard = React.memo(({ icon, title, description, delay, prefersReducedMotion }) => (
+  <motion.div 
+    initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+    whileInView={{ opacity: 1, y: 0 }}
+    viewport={{ once: true }}
+    transition={prefersReducedMotion ? {} : { delay }}
+    className="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow border border-green-100"
+  >
+    <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-4">
+      {icon}
+    </div>
+    <h3 className="font-medium text-green-800 mb-2">{title}</h3>
+    <p className="text-gray-600 text-sm">{description}</p>
+  </motion.div>
+));
+
+// Main component to display cookies policy
+const Main = React.memo(() => {
+  const { title, description, data } = cookiesData.main;
+  const prefersReducedMotion = useReducedMotion();
+
+  // Filter out the Thank You section
+  const filteredData = useMemo(() => 
+    data.filter(section => section.title !== "Thank You"),
+  [data]);
+
+  return (
+    <div className="bg-gradient-to-b from-white to-gray-50 py-20">
+      <div className="max-w-5xl mx-auto px-6">
+        {/* Elegant header with underline */}
+        <motion.div 
+          initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-16"
+        >
+          <h1 className="text-4xl font-bold text-gray-800 mb-3 inline-block relative">
+            {title}
+          </h1>
+          <p className="text-gray-600 text-lg mt-8 max-w-3xl mx-auto leading-relaxed">
+            {description}
+          </p>
+        </motion.div>
+
+        {/* Main content with flowing design */}
+        <div className="space-y-20">
+          {filteredData.map((section, index) => (
+            <PolicySection 
+              key={index}
+              section={section} 
+              index={index}
+              prefersReducedMotion={prefersReducedMotion}
+            />
+          ))}
+          <Newsletter />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default Main;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Newsletter.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Newsletter.jsx
new file mode 100644
index 0000000..9f2bb83
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/components/Newsletter.jsx
@@ -0,0 +1,93 @@
+import React, { useCallback, useMemo } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Mail, Shield, CheckCircle } from 'lucide-react';
+import privacyData from '../config/cookiesContent.json'; // Adjust the path as necessary
+import { useFormHandler } from '@/pages/detail-pages/ourServicesDetailPage/utils/subscription';
+import { notification } from 'antd';
+import { subscribeToNewsletter } from '@/utils/newsletterApi';
+
+// Map icons to their respective components - moved outside component to prevent recreation
+const iconComponents = {
+  Mail: <Mail />,
+  Shield: <Shield />,
+  CheckCircle: <CheckCircle />
+};
+
+// Feature point component extracted for memoization
+const FeaturePoint = React.memo(({ feature, index, prefersReducedMotion }) => {
+  return (
+    <motion.div
+      key={index}
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={prefersReducedMotion ? {} : { delay: index * 0.1 }}
+      className="flex flex-col items-center text-center p-4"
+    >
+      <div className="text-blue-600 mb-4">{iconComponents[feature.icon]}</div>
+      <p className="text-gray-700">{feature.text}</p>
+    </motion.div>
+  );
+});
+
+const Newsletter = React.memo(() => {
+  const { title, description, points } = privacyData.newsletter;
+  const located = "Cookies Page Newsletter";
+  const prefersReducedMotion = useReducedMotion();
+
+  const { email, error, handleInputChange, submitForm, resetForm } = useFormHandler({
+    located,
+    handleSubmit: subscribeToNewsletter,
+  });
+
+  // Memoize feature points to prevent unnecessary re-renders
+  const featurePoints = useMemo(() => (
+    <div className="grid md:grid-cols-3 gap-6 mb-8">
+      {points.map((feature, index) => (
+        <FeaturePoint 
+          key={index} 
+          feature={feature} 
+          index={index} 
+          prefersReducedMotion={prefersReducedMotion} 
+        />
+      ))}
+    </div>
+  ), [points, prefersReducedMotion]);
+
+  return (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, scale: 0.95 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={{ once: true }}
+      className="max-w-5xl mx-auto p-8 bg-gray-50 rounded-lg shadow-lg mt-0 mb-20"
+    >
+      <div className="text-center mb-8">
+        <h3 className="text-2xl font-bold mb-4">{title}</h3>
+        <p className="text-gray-600">{description}</p>
+      </div>
+      
+      {featurePoints}
+     
+      <div className="flex flex-col sm:flex-row gap-4">
+        <input
+          value={email}
+          onChange={handleInputChange}
+          type="email"
+          placeholder="Enter your email address"
+          className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        {error && <p className="text-red-500 mt-2">{error}</p>}
+
+        <motion.button
+          whileHover={prefersReducedMotion ? {} : { scale: 1.05 }}
+          whileTap={prefersReducedMotion ? {} : { scale: 0.95 }}
+          className="px-6 py-3 bg-[#2563EB] text-white rounded-lg font-medium"
+          onClick={submitForm}
+        >
+          Subscribe
+        </motion.button>
+      </div>
+    </motion.div>
+  );
+});
+
+export default Newsletter;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/config/cookiesContent.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/config/cookiesContent.json
new file mode 100644
index 0000000..12a8083
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/config/cookiesContent.json
@@ -0,0 +1,67 @@
+{
+    "banner":{
+        "title":"Cookie Policy",
+        "description":"Your browsing experience, our responsibility"
+    },
+    "main":{
+        "title":"Cookie Policy for Tech4Biz Solutions",
+        "description":"Welcome to Tech4Biz Solutions! We are committed to safeguarding your privacy and ensuring that you are fully informed about how we use cookies on our website. This Cookie Policy outlines the different types of cookies we utilize, what they do, and how you can manage them.",
+        "data":[
+            {
+                "title": "1. Introduction",
+                "content": "Cookies are essential tools that help enhance your browsing experience by remembering your preferences and login details. At Tech4Biz Solutions, we use cookies to provide you with a seamless and personalized experience. They allow our website to recognize your device and remember certain information about your visit, making your next visit easier and the site more useful to you.",
+                "borderColor": "border-blue-500",
+                "points": []
+            },
+            {
+                "title": "2. Types of Cookies We Use",
+                "content": "We use different types of cookies to run our website efficiently and provide you with the best possible experience. Understanding these types can help you make informed decisions about your cookie preferences.",
+                "borderColor": "border-green-500",
+                "points": [
+                    "Essential Cookies: These are crucial for the basic functionality of our website. For instance, they help us remember that you are logged in, ensuring you don't need to enter your details repeatedly.",
+                    "Analytics Cookies: These cookies allow us to understand how users interact with our website. By analyzing this data, we can continuously improve our site's performance and usability.",
+                    "Marketing Cookies: We use these cookies to display advertisements that are tailored to your interests, enhancing the relevance of the content you see."
+                ]
+            },
+            {
+                "title": "3. Managing Your Cookies",
+                "content": "You have the flexibility to manage or delete cookies through your browser settings. Most browsers provide options to delete cookies, block them, or receive warnings before a cookie is set. Please note that if you choose to disable certain cookies, some features of our website may not function properly. Each browser has different controls for cookies, so please check your browser's help menu for specific instructions.",
+                "borderColor": "border-purple-500",
+                "points": []
+            },
+            {
+                "title": "4. Security and Compliance",
+                "content": "We take the security of your data seriously and adhere to legal requirements such as GDPR and CCPA to ensure your privacy is respected. Our cookie practices are designed to comply with applicable data protection laws, and we regularly review and update them to maintain compliance with evolving regulations. We implement appropriate security measures to protect your information from unauthorized access or disclosure.",
+                "borderColor": "border-yellow-600",
+                "points": []
+            },
+            {
+                "title": "5. Staying Informed",
+                "content": "Our Cookie Policy is subject to updates as we evolve and adapt to new technologies and legal requirements. We encourage you to review this policy periodically to stay informed about our practices. When we make significant changes to this policy, we may notify you through a notice on our website or by sending an email to the address associated with your account.",
+                "borderColor": "border-red-500",
+                "points": []
+            },
+            {
+                "title": "6. Contact Us",
+                "content": "If you have any questions or concerns regarding our use of cookies, please feel free to contact us at contact@tech4biz.io. Our team is dedicated to addressing your inquiries and ensuring that your cookie preferences are respected. We value your feedback and are committed to maintaining transparent communication with our users.",
+                "borderColor": "border-indigo-500",
+                "points": []
+            },
+            {
+                "title": "Thank You",
+                "content": "At Tech4Biz Solutions, we value your trust and are dedicated to maintaining transparency in our data practices. Your peace of mind is our priority, and we strive to provide a secure and enjoyable browsing experience. Thank you for taking the time to understand our Cookie Policy.",
+                "borderColor": "border-blue-500",
+                "points": []
+            }
+        ]
+    },
+    "newsletter":{
+        "title":"Never Miss Important Updates",
+        "description":"Join our newsletter to stay informed about changes to our terms and policies.",
+        "points":[
+            { "icon": "Mail", "text": "Policy updates directly to your inbox" },
+            { "icon": "Shield", "text": "Privacy-first communication" },
+            { "icon": "CheckCircle", "text": "Unsubscribe anytime" }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/config/cookiesSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/config/cookiesSchema.json
new file mode 100644
index 0000000..d4fbc58
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/config/cookiesSchema.json
@@ -0,0 +1,96 @@
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Cookie Policy - Tech4Biz Solutions",
+  "description": "Learn how Tech4Biz Solutions uses cookies to enhance your browsing experience and provide personalized services while respecting your privacy.",
+  "url": "https://tech4bizsolutions.com/policies/cookies",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Tech4Biz Solutions Private Limited",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+      "width": "180",
+      "height": "36"
+    }
+  },
+  "mainEntity": {
+    "@type": "Article",
+    "headline": "Cookie Policy for Tech4Biz Solutions",
+    "description": "Welcome to Tech4Biz Solutions! We are committed to safeguarding your privacy and ensuring that you are fully informed about how we use cookies on our website. This Cookie Policy outlines the different types of cookies we utilize, what they do, and how you can manage them.",
+    "author": {
+      "@type": "Organization",
+      "name": "Tech4Biz Solutions Private Limited"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "Tech4Biz Solutions Private Limited",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+        "width": "180",
+        "height": "36"
+      }
+    },
+    "datePublished": "2023-01-01T08:00:00+00:00",
+    "dateModified": "2023-12-01T08:00:00+00:00",
+    "about": [
+      {
+        "@type": "Thing",
+        "name": "Essential Cookies",
+        "description": "These cookies are necessary for the website to function properly and securely."
+      },
+      {
+        "@type": "Thing",
+        "name": "Analytics Cookies",
+        "description": "These cookies allow us to understand how users interact with our website to improve performance and usability."
+      },
+      {
+        "@type": "Thing",
+        "name": "Marketing Cookies",
+        "description": "We use these cookies to display advertisements tailored to your interests and browsing habits."
+      }
+    ],
+    "hasPart": [
+      {
+        "@type": "WebPageElement",
+        "name": "Introduction",
+        "description": "Cookies are essential tools that help enhance your browsing experience by remembering your preferences and login details."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Types of Cookies We Use",
+        "description": "We use different types of cookies to run our website efficiently and provide you with the best possible experience."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Managing Your Cookies",
+        "description": "You have the flexibility to manage or delete cookies through your browser settings."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Security and Compliance",
+        "description": "We take the security of your data seriously and adhere to legal requirements such as GDPR and CCPA to ensure your privacy is respected."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Staying Informed",
+        "description": "Our Cookie Policy is subject to updates as we evolve and adapt to new technologies and legal requirements."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Contact Us",
+        "description": "If you have any questions or concerns regarding our use of cookies, please feel free to contact us at contact@tech4biz.io."
+      }
+    ]
+  },
+  "potentialAction": {
+    "@type": "ReadAction",
+    "target": "https://tech4bizsolutions.com/policies/cookies"
+  },
+  "contactPoint": {
+    "@type": "ContactPoint",
+    "email": "contact@tech4biz.io",
+    "contactType": "Customer Service"
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/index.jsx
new file mode 100644
index 0000000..d117de6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/cookies/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Main from './components/Main'
+import ModernHeroSections from './components/Hero'
+import ScrollToTop from '@/components/common/scroll/ScrollToTop'
+import ScrollToTopButton from '@/components/common/scroll/ScrollToTopButton'
+import cookiesSchema from './config/cookiesSchema.json'
+import { Helmet } from 'react-helmet'
+
+const CookiesPolicy = () => {
+  return (
+    <div>
+      <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(cookiesSchema)}
+        </script>
+      </Helmet>
+      <ScrollToTop/>
+      <ScrollToTopButton />
+      <ModernHeroSections/>
+      <Main/>
+    </div>
+  )
+}
+
+export default CookiesPolicy
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Hero.jsx
new file mode 100644
index 0000000..2908269
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Hero.jsx
@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { ArrowRight, Shield, Lock, Eye } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const Hero = React.memo(() => {
+  // Check if user prefers reduced motion
+  const prefersReducedMotion = useReducedMotion();
+  
+  // Memoize the background animation circles to prevent re-calculation on re-renders
+  // Reduce number of circles for better performance
+  // Disable animations if user prefers reduced motion
+  const animationCircles = useMemo(() => {
+    // Determine circle count based on motion preference
+    const circleCount = prefersReducedMotion ? 5 : 10;
+    
+    return [...Array(circleCount)].map((_, i) => (
+      <motion.div
+        key={i}
+        className="absolute rounded-full border border-white/10"
+        style={{
+          width: `${(i + 1) * 15}%`, // Increased size increment to maintain coverage
+          height: `${(i + 1) * 15}%`,
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+        animate={prefersReducedMotion ? {} : {
+          rotate: 360,
+          scale: [1, 1.05, 1], // Reduced scale variation for better performance
+        }}
+        transition={prefersReducedMotion ? {} : {
+          duration: 25 + i * 2, // Simplified duration calculation
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      />
+    ));
+  }, [prefersReducedMotion]);
+
+  // Memoize feature cards to prevent unnecessary re-renders
+  const featureCards = useMemo(() => (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+      animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1 }}
+      transition={prefersReducedMotion ? {} : { delay: 0.5 }}
+      className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"
+    >
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+          <Shield className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Data Protection</h3>
+        <p className="text-white/80 text-sm">Your personal information is encrypted and stored securely on our protected servers.</p>
+      </div>
+      
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+          <Lock className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Secure Transactions</h3>
+        <p className="text-white/80 text-sm">All transactions are processed through secure payment gateways with industry-standard encryption.</p>
+      </div>
+      
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+          <Eye className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Transparency</h3>
+        <p className="text-white/80 text-sm">We're clear about what data we collect and how it's used, with easy opt-out options.</p>
+      </div>
+    </motion.div>
+  ), [prefersReducedMotion]);
+
+  // Memoize CTA buttons to prevent unnecessary re-renders
+  const ctaButtons = useMemo(() => (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+      animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+      transition={prefersReducedMotion ? {} : { delay: 0.6 }}
+      className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+    >
+      <Link
+        to="/contact"
+        className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-3 px-8 rounded-full hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-md hover:shadow-lg"
+      >
+        Contact Us
+        <ArrowRight className="w-4 h-4" />
+      </Link>
+      
+      <Link
+        to="/terms-and-conditions"
+        className="inline-flex items-center gap-2 bg-white/10 text-white font-semibold py-3 px-8 rounded-full hover:bg-white/20 transition-all duration-300"
+      >
+        Terms of Service
+      </Link>
+    </motion.div>
+  ), [prefersReducedMotion]);
+
+  return (
+    <div className="min-h-[70vh] bg-gradient-to-br from-[#1d1d1d] to-[#2d2d2d] relative overflow-hidden">
+      {/* Background animation circles - reduced and optimized */}
+      {animationCircles}
+
+      <div className="max-w-6xl mx-auto py-20 px-4 relative">
+        {/* Hero Content */}
+        <motion.div
+          initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+          transition={prefersReducedMotion ? {} : { duration: 0.6 }}
+          className="text-center max-w-3xl mx-auto"
+        >
+          <motion.span
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.2 }}
+            className="inline-block px-4 py-1.5 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full text-white text-sm font-medium mb-6"
+          >
+            Privacy Policy
+          </motion.span>
+          
+          <motion.h1
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.3 }}
+            className="text-4xl md:text-6xl font-bold text-white mb-6"
+          >
+            How We Protect Your Data
+          </motion.h1>
+          
+          <motion.p
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.4 }}
+            className="text-[#fff] text-lg md:text-xl mb-8"
+          >
+            We are committed to ensuring your privacy and protecting the information you share with us.
+            Our comprehensive privacy measures are designed with your security in mind.
+          </motion.p>
+
+          {/* Key privacy points */}
+          {featureCards}
+
+          {/* CTA Buttons */}
+          {ctaButtons}
+        </motion.div>
+      </div>
+    </div>
+  );
+});
+
+export default Hero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Main.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Main.jsx
new file mode 100644
index 0000000..61d072e
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Main.jsx
@@ -0,0 +1,201 @@
+import React, { useCallback, useState } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import privacyData from '../data/privacyContent.json';
+import { Shield, Lock, Eye, FileText, UserCheck, RefreshCw } from 'lucide-react';
+import CRMModalForm from '@components/modals/CRMModalForm'
+
+// Extracted section component for better performance
+const PolicySection = React.memo(({ section, index, isLast, sectionIcons, setIsModalVisible }) => {
+  const shouldReduceMotion = useReducedMotion();
+
+  const openModal = () => {
+    setIsModalVisible(true);
+  };
+  
+  if (section.title === "Thank You") {
+    return (
+      <motion.div
+        key={index}
+        initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ delay: shouldReduceMotion ? 0 : 0.5 }}
+        className="text-center bg-gradient-to-r from-blue-50 to-indigo-50 p-10 rounded-xl mt-16"
+      >
+        <h2 className="text-2xl font-bold text-blue-800 mb-4">{section.title}</h2>
+        <p className="text-blue-700 max-w-2xl mx-auto">
+          {section.content}
+        </p>
+        <div className="mt-6">
+          <motion.button
+            whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
+            whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+            onClick={() => openModal(true)}
+          >
+            Contact Our Privacy Team
+          </motion.button>
+        </div>
+      </motion.div>
+    );
+  }
+  
+  return (
+    <motion.div 
+      key={index}
+      className="relative"
+      initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={{ delay: shouldReduceMotion ? 0 : index * 0.1 }}
+    >
+      <div className="flex items-start gap-6">
+        {/* Icon */}
+        <div className="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gray-50 shadow-sm flex-shrink-0 mt-1">
+          {sectionIcons[section.title]}
+        </div>
+        
+        {/* Content */}
+        <div className="flex-1">
+          <h2 className="text-2xl font-semibold text-gray-800 mb-4">
+            {section.title}
+          </h2>
+          <p className="text-gray-600 leading-relaxed mb-6">
+            {section.content}
+          </p>
+          
+          {/* Additional content based on section */}
+          {section.title === "2. What Information Do We Collect?" && (
+            <div className="bg-green-50 p-5 rounded-lg border-l-4 border-green-500 mb-4">
+              <h4 className="font-medium text-green-800 mb-2">Types of data we collect:</h4>
+              <ul className="list-disc pl-5 text-green-700 space-y-1">
+                <li>Personal identifiers (name, email, phone number)</li>
+                <li>Account credentials</li>
+                <li>Payment information</li>
+                <li>Usage data and analytics</li>
+                <li>Device information</li>
+              </ul>
+            </div>
+          )}
+          
+          {section.title === "4. Your Rights Regarding Your Data" && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <h4 className="font-medium text-gray-800 mb-2">Access Rights</h4>
+                <p className="text-gray-600 text-sm">You can request a copy of your personal data at any time.</p>
+              </div>
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <h4 className="font-medium text-gray-800 mb-2">Deletion Rights</h4>
+                <p className="text-gray-600 text-sm">Request deletion of your data from our systems.</p>
+              </div>
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <h4 className="font-medium text-gray-800 mb-2">Correction Rights</h4>
+                <p className="text-gray-600 text-sm">Update or correct any inaccurate information.</p>
+              </div>
+              <div className="bg-gray-50 p-4 rounded-lg">
+                <h4 className="font-medium text-gray-800 mb-2">Opt-Out Rights</h4>
+                <p className="text-gray-600 text-sm">Unsubscribe from communications at any time.</p>
+              </div>
+            </div>
+          )}
+          
+          {section.title === "5. Security Measures" && (
+            <div className="flex flex-col md:flex-row gap-4 mt-4">
+              <div className="flex-1 bg-red-50 p-4 rounded-lg border-l-2 border-red-500">
+                <h4 className="font-medium text-red-800 mb-1">Encryption</h4>
+                <p className="text-red-700 text-sm">All data is encrypted in transit and at rest.</p>
+              </div>
+              <div className="flex-1 bg-red-50 p-4 rounded-lg border-l-2 border-red-500">
+                <h4 className="font-medium text-red-800 mb-1">Access Controls</h4>
+                <p className="text-red-700 text-sm">Strict access controls and authentication protocols.</p>
+              </div>
+              <div className="flex-1 bg-red-50 p-4 rounded-lg border-l-2 border-red-500">
+                <h4 className="font-medium text-red-800 mb-1">Monitoring</h4>
+                <p className="text-red-700 text-sm">24/7 security monitoring and threat detection.</p>
+              </div>
+            </div>
+          )}
+          
+          {section.points && section.points.length > 0 && (
+            <ul className="list-disc pl-6 text-gray-700 space-y-2">
+              {section.points.map((point, idx) => (
+                <li key={idx} className="text-base">{point}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+      
+      {/* Connector line for all but last item */}
+      {!isLast && (
+        <div className="hidden md:block absolute left-6 top-12 bottom-0 w-0.5 bg-gray-100 -ml-0.5 h-full"></div>
+      )}
+    </motion.div>
+  );
+});
+
+// Main component to display privacy policy
+const Main = React.memo(() => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const handleModalClose = () => {
+    setIsModalVisible(false);
+  };
+  const { title, description, data } = privacyData.main;
+  const shouldReduceMotion = useReducedMotion();
+
+  // Map section numbers to icons
+  const sectionIcons = {
+    "1. Introduction": <FileText className="w-6 h-6 text-blue-500" />,
+    "2. What Information Do We Collect?": <Eye className="w-6 h-6 text-green-500" />,
+    "3. How Do We Use Your Information?": <UserCheck className="w-6 h-6 text-purple-500" />,
+    "4. Your Rights Regarding Your Data": <Shield className="w-6 h-6 text-yellow-600" />,
+    "5. Security Measures": <Lock className="w-6 h-6 text-red-500" />,
+    "6. Changes to This Policy": <RefreshCw className="w-6 h-6 text-indigo-500" />
+  };
+
+  return (
+    <div className="bg-white py-16">
+      <motion.div 
+        className="max-w-4xl mx-auto px-6"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+      >
+        {/* Header */}
+        <motion.div 
+          className="text-center mb-16"
+          initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+        >
+          <h1 className="text-4xl font-bold text-gray-800 mb-6">{title}</h1>
+          <div className="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
+          <p className="text-gray-600 text-lg leading-relaxed max-w-3xl mx-auto">
+            {description}
+          </p>
+        </motion.div>
+
+        {/* Policy Sections */}
+        <div className="space-y-16">
+          {data.map((section, index) => (
+            <PolicySection 
+              key={index}
+              section={section} 
+              index={index} 
+              isLast={index >= data.length - 2}
+              sectionIcons={sectionIcons}
+              setIsModalVisible={setIsModalVisible}
+            />
+          ))}
+        </div>
+      </motion.div>
+      <CRMModalForm
+        isVisible={isModalVisible}
+        onClose={handleModalClose}
+        source="Landing page Banner" 
+      />
+    </div>
+  );
+});
+
+export default Main;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Newsletter.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Newsletter.jsx
new file mode 100644
index 0000000..2d00d6c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/components/Newsletter.jsx
@@ -0,0 +1,81 @@
+import React, { useCallback } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { Mail, Shield, CheckCircle } from 'lucide-react';
+import privacyData from '../data/privacyContent.json'; // Adjust the path as necessary
+import { notification } from 'antd';
+import { useFormHandler } from '@/pages/detail-pages/ourServicesDetailPage/utils/subscription';
+import { subscribeToNewsletter } from '@/utils/newsletterApi';
+
+// Map icons to their respective components - moved outside component to prevent recreation
+const iconComponents = {
+  Mail: <Mail />,
+  Shield: <Shield />,
+  CheckCircle: <CheckCircle />
+};
+
+// Feature point component extracted for memoization
+const FeaturePoint = React.memo(({ feature, index }) => {
+  const shouldReduceMotion = useReducedMotion();
+  
+  return (
+    <motion.div
+      key={index}
+      initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ delay: shouldReduceMotion ? 0 : index * 0.2 }}
+      className="flex flex-col items-center text-center p-4"
+    >
+      <div className="text-blue-600 mb-4">{iconComponents[feature.icon]}</div>
+      <p className="text-gray-700">{feature.text}</p>
+    </motion.div>
+  );
+});
+
+const Newsletter = React.memo(() => {
+  const { title, description, points } = privacyData.newsletter;
+  const located = "Privacy Policy Newsletter"; // Example located prop
+  const shouldReduceMotion = useReducedMotion();
+
+  const { email, error, handleInputChange, submitForm, resetForm } = useFormHandler({
+    located,
+    handleSubmit: subscribeToNewsletter,
+  });
+
+  return (
+    <motion.div
+      initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.95 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={{ once: true }}
+      className="max-w-5xl mx-auto p-8 bg-gray-50 rounded-lg shadow-lg mt-0 mb-20"
+    >
+      <div className="text-center mb-8">
+        <h3 className="text-2xl font-bold mb-4">{title}</h3>
+        <p className="text-gray-600">{description}</p>
+      </div>
+      <div className="grid md:grid-cols-3 gap-6 mb-8">
+        {points.map((feature, index) => (
+          <FeaturePoint key={index} feature={feature} index={index} />
+        ))}
+      </div>
+      <div className="flex flex-col sm:flex-row gap-4">
+        <input
+          type="email"
+          placeholder="Enter your email address"
+          value={email}
+          onChange={handleInputChange}
+          className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+        <motion.button
+          whileHover={shouldReduceMotion ? {} : { scale: 1.05 }}
+          whileTap={shouldReduceMotion ? {} : { scale: 0.95 }}
+          onClick={submitForm}
+          className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+        >
+          Subscribe
+        </motion.button>
+      </div>
+    </motion.div>
+  );
+});
+
+export default Newsletter;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/config/privacySchema.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/config/privacySchema.json
new file mode 100644
index 0000000..66abe0c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/config/privacySchema.json
@@ -0,0 +1,101 @@
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Privacy Policy - Tech4Biz Solutions",
+  "description": "Learn how Tech4Biz Solutions protects your personal information and respects your privacy rights. Our comprehensive privacy policy outlines our data collection practices, security measures, and your rights.",
+  "url": "https://tech4bizsolutions.com/policies/privacy",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Tech4biz Solutions Private Limited",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+      "width": "180",
+      "height": "36"
+    }
+  },
+  "mainEntity": {
+    "@type": "Article",
+    "headline": "Privacy Policy for Tech4Biz Solutions",
+    "description": "Welcome to Tech4Biz Solutions! Your privacy is important to us, and we are committed to safeguarding your personal information. This Privacy Policy outlines how we handle your data when you visit our website or use our services.",
+    "author": {
+      "@type": "Organization",
+      "name": "Tech4biz Solutions Private Limited"
+    },
+    "publisher": {
+      "@type": "Organization",
+      "name": "Tech4biz Solutions Private Limited",
+      "logo": {
+        "@type": "ImageObject",
+        "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+        "width": "180",
+        "height": "36"
+      }
+    },
+    "datePublished": "2023-01-01T08:00:00+00:00",
+    "dateModified": "2023-12-01T08:00:00+00:00",
+    "about": [
+      {
+        "@type": "Thing",
+        "name": "Data Protection",
+        "description": "Your personal information is encrypted and stored securely on our protected servers."
+      },
+      {
+        "@type": "Thing",
+        "name": "Secure Transactions",
+        "description": "All transactions are processed through secure payment gateways with industry-standard encryption."
+      },
+      {
+        "@type": "Thing",
+        "name": "Transparency",
+        "description": "We're clear about what data we collect and how it's used, with easy opt-out options."
+      }
+    ],
+    "hasPart": [
+      {
+        "@type": "WebPageElement",
+        "name": "Introduction",
+        "description": "At Tech4Biz Solutions, we respect your privacy and are dedicated to protecting the information you share with us. This policy explains the types of data we collect, how we use it, and the measures we take to ensure its security."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "What Information Do We Collect?",
+        "description": "We may gather information directly from you, such as your name, email address, and other contact details, when you sign up for our services, complete forms, or participate in surveys."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "How Do We Use Your Information?",
+        "description": "The information we collect helps us provide and improve our services, communicate updates, and offer personalized experiences."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Your Rights Regarding Your Data",
+        "description": "You have the right to access, modify, or delete your personal information at any time. If you wish to opt out of communications or data processing, please contact us."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Security Measures",
+        "description": "We implement robust security measures, including encryption, to protect your data from unauthorized access."
+      },
+      {
+        "@type": "WebPageElement",
+        "name": "Changes to This Policy",
+        "description": "We may update this Privacy Policy periodically to reflect changes in our practices or legal requirements."
+      }
+    ]
+  },
+  "potentialAction": {
+    "@type": "ReadAction",
+    "target": "https://tech4bizsolutions.com/policies/privacy"
+  },
+  "contactPoint": {
+    "@type": "ContactPoint",
+    "email": "contact@tech4biz.io",
+    "contactType": "Customer Service"
+  },
+  "offers": {
+    "@type": "Offer",
+    "name": "Newsletter Subscription",
+    "description": "Join our newsletter to stay informed about changes to our terms and policies."
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/data/privacyContent.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/data/privacyContent.json
new file mode 100644
index 0000000..91b8a6c
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/data/privacyContent.json
@@ -0,0 +1,63 @@
+{
+    "banner":{
+        "title":"Privacy Policy",
+        "description":"Your data, our responsibility"
+    },
+    "main":{
+         "title":"Privacy Policy for Tech4Biz Solutions",
+        "description":"Welcome to Tech4Biz Solutions! Your privacy is important to us, and we are committed to safeguarding your personal information. This Privacy Policy outlines how we handle your data when you visit our website or use our services. Please take a moment to review it.",
+        "data":[
+        {
+            "title": "1. Introduction",
+            "content": "At Tech4Biz Solutions, we respect your privacy and are dedicated to protecting the information you share with us. This policy explains the types of data we collect, how we use it, and the measures we take to ensure its security. Our commitment to privacy is fundamental to our business operations and customer relationships. We regularly review and update our practices to maintain the highest standards of data protection.",
+            "borderColor": "border-blue-500",
+            "points": []
+          },
+          {
+            "title": "2. What Information Do We Collect?",
+            "content": "We may gather information directly from you, such as your name, email address, and other contact details, when you sign up for our services, complete forms, or participate in surveys. Additionally, we may collect data about your usage of our website to improve user experience and service offerings. This includes information about how you interact with our platform, the features you use, and the time spent on various pages.",
+            "borderColor": "border-green-500",
+            "points": [] 
+          },
+          {
+            "title": "3. How Do We Use Your Information?",
+            "content": "The information we collect helps us provide and improve our services, communicate updates, and offer personalized experiences. We use it to enhance the functionality of our website and ensure that we meet your needs effectively. Your data enables us to troubleshoot technical issues, analyze usage patterns, and develop new features that align with user preferences. We may also use your information to send relevant notifications about service changes, security updates, or promotional offers that might interest you.",
+            "borderColor": "border-purple-500",
+            "points": []
+          },
+          {
+            "title": "4. Your Rights Regarding Your Data",
+            "content": "You have the right to access, modify, or delete your personal information at any time. If you wish to opt out of communications or data processing, please contact us. We are committed to respecting your preferences and ensuring transparency in how your data is handled. Under various privacy regulations, you may also have the right to data portability, allowing you to obtain and reuse your personal data across different services. We strive to respond to all data-related requests promptly and efficiently.",
+            "borderColor": "border-yellow-500",
+            "points": []
+          },
+          {
+            "title": "5. Security Measures",
+            "content": "We implement robust security measures, including encryption, to protect your data from unauthorized access. Our team is dedicated to maintaining the highest standards of data security to safeguard your personal information. We regularly update our security protocols to address emerging threats and vulnerabilities. Access to your personal data is strictly limited to authorized personnel who require it to perform their job functions. We also conduct regular security assessments and audits to ensure compliance with industry standards.",
+            "borderColor": "border-red-500",
+            "points": []
+          },
+          {
+            "title": "6. Changes to This Policy",
+            "content": "We may update this Privacy Policy periodically to reflect changes in our practices or legal requirements. Any significant changes will be communicated to you, and continued use of our services will indicate acceptance of the updated terms. We encourage you to review this policy regularly to stay informed about how we protect your information. When material changes are made, we may provide additional notice through email notifications or prominent announcements on our website.",
+            "borderColor": "border-indigo-500",
+            "points": []
+          },
+          {
+            "title": "Thank You",
+            "content": "Thank you for choosing Tech4Biz Solutions. We are committed to maintaining your trust by handling your data with the utmost care and transparency. If you have any questions or concerns about our privacy practices, please don't hesitate to contact our dedicated privacy team.",
+            "borderColor": "border-blue-500",
+            "points": []
+          }
+        ]
+    },
+    "newsletter":{
+        "title":"Never Miss Important Updates",
+        "description":"Join our newsletter to stay informed about changes to our terms and policies.",
+        "points":[
+            { "icon": "Mail" , "text": "Policy updates directly to your inbox" },
+            { "icon": "Shield" , "text": "Privacy-first communication" },
+            { "icon": "CheckCircle" , "text": "Unsubscribe anytime" }
+          ]
+    }
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/index.jsx
new file mode 100644
index 0000000..3692327
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/privacy/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Main from './components/Main'
+import ModernHeroSections from './components/Hero'
+import Newsletter from './components/Newsletter'
+import ScrollToTop from '@/components/common/scroll/ScrollToTop'
+import ScrollToTopButton from '@/components/common/scroll/ScrollToTopButton'
+import privacySchema from './config/privacySchema.json'
+import { Helmet } from 'react-helmet'
+
+const PrivacyPolicy = () => {
+  return (
+    <div>
+      <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(privacySchema)}
+        </script>
+      </Helmet>
+      <ScrollToTop/>
+      <ScrollToTopButton />
+      <ModernHeroSections/>
+      <Main/>
+      <Newsletter/>
+    </div>
+  )
+}
+
+export default PrivacyPolicy
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/components/Hero.jsx
new file mode 100644
index 0000000..31d4379
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/components/Hero.jsx
@@ -0,0 +1,151 @@
+import React, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { ArrowRight, RefreshCw, CreditCard, AlertCircle } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import refundPolicyData from '../config/refundPolicyData.json';
+
+// Map for icon components
+const iconMap = {
+  RefreshCw: RefreshCw,
+  CreditCard: CreditCard,
+  AlertCircle: AlertCircle,
+  ArrowRight: ArrowRight
+};
+
+const Hero = React.memo(() => {
+  // Check if user prefers reduced motion
+  const prefersReducedMotion = useReducedMotion();
+  const { hero } = refundPolicyData;
+  
+  // Memoize the background animation circles to prevent re-calculation on re-renders
+  const animationCircles = useMemo(() => {
+    // Determine circle count based on motion preference and device capability
+    const circleCount = prefersReducedMotion ? 5 : 10;
+    
+    return [...Array(circleCount)].map((_, i) => (
+      <motion.div
+        key={i}
+        className="absolute rounded-full border border-white/10"
+        style={{
+          width: `${(i + 1) * 15}%`,
+          height: `${(i + 1) * 15}%`,
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+        animate={prefersReducedMotion ? {} : {
+          rotate: 360,
+          scale: [1, 1.05, 1],
+        }}
+        transition={prefersReducedMotion ? {} : {
+          duration: 25 + i * 2,
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      />
+    ));
+  }, [prefersReducedMotion]);
+
+  // Memoize feature cards to prevent unnecessary re-renders
+  const featureCards = useMemo(() => (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={prefersReducedMotion ? {} : { delay: 0.5 }}
+      className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12"
+    >
+      {hero.featureCards.map((card, index) => {
+        const IconComponent = iconMap[card.icon];
+        return (
+          <div key={index} className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+            <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+              <IconComponent className="w-6 h-6 text-blue-400" />
+            </div>
+            <h3 className="text-white font-semibold text-lg mb-2">{card.title}</h3>
+            <p className="text-white/80 text-sm">{card.description}</p>
+          </div>
+        );
+      })}
+    </motion.div>
+  ), [prefersReducedMotion, hero.featureCards]);
+
+  // Memoize CTA buttons to prevent unnecessary re-renders
+  const ctaButtons = useMemo(() => (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+      animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+      transition={prefersReducedMotion ? {} : { delay: 0.6 }}
+      className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+    >
+      {hero.ctaButtons.map((button, index) => {
+        const IconComponent = button.icon ? iconMap[button.icon] : null;
+        return (
+          <Link
+            key={index}
+            to={button.link}
+            className={`inline-flex items-center gap-2 ${
+              button.primary 
+                ? "bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800 shadow-md hover:shadow-lg" 
+                : "bg-white/10 text-white hover:bg-white/20"
+            } font-semibold py-3 px-8 rounded-full transition-all duration-300`}
+          >
+            {button.text}
+            {IconComponent && <IconComponent className="w-4 h-4" />}
+          </Link>
+        );
+      })}
+    </motion.div>
+  ), [prefersReducedMotion, hero.ctaButtons]);
+
+  return (
+    <div className="min-h-[70vh] bg-gradient-to-br from-[#1d1d1d] to-[#2d2d2d] relative overflow-hidden">
+      {/* Background animation circles - reduced and optimized */}
+      {animationCircles}
+
+      <div className="max-w-6xl mx-auto py-20 px-4 relative">
+        {/* Hero Content */}
+        <motion.div
+          initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+          transition={prefersReducedMotion ? {} : { duration: 0.6 }}
+          className="text-center max-w-3xl mx-auto"
+        >
+          <motion.span
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.2 }}
+            className="inline-block px-4 py-1.5 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full text-white text-sm font-medium mb-6"
+          >
+            {hero.badge}
+          </motion.span>
+          
+          <motion.h1
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.3 }}
+            className="text-4xl md:text-6xl font-bold text-white mb-6"
+          >
+            {hero.title}
+          </motion.h1>
+          
+          <motion.p
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.4 }}
+            className="text-[#fff] text-lg md:text-xl mb-8"
+          >
+            {hero.description}
+          </motion.p>
+
+          {/* Key refund points */}
+          {featureCards}
+
+          {/* CTA Buttons */}
+          {ctaButtons}
+        </motion.div>
+      </div>
+    </div>
+  );
+});
+
+export default Hero; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/components/Main.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/components/Main.jsx
new file mode 100644
index 0000000..7fb83d6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/components/Main.jsx
@@ -0,0 +1,184 @@
+import React, { useMemo } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { RefreshCw, CreditCard, AlertCircle, Calendar, Clock, Mail, Shield, CheckCircle } from 'lucide-react';
+import refundPolicyData from '../config/refundPolicyData.json';
+
+// Icon mapping
+const iconMap = {
+  RefreshCw: RefreshCw,
+  CreditCard: CreditCard,
+  AlertCircle: AlertCircle,
+  Calendar: Calendar,
+  Clock: Clock,
+  Mail: Mail
+};
+
+// Extracted section component for better performance
+const PolicySection = React.memo(({ section, index, prefersReducedMotion }) => {
+  // Map section titles to their respective icons
+  const sectionIcons = {
+    "1. Cancellation Policy": <RefreshCw className="w-6 h-6 text-blue-600" />,
+    "2. Refund Policy": <CreditCard className="w-6 h-6 text-green-600" />,
+    "3. How to Request a Refund": <Mail className="w-6 h-6 text-blue-600" />,
+    "4. Modifications to this Policy": <AlertCircle className="w-6 h-6 text-yellow-600" />
+  };
+
+  // Get background color based on section title
+  const getBgColor = (title) => {
+    const colors = {
+      "1. Cancellation Policy": "bg-blue-100",
+      "2. Refund Policy": "bg-green-100",
+      "3. How to Request a Refund": "bg-blue-100",
+      "4. Modifications to this Policy": "bg-yellow-100"
+    };
+    return colors[title] || "bg-gray-100";
+  };
+
+  // Get color for refund policy subsections
+  const getRefundSectionColor = (type) => {
+    const colors = {
+      "non-refundable": {
+        text: "text-red-800",
+        border: "border-red-100"
+      },
+      "eligible": {
+        text: "text-green-800",
+        border: "border-green-100"
+      },
+      "special": {
+        text: "text-yellow-800",
+        border: "border-yellow-100"
+      }
+    };
+    return colors[type] || { text: "text-blue-800", border: "border-blue-100" };
+  };
+
+  return (
+    <motion.div 
+      key={index}
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 30 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      viewport={{ once: true }}
+      transition={prefersReducedMotion ? {} : { duration: 0.6 }}
+      className="relative"
+    >
+      {/* Section header with icon */}
+      <div className="flex items-center mb-6">
+        <div className={`w-12 h-12 rounded-full ${getBgColor(section.title)} flex items-center justify-center mr-4`}>
+          {sectionIcons[section.title]}
+        </div>
+        <h2 className="text-2xl font-semibold text-gray-800">{section.title}</h2>
+      </div>
+
+      {/* Section content with elegant styling */}
+      <div className="ml-16">
+        <p className="text-gray-600 leading-relaxed mb-8">
+          {section.content}
+        </p>
+
+        {/* Custom content for each section */}
+        {section.title === "1. Cancellation Policy" && section.subsections && (
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6 mb-8">
+            {section.subsections.map((subsection, idx) => {
+              const IconComponent = iconMap[subsection.icon];
+              return (
+                <div key={idx} className="bg-white rounded-xl p-6 shadow-sm border-l-4 border-blue-400">
+                  <div className="flex items-center mb-4">
+                    <IconComponent className="w-5 h-5 text-blue-600 mr-2" />
+                    <h4 className="font-medium text-blue-800">{subsection.title}</h4>
+                  </div>
+                  <p className="text-gray-600 text-sm">
+                    {subsection.content}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {section.title === "2. Refund Policy" && section.subsections && (
+          <div className="space-y-6 mt-6 mb-8">
+            {section.subsections.map((subsection, idx) => {
+              const colorStyle = getRefundSectionColor(subsection.type);
+              return (
+                <div key={idx} className="bg-white rounded-xl p-6 shadow-sm">
+                  <h4 className={`font-medium ${colorStyle.text} mb-4 border-b ${colorStyle.border} pb-2`}>
+                    {subsection.title}
+                  </h4>
+                  <ul className="list-disc pl-5 text-gray-600 space-y-2">
+                    {subsection.items.map((item, itemIdx) => (
+                      <li key={itemIdx}>{item}</li>
+                    ))}
+                  </ul>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
+        {section.title === "3. How to Request a Refund" && section.subsections && (
+          <div className="bg-white rounded-xl p-6 shadow-sm mt-6 mb-8 border-l-4 border-blue-400">
+            <h4 className="font-medium text-blue-800 mb-4">{section.subsections[0].title}</h4>
+            <p className="text-gray-600 mb-4">
+              {section.subsections[0].content}
+            </p>
+            <ul className="list-disc pl-5 text-gray-600 space-y-2">
+              {section.subsections[0].items.map((item, itemIdx) => (
+                <li key={itemIdx}>{item}</li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {section.points && section.points.length > 0 && (
+          <ul className="list-disc pl-6 text-gray-700 space-y-2 mt-4">
+            {section.points.map((point, idx) => (
+              <li key={idx} className="text-base">{point}</li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </motion.div>
+  );
+});
+
+// Main component to display refund policy
+const Main = React.memo(() => {
+  const prefersReducedMotion = useReducedMotion();
+  const { main } = refundPolicyData;
+
+  return (
+    <div className="bg-gradient-to-b from-white to-gray-50 py-20">
+      <div className="max-w-5xl mx-auto px-6">
+        {/* Elegant header with underline */}
+        <motion.div 
+          initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="text-center mb-16"
+        >
+          <h1 className="text-4xl font-bold text-gray-800 mb-3 inline-block relative">
+            {main.title}
+          </h1>
+          <div className="text-gray-500 mb-6">Effective Date: {main.effectiveDate}</div>
+          <p className="text-gray-600 text-lg mt-8 max-w-3xl mx-auto leading-relaxed">
+            {main.description}
+          </p>
+        </motion.div>
+
+        {/* Main content with flowing design */}
+        <div className="space-y-20">
+          {main.sections.map((section, index) => (
+            <PolicySection 
+              key={index}
+              section={section} 
+              index={index}
+              prefersReducedMotion={prefersReducedMotion}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default Main; 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/config/refundPolicyData.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/config/refundPolicyData.json
new file mode 100644
index 0000000..1ec35d1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/config/refundPolicyData.json
@@ -0,0 +1,130 @@
+{
+  "hero": {
+    "badge": "Cancellation & Refund Policy",
+    "title": "Our Refund Commitment",
+    "description": "We strive to provide top-tier services with complete transparency. Learn about our cancellation process and refund eligibility.",
+    "featureCards": [
+      {
+        "icon": "RefreshCw",
+        "title": "Easy Cancellation",
+        "description": "Cancel your subscription services at any time through your dashboard."
+      },
+      {
+        "icon": "CreditCard",
+        "title": "Transparent Refunds",
+        "description": "Clear guidelines on when and how refunds are processed for our services."
+      },
+      {
+        "icon": "AlertCircle",
+        "title": "Special Circumstances",
+        "description": "We handle billing errors and unauthorized charges with care and attention."
+      }
+    ],
+    "ctaButtons": [
+      {
+        "text": "Contact Us",
+        "icon": "ArrowRight",
+        "link": "/contact",
+        "primary": true
+      },
+      {
+        "text": "Terms of Service",
+        "link": "/terms-and-conditions",
+        "primary": false
+      }
+    ]
+  },
+  "main": {
+    "title": "Cancellation & Refund Policy",
+    "description": "At Tech4Biz, we strive to provide top-tier services with complete transparency. This Cancellation & Refund Policy outlines the terms under which you may cancel your services and request a refund.",
+    "effectiveDate": "Feb 24th 2023",
+    "sections": [
+      {
+        "title": "1. Cancellation Policy",
+        "content": "We understand that your needs may change over time. Our cancellation policy is designed to be flexible and transparent, allowing you to manage your subscriptions with ease.",
+        "points": [],
+        "subsections": [
+          {
+            "icon": "Calendar",
+            "title": "Subscription Services",
+            "content": "Cancel at any time through the Tech4Biz. Cancellations take effect at the end of the current billing cycle."
+          },
+          {
+            "icon": "Clock",
+            "title": "On-Demand Services",
+            "content": "Usage-based services are billed on a pay-as-you-go basis and cannot be canceled retroactively."
+          },
+          {
+            "icon": "RefreshCw",
+            "title": "Automatic Renewals",
+            "content": "If not canceled before the renewal date, subscriptions will automatically renew and applicable fees will be charged."
+          }
+        ]
+      },
+      {
+        "title": "2. Refund Policy",
+        "content": "We have clear guidelines on which services are eligible for refunds and under what circumstances refunds can be processed.",
+        "points": [],
+        "subsections": [
+          {
+            "type": "non-refundable",
+            "title": "Non-Refundable Services",
+            "items": [
+              "One-time setup fees",
+              "Domain registrations and SSL certificates",
+              "Any third-party software or licenses purchased through Tech4Biz",
+              "Any usage-based, pay-as-you-go services"
+            ]
+          },
+          {
+            "type": "eligible",
+            "title": "Eligible Refunds",
+            "items": [
+              "Customers on an annual plan may request a pro-rated refund if cancellation occurs within the first 30 days.",
+              "If a Tech4Biz service is unavailable for more than 9% uptime, customers may be eligible for a service credit in accordance with our SLA.",
+              "Refunds will be issued to the original payment method used during the purchase and processed within 7-14 business days after approval."
+            ]
+          },
+          {
+            "type": "special",
+            "title": "Special Circumstances",
+            "items": [
+              "If you were erroneously charged or billed incorrectly, please contact our support team within 7 days of the charge to request a correction or refund.",
+              "In cases of fraud or unauthorized payments, refunds will be processed after a thorough investigation."
+            ]
+          }
+        ]
+      },
+      {
+        "title": "3. How to Request a Refund",
+        "content": "The process to request a refund is straightforward. We aim to make it as simple as possible for our customers.",
+        "points": [],
+        "subsections": [
+          {
+            "title": "Contact Our Billing Support Team",
+            "content": "To request a refund, please contact our Billing Support Team at billing@tech4biz.com with the following details:",
+            "items": [
+              "Name and account email",
+              "Invoice or transaction ID",
+              "Reason for the refund request"
+            ]
+          }
+        ]
+      },
+      {
+        "title": "4. Modifications to this Policy",
+        "content": "Tech4Biz reserves the right to modify this Cancellation & Refund Policy at any time. Any changes will be communicated via email or our official website. For further questions, please contact our support team at support@tech4biz.com.",
+        "points": []
+      }
+    ]
+  },
+  "newsletter": {
+    "title": "Never Miss Important Updates",
+    "description": "Join our newsletter to stay informed about changes to our terms and policies.",
+    "points": [
+      { "icon": "Mail", "text": "Policy updates directly to your inbox" },
+      { "icon": "Shield", "text": "Privacy-first communication" },
+      { "icon": "CheckCircle", "text": "Unsubscribe anytime" }
+    ]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/config/refundSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/config/refundSchema.json
new file mode 100644
index 0000000..70fff84
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/config/refundSchema.json
@@ -0,0 +1,97 @@
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Cancellation & Refund Policy - Tech4Biz Solutions",
+  "description": "Learn about Tech4Biz's cancellation process and refund eligibility. We strive to provide top-tier services with complete transparency.",
+  "url": "https://tech4bizsolutions.com/policies/refund",
+  "datePublished": "2023-02-24T00:00:00+00:00",
+  "dateModified": "2023-02-24T00:00:00+00:00",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Tech4Biz Solutions Private Limited",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+      "width": "180",
+      "height": "36"
+    }
+  },
+  "mainEntity": {
+    "@type": "WebContent",
+    "headline": "Our Refund Commitment",
+    "description": "We strive to provide top-tier services with complete transparency. Learn about our cancellation process and refund eligibility.",
+    "mainContentOfPage": {
+      "@type": "WebPageElement",
+      "cssSelector": ".main-content"
+    },
+    "about": [
+      {
+        "@type": "Thing",
+        "name": "Cancellation Policy",
+        "description": "We understand that your needs may change over time. Our cancellation policy is designed to be flexible and transparent, allowing you to manage your subscriptions with ease."
+      },
+      {
+        "@type": "Thing",
+        "name": "Refund Policy",
+        "description": "We have clear guidelines on which services are eligible for refunds and under what circumstances refunds can be processed."
+      },
+      {
+        "@type": "Thing",
+        "name": "How to Request a Refund",
+        "description": "The process to request a refund is straightforward. We aim to make it as simple as possible for our customers."
+      },
+      {
+        "@type": "Thing",
+        "name": "Modifications to this Policy",
+        "description": "Tech4Biz reserves the right to modify this Cancellation & Refund Policy at any time. Any changes will be communicated via email or our official website."
+      }
+    ]
+  },
+  "offers": {
+    "@type": "Offer",
+    "itemOffered": {
+      "@type": "Service",
+      "name": "Tech4Biz Services",
+      "description": "Tech4Biz provides various subscription and on-demand services with specific cancellation and refund policies."
+    },
+    "priceSpecification": {
+      "@type": "PriceSpecification",
+      "priceCurrency": "USD"
+    }
+  },
+  "potentialAction": [
+    {
+      "@type": "ContactAction",
+      "name": "Contact Us",
+      "target": "https://tech4bizsolutions.com/contact"
+    },
+    {
+      "@type": "ReadAction",
+      "name": "Terms of Service",
+      "target": "https://tech4bizsolutions.com/policies/terms"
+    }
+  ],
+  "specialty": [
+    {
+      "@type": "Specialty",
+      "name": "Easy Cancellation",
+      "description": "Cancel your subscription services at any time through your dashboard."
+    },
+    {
+      "@type": "Specialty",
+      "name": "Transparent Refunds",
+      "description": "Clear guidelines on when and how refunds are processed for our services."
+    },
+    {
+      "@type": "Specialty",
+      "name": "Special Circumstances",
+      "description": "We handle billing errors and unauthorized charges with care and attention."
+    }
+  ],
+  "contactPoint": {
+    "@type": "ContactPoint",
+    "contactType": "customer service",
+    "email": "billing@tech4biz.com",
+    "availableLanguage": ["English"]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/index.jsx
new file mode 100644
index 0000000..9bfebe5
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/refund/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import Main from './components/Main'
+import Hero from './components/Hero'
+import ScrollToTop from '@/components/common/scroll/ScrollToTop'
+import ScrollToTopButton from '@/components/common/scroll/ScrollToTopButton'
+import refundSchema from './config/refundSchema.json'
+import { Helmet } from 'react-helmet'
+
+const RefundPolicy = () => {
+  return (
+    <div>
+      <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(refundSchema)}
+        </script>
+      </Helmet>
+      <ScrollToTop/>
+      <ScrollToTopButton />
+      <Hero/>
+      <Main/>
+    </div>
+  )
+}
+
+export default RefundPolicy 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Hero.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Hero.jsx
new file mode 100644
index 0000000..5f9dc01
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Hero.jsx
@@ -0,0 +1,147 @@
+import React, { useMemo, useCallback } from 'react';
+import { motion, useReducedMotion } from 'framer-motion';
+import { ArrowRight, FileText, Shield, Bell } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import termsData from '../data/termConditionContent.json';
+
+const Hero = React.memo(() => {
+  // Check if user prefers reduced motion
+  const prefersReducedMotion = useReducedMotion();
+  
+  // Memoize the background animation circles to prevent re-calculation on re-renders
+  // Reduce number of circles from 20 to 10 for better performance
+  // Disable animations if user prefers reduced motion
+  const animationCircles = useMemo(() => {
+    // Reduce number of circles from 20 to 10 for better performance
+    const circleCount = prefersReducedMotion ? 5 : 10;
+    
+    return [...Array(circleCount)].map((_, i) => (
+      <motion.div
+        key={i}
+        className="absolute rounded-full border border-white/10"
+        style={{
+          width: `${(i + 1) * 15}%`, // Increased size increment to maintain coverage
+          height: `${(i + 1) * 15}%`,
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+        animate={prefersReducedMotion ? {} : {
+          rotate: 360,
+          scale: [1, 1.05, 1], // Reduced scale variation for better performance
+        }}
+        transition={prefersReducedMotion ? {} : {
+          duration: 25 + i * 2, // Simplified duration calculation
+          repeat: Infinity,
+          ease: "linear",
+        }}
+      />
+    ));
+  }, [prefersReducedMotion]);
+
+  // Memoize feature cards to prevent unnecessary re-renders
+  const featureCards = useMemo(() => (
+    <motion.div
+      initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+      animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
+      transition={prefersReducedMotion ? {} : { delay: 0.5 }}
+      className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"
+    >
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-500/20 p-3 rounded-full w-fit mb-4">
+          <FileText className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Clear Guidelines</h3>
+        <p className="text-white/80 text-sm">Our terms are written in plain language to ensure you understand your rights and responsibilities.</p>
+      </div>
+      
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-green-500/20 p-3 rounded-full w-fit mb-4">
+          <Shield className="w-6 h-6 text-green-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Data Protection</h3>
+        <p className="text-white/80 text-sm">We implement robust security measures to protect your information at all times.</p>
+      </div>
+      
+      <div className="bg-white/5 backdrop-blur-sm p-6 rounded-xl border border-white/10">
+        <div className="bg-blue-400/20 p-3 rounded-full w-fit mb-4">
+          <Bell className="w-6 h-6 text-blue-400" />
+        </div>
+        <h3 className="text-white font-semibold text-lg mb-2">Policy Updates</h3>
+        <p className="text-white/80 text-sm">We'll notify you of any significant changes to our terms and conditions.</p>
+      </div>
+    </motion.div>
+  ), [prefersReducedMotion]);
+
+  return (
+    <div className="min-h-[70vh] bg-gradient-to-br from-[#1d1d1d] to-[#2d2d2d] relative overflow-hidden">
+      {/* Background animation circles */}
+      {animationCircles}
+
+      <div className="max-w-6xl mx-auto py-20 px-4 relative">
+        {/* Hero Content */}
+        <motion.div
+          initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+          animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
+          transition={prefersReducedMotion ? {} : { duration: 0.6 }}
+          className="text-center max-w-3xl mx-auto"
+        >
+          <motion.span
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0 }}
+            animate={prefersReducedMotion ? {} : { opacity: 1 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.2 }}
+            className="inline-block px-4 py-1.5 bg-gradient-to-r from-blue-500 to-blue-600 rounded-full text-white text-sm font-medium mb-6"
+          >
+            Terms and Conditions
+          </motion.span>
+          
+          <motion.h1
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.3 }}
+            className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-6"
+          >
+            {termsData.banner.title}
+          </motion.h1>
+          
+          <motion.p
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.4 }}
+            className="text-white/80 text-lg md:text-xl mb-10"
+          >
+            {termsData.banner.description}
+          </motion.p>
+
+          {/* Feature Cards */}
+          {featureCards}
+
+          {/* CTA Buttons */}
+          <motion.div
+            initial={prefersReducedMotion ? { opacity: 1 } : { opacity: 0, y: 20 }}
+            animate={prefersReducedMotion ? {} : { opacity: 1, y: 0 }}
+            transition={prefersReducedMotion ? {} : { delay: 0.6 }}
+            className="flex flex-col sm:flex-row gap-4 justify-center items-center"
+          >
+            <Link
+              to="/contact"
+              className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-3 px-8 rounded-full hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-md hover:shadow-lg"
+            >
+              Contact Us
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+            
+            <Link
+              to="/privacy-policy"
+              className="inline-flex items-center gap-2 bg-white/10 text-white font-semibold py-3 px-8 rounded-full hover:bg-white/20 transition-all duration-300"
+            >
+              Privacy Policy
+            </Link>
+          </motion.div>
+        </motion.div>
+      </div>
+    </div>
+  );
+});
+
+export default Hero;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Main.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Main.jsx
new file mode 100644
index 0000000..3572a49
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Main.jsx
@@ -0,0 +1,155 @@
+import React, { useMemo } from 'react';
+import { motion } from 'framer-motion';
+import termsData from '../data/termConditionContent.json';
+import { FileText, Database, UserCheck, Shield, Cookie, Mail, RefreshCw } from 'lucide-react';
+
+// Main component to display terms and conditions
+const Main = React.memo(() => {
+  const { title, description, data } = termsData.main;
+
+  // Memoize the section icons to prevent recreation on re-renders
+  const sectionIcons = useMemo(() => ({
+    "1. Information Collection": <FileText className="w-6 h-6 text-blue-500" />,
+    "2. Data Usage": <Database className="w-6 h-6 text-green-500" />,
+    "3. User Rights": <UserCheck className="w-6 h-6 text-blue-500" />,
+    "4. Security Measures": <Shield className="w-6 h-6 text-yellow-600" />,
+    "5. Cookies and Tracking Technologies": <Cookie className="w-6 h-6 text-red-500" />,
+    "6. Subscription & Communications": <Mail className="w-6 h-6 text-indigo-500" />,
+    "7. Changes to Terms": <RefreshCw className="w-6 h-6 text-blue-500" />
+  }), []);
+
+  // Memoize the sections to prevent recreation on re-renders
+  const sections = useMemo(() => {
+    return data.map((section, index) => (
+      <motion.div 
+        key={index}
+        className="relative"
+        initial={{ opacity: 0, y: 20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true }}
+        transition={{ delay: index * 0.1 }}
+      >
+        <div className="flex items-start gap-6">
+          {/* Icon */}
+          <div className="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-gray-50 shadow-sm flex-shrink-0 mt-1">
+            {sectionIcons[section.title]}
+          </div>
+          
+          {/* Content */}
+          <div className="flex-1">
+            <h2 className="text-2xl font-semibold text-gray-800 mb-4">
+              {section.title}
+            </h2>
+            <p className="text-gray-600 leading-relaxed mb-6">
+              {section.content}
+            </p>
+            
+            {/* Additional content based on section */}
+            {section.title === "3. User Rights" && (
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4 mb-6">
+                <div className="bg-blue-50 p-4 rounded-lg border-l-2 border-blue-500">
+                  <h4 className="font-medium text-blue-800 mb-2">Access Rights</h4>
+                  <p className="text-blue-700 text-sm">Request a copy of all personal data we hold about you.</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg border-l-2 border-blue-500">
+                  <h4 className="font-medium text-blue-800 mb-2">Modification Rights</h4>
+                  <p className="text-blue-700 text-sm">Update or correct any inaccurate information in your profile.</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg border-l-2 border-blue-500">
+                  <h4 className="font-medium text-blue-800 mb-2">Deletion Rights</h4>
+                  <p className="text-blue-700 text-sm">Request the removal of your personal data from our systems.</p>
+                </div>
+                <div className="bg-blue-50 p-4 rounded-lg border-l-2 border-blue-500">
+                  <h4 className="font-medium text-blue-800 mb-2">Consent Withdrawal</h4>
+                  <p className="text-blue-700 text-sm">Opt out of communications or specific data processing activities.</p>
+                </div>
+              </div>
+            )}
+            
+            {section.title === "4. Security Measures" && (
+              <div className="flex flex-col md:flex-row gap-4 mt-4 mb-6">
+                <div className="flex-1 bg-yellow-50 p-4 rounded-lg border-l-2 border-yellow-500">
+                  <h4 className="font-medium text-yellow-800 mb-1">Encryption</h4>
+                  <p className="text-yellow-700 text-sm">All sensitive data is encrypted both in transit and at rest.</p>
+                </div>
+                <div className="flex-1 bg-yellow-50 p-4 rounded-lg border-l-2 border-yellow-500">
+                  <h4 className="font-medium text-yellow-800 mb-1">Regular Audits</h4>
+                  <p className="text-yellow-700 text-sm">We conduct periodic security assessments to identify vulnerabilities.</p>
+                </div>
+                <div className="flex-1 bg-yellow-50 p-4 rounded-lg border-l-2 border-yellow-500">
+                  <h4 className="font-medium text-yellow-800 mb-1">Access Control</h4>
+                  <p className="text-yellow-700 text-sm">Only authorized personnel can access user information.</p>
+                </div>
+              </div>
+            )}
+            
+            {section.title === "5. Cookies and Tracking Technologies" && (
+              <div className="bg-red-50 p-5 rounded-lg border-l-4 border-red-500 mb-6">
+                <h4 className="font-medium text-red-800 mb-2">Cookie Management</h4>
+                <p className="text-red-700 mb-3">You can manage your cookie preferences through your browser settings:</p>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm">
+                  <div className="bg-white p-3 rounded shadow-sm">
+                    <span className="font-medium">Chrome:</span> Settings → Privacy and Security → Cookies and other site data
+                  </div>
+                  <div className="bg-white p-3 rounded shadow-sm">
+                    <span className="font-medium">Firefox:</span> Options → Privacy & Security → Cookies and Site Data
+                  </div>
+                  <div className="bg-white p-3 rounded shadow-sm">
+                    <span className="font-medium">Safari:</span> Preferences → Privacy → Cookies and website data
+                  </div>
+                  <div className="bg-white p-3 rounded shadow-sm">
+                    <span className="font-medium">Edge:</span> Settings → Cookies and site permissions → Cookies
+                  </div>
+                </div>
+              </div>
+            )}
+            
+            {section.points && section.points.length > 0 && (
+              <ul className="list-disc pl-6 text-gray-700 space-y-2">
+                {section.points.map((point, idx) => (
+                  <li key={idx} className="text-base">{point}</li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+        
+        {/* Connector line for all but last item */}
+        {index < data.length - 1 && (
+          <div className="hidden md:block absolute left-6 top-12 bottom-0 w-0.5 bg-gray-100 -ml-0.5 h-full"></div>
+        )}
+      </motion.div>
+    ));
+  }, [data, sectionIcons]);
+
+  return (
+    <div className="bg-white py-16">
+      <motion.div 
+        className="max-w-4xl mx-auto px-6"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+      >
+        {/* Header */}
+        <motion.div 
+          className="text-center mb-16"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2 }}
+        >
+          <h1 className="text-4xl font-bold text-gray-800 mb-6">{title}</h1>
+          <div className="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
+          <p className="text-gray-600 text-lg leading-relaxed max-w-3xl mx-auto">
+            {description}
+          </p>
+        </motion.div>
+
+        {/* Terms Sections */}
+        <div className="space-y-16">
+          {sections}
+        </div>
+      </motion.div>
+    </div>
+  );
+});
+
+export default Main;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Newsletter.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Newsletter.jsx
new file mode 100644
index 0000000..52fd84d
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/components/Newsletter.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Mail, Shield, CheckCircle } from 'lucide-react';
+import privacyData from '../data/termConditionContent.json'; // Adjust the path as necessary
+import { useFormHandler } from '@/pages/detail-pages/ourServicesDetailPage/utils/subscription';
+import { notification } from 'antd';
+import { subscribeToNewsletter } from '@/utils/newsletterApi';
+
+// Map icons to their respective components
+const iconComponents = {
+  Mail: <Mail />,
+  Shield: <Shield />,
+  CheckCircle: <CheckCircle />
+};
+
+const Newsletter = () => {
+  const { title, description, points } = privacyData.newsletter;
+  const located = "Terms and Conditions Newsletter"; // Updated location name
+
+  const { email, error, handleInputChange, submitForm, resetForm } = useFormHandler({
+    located,
+    handleSubmit: subscribeToNewsletter,
+  });
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95 }}
+      whileInView={{ opacity: 1, scale: 1 }}
+      viewport={{ once: true }}
+      className="max-w-5xl mx-auto p-8 bg-gray-50 rounded-lg shadow-lg mt-0 mb-20"
+    >
+      <div className="text-center mb-8">
+        <h3 className="text-2xl font-bold mb-4">{title}</h3>
+        <p className="text-gray-600">{description}</p>
+      </div>
+      <div className="grid md:grid-cols-3 gap-6 mb-8">
+        {points.map((feature, index) => (
+          <motion.div
+            key={index}
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            transition={{ delay: index * 0.2 }}
+            className="flex flex-col items-center text-center p-4"
+          >
+            <div className="text-blue-600 mb-4">{iconComponents[feature.icon]}</div>
+            <p className="text-gray-700">{feature.text}</p>
+          </motion.div>
+        ))}
+      </div>
+        <div className="flex flex-col sm:flex-row gap-4">
+          <input
+            type="email"
+            placeholder="Enter your email address"
+            value={email}
+            onChange={handleInputChange}
+            className="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <motion.button
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            onClick={submitForm}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
+          >
+            Subscribe
+          </motion.button>
+          {error && <p className="text-red-500 mt-2">{error}</p>} {/* Display error message if any */}
+
+        </div>
+    </motion.div>
+  );
+};
+
+export default Newsletter;
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/config/termsSchema.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/config/termsSchema.json
new file mode 100644
index 0000000..999fef2
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/config/termsSchema.json
@@ -0,0 +1,117 @@
+{
+  "@context": "https://schema.org",
+  "@type": "WebPage",
+  "name": "Terms and Conditions - Tech4Biz Solutions",
+  "description": "Clear guidelines for a better experience with Tech4Biz Solutions. Learn about our data collection practices, user rights, security measures, and more.",
+  "url": "https://tech4bizsolutions.com/policies/termsandconditions",
+  "publisher": {
+    "@type": "Organization",
+    "name": "Tech4biz Solutions Private Limited",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://tech4bizsolutions.com/images/logos/logo-light.webp",
+      "width": "180",
+      "height": "36"
+    }
+  },
+  "mainEntity": {
+    "@type": "TermsAndConditions",
+    "name": "Terms and Conditions for Tech4Biz Solutions",
+    "description": "Welcome to our platform! By using our website and services, you agree to comply with the following terms and conditions, designed to ensure a transparent and secure experience for all users.",
+    "termsOfService": [
+      {
+        "@type": "WebContent",
+        "headline": "1. Information Collection",
+        "text": "We value your privacy and collect only the essential data required to provide you with the best experience. We gather this information to enhance our services, communicate updates, and improve the user experience. We never sell or share your data without consent, except when legally required.",
+        "about": [
+          "Personal information, such as your name, contact details, and email, when you sign up for our services.",
+          "Information submitted through forms, inquiries, or surveys.",
+          "Subscription details from newsletter sign-ups.",
+          "Automatically gathered data to improve site performance."
+        ]
+      },
+      {
+        "@type": "WebContent",
+        "headline": "2. Data Usage",
+        "text": "Your information is used to improve service delivery, send updates, and conduct research to better understand user behavior. We may also use it to provide relevant ads and promotions, all while safeguarding your privacy."
+      },
+      {
+        "@type": "WebContent",
+        "headline": "3. User Rights",
+        "text": "You have control over your data. To exercise these rights, please contact our support team.",
+        "about": [
+          "Access Your Data: Request a copy of the information we hold.",
+          "Modify Your Information: Update or correct your details at any time.",
+          "Request Deletion: Request the removal of your personal information.",
+          "Withdraw Consent: Opt out of communications or data processing activities."
+        ]
+      },
+      {
+        "@type": "WebContent",
+        "headline": "4. Security Measures",
+        "text": "We employ strict security protocols to protect your data. This includes encryption for data storage and transfers, regular security audits, and controlled access to ensure only authorized personnel can view your information. While we strive to keep your data safe, no system is entirely risk-free. If you suspect a security issue, please contact us immediately."
+      },
+      {
+        "@type": "WebContent",
+        "headline": "5. Cookies and Tracking Technologies",
+        "text": "We use cookies to enhance your experience. You can manage or disable cookies through your browser settings. However, disabling essential cookies may affect website functionality.",
+        "about": [
+          "Essential Cookies: Necessary for website functionality.",
+          "Analytics Cookies: Help us understand website traffic and user behavior.",
+          "Marketing Cookies: Used for personalized advertising and promotions."
+        ]
+      },
+      {
+        "@type": "WebContent",
+        "headline": "6. Subscription & Communications",
+        "text": "By subscribing to our newsletter, you agree to receive emails about updates, service announcements, and promotions. You have the option to opt out at any time."
+      },
+      {
+        "@type": "WebContent",
+        "headline": "7. Changes to Terms",
+        "text": "We may update these terms periodically. Changes will be posted on this page, and we will notify you via email if applicable. Continued use of our services after changes indicates acceptance of the updated terms."
+      }
+    ]
+  },
+  "specialty": [
+    {
+      "@type": "Specialty",
+      "name": "Clear Guidelines",
+      "description": "Our terms are written in plain language to ensure you understand your rights and responsibilities."
+    },
+    {
+      "@type": "Specialty",
+      "name": "Data Protection",
+      "description": "We implement robust security measures to protect your information at all times."
+    },
+    {
+      "@type": "Specialty",
+      "name": "Policy Updates",
+      "description": "We'll notify you of any significant changes to our terms and conditions."
+    }
+  ],
+  "potentialAction": [
+    {
+      "@type": "ReadAction",
+      "target": "https://tech4bizsolutions.com/policies/privacy"
+    },
+    {
+      "@type": "ContactAction",
+      "target": "https://tech4bizsolutions.com/contact"
+    }
+  ],
+  "offers": {
+    "@type": "Offer",
+    "itemOffered": {
+      "@type": "Service",
+      "name": "Newsletter Subscription",
+      "description": "Join our newsletter to stay informed about changes to our terms and policies."
+    }
+  },
+  "contactPoint": {
+    "@type": "ContactPoint",
+    "contactType": "customer service",
+    "email": "contact@tech4biz.io",
+    "availableLanguage": ["English"]
+  }
+} 
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/data/termConditionContent.json b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/data/termConditionContent.json
new file mode 100644
index 0000000..4a7dd5a
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/data/termConditionContent.json
@@ -0,0 +1,77 @@
+{
+    "banner":{
+        "title":"Terms and Conditions",
+        "description":"Clear guidelines for a better experience"
+    },
+    "main":{
+        "title":"Terms and Conditions for Tech4Biz Solutions",
+        "description":"Welcome to our platform! By using our website and services, you agree to comply with the following terms and conditions, designed to ensure a transparent and secure experience for all users.",
+        "data":[
+            {
+                "title": "1. Information Collection",
+                "content": "We value your privacy and collect only the essential data required to provide you with the best experience. We gather this information to enhance our services, communicate updates, and improve the user experience. We never sell or share your data without consent, except when legally required.",
+                "borderColor": "border-blue-500",
+                "points": [
+                    "Personal information, such as your name, contact details, and email, when you sign up for our services.",
+                    "Information submitted through forms, inquiries, or surveys.",
+                    "Subscription details from newsletter sign-ups.",
+                    "Automatically gathered data to improve site performance."
+                ]
+            },
+            {
+                "title": "2. Data Usage",
+                "content": "Your information is used to improve service delivery, send updates, and conduct research to better understand user behavior. We may also use it to provide relevant ads and promotions, all while safeguarding your privacy.",
+                "borderColor": "border-green-500",
+                "points": []
+            },
+            {
+                "title": "3. User Rights",
+                "content": "You have control over your data. To exercise these rights, please contact our support team.",
+                "borderColor": "border-purple-500",
+                "points": [
+                    "Access Your Data: Request a copy of the information we hold.",
+                    "Modify Your Information: Update or correct your details at any time.",
+                    "Request Deletion: Request the removal of your personal information.",
+                    "Withdraw Consent: Opt out of communications or data processing activities."
+                ]
+            },
+            {
+                "title": "4. Security Measures",
+                "content": "We employ strict security protocols to protect your data. This includes encryption for data storage and transfers, regular security audits, and controlled access to ensure only authorized personnel can view your information. While we strive to keep your data safe, no system is entirely risk-free. If you suspect a security issue, please contact us immediately.",
+                "borderColor": "border-yellow-600",
+                "points": []
+            },
+            {
+                "title": "5. Cookies and Tracking Technologies",
+                "content": "We use cookies to enhance your experience. You can manage or disable cookies through your browser settings. However, disabling essential cookies may affect website functionality.",
+                "borderColor": "border-red-500",
+                "points": [
+                    "Essential Cookies: Necessary for website functionality.",
+                    "Analytics Cookies: Help us understand website traffic and user behavior.",
+                    "Marketing Cookies: Used for personalized advertising and promotions."
+                ]
+            },
+            {
+                "title": "6. Subscription & Communications",
+                "content": "By subscribing to our newsletter, you agree to receive emails about updates, service announcements, and promotions. You have the option to opt out at any time.",
+                "borderColor": "border-indigo-500",
+                "points": []
+            },
+            {
+                "title": "7. Changes to Terms",
+                "content": "We may update these terms periodically. Changes will be posted on this page, and we will notify you via email if applicable. Continued use of our services after changes indicates acceptance of the updated terms.",
+                "borderColor": "border-blue-500",
+                "points": []
+            }
+        ]
+    },
+    "newsletter":{
+        "title":"Never Miss Important Updates",
+        "description":"Join our newsletter to stay informed about changes to our terms and policies.",
+        "points":[
+            { "icon": "Mail", "text": "Policy updates directly to your inbox" },
+            { "icon": "Shield", "text": "Privacy-first communication" },
+            { "icon": "CheckCircle", "text": "Unsubscribe anytime" }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/index.jsx b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/index.jsx
new file mode 100644
index 0000000..f2f50f6
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/pages/policies/termsandconditions/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import Main from './components/Main'
+import ModernHeroSections from './components/Hero'
+import Newsletter from './components/Newsletter'
+import ScrollToTop from '@/components/common/scroll/ScrollToTop'
+import ScrollToTopButton from '@/components/common/scroll/ScrollToTopButton'
+import termsSchema from './config/termsSchema.json'
+import { Helmet } from 'react-helmet'
+
+const TermsAndConditions = () => {
+  return (
+    <div>
+      <Helmet>
+        <script type="application/ld+json">
+          {JSON.stringify(termsSchema)}
+        </script>
+      </Helmet>
+      <ScrollToTop/>
+      <ScrollToTopButton />
+      <ModernHeroSections/>
+      <Main/>
+      <Newsletter/>
+    </div>
+  )
+}
+
+export default TermsAndConditions
diff --git a/Tech4biz-Version01/Tech4biz/src/routes/routeConfig.jsx b/Tech4biz-Version01/Tech4biz/src/routes/routeConfig.jsx
new file mode 100644
index 0000000..a351288
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/routes/routeConfig.jsx
@@ -0,0 +1,325 @@
+import { lazy } from "react";
+
+// Import NotFound page
+const NotFoundPage = lazy(() =>
+  import("../components/common/NotFound").then((module) => ({
+    default: module.default,
+  })),
+);
+
+// Lazy load pages
+const Home = lazy(() =>
+  import("../pages/home/Home").then((module) => ({ default: module.default })),
+);
+const CaseStudyShowcase = lazy(() =>
+  import("../pages/home/components/caseStudyShowcase").then((module) => ({
+    default: module.default,
+  })),
+);
+const CaseStudiesSlider = lazy(() =>
+  import("../pages/home/components/caseStudiesSlider/CardSlider").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const SoftwareVlsiServices = lazy(() =>
+  import("../pages/home/components/softwareVlsiServices").then((module) => ({
+    default: module.default,
+  })),
+);
+const CloudCTA = lazy(() =>
+  import("../pages/home/components/CloudCTA/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const CloudSlider = lazy(() =>
+  import("../pages/home/components/CloudSlider/CloudSliderNew").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const OurServices = lazy(() =>
+  import("../pages/home/components/OurServices/OurServices").then((module) => ({
+    default: module.default,
+  })),
+);
+const BusinessSolution = lazy(() =>
+  import("../pages/home/components/buisnessSolution/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const ManufacturingServices = lazy(() =>
+  import("../pages/home/components/manufacturingSolutions/index").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+
+// Detail Pages
+const CaseStudyDetailPage = lazy(() =>
+  import("../pages/detail-pages/caseStudyDetailPage").then((module) => ({
+    default: module.default,
+  })),
+);
+const SliderDetailPage = lazy(() =>
+  import("../pages/detail-pages/sliderDetailPage/SliderDetailPage").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const SoftwareServiceDetailPage = lazy(() =>
+  import("../pages/detail-pages/SoftwareVlsiDetailPage/software/index").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const VlsiServiceDetailPage = lazy(() =>
+  import("../pages/detail-pages/SoftwareVlsiDetailPage/vlsi/index").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const OurServicesDetailPage = lazy(() =>
+  import("../pages/detail-pages/ourServicesDetailPage/index").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const BusinessSolutionsDetailPage = lazy(() =>
+  import("../pages/detail-pages/buisnessSolutionsDetailPage/index").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const ManufacturingSolutionsDetailPage = lazy(() =>
+  import("../pages/detail-pages/manufacturingSolutionsDetailPage/index").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const DigitalSolutions = lazy(() =>
+  import("../pages/detail-pages/DigitalSolutions/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const DigitalSolutionsDetailPage = lazy(() =>
+  import("../pages/detail-pages/DigitalSolutionsDetailPage/index").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const ProductDetailPage = lazy(() =>
+  import("../pages/detail-pages/ProductDetailPage/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const JobDetailPage = lazy(() =>
+  import("../pages/detail-pages/careersDetailPage/JobDetail").then(
+    (module) => ({ default: module.default }),
+  ),
+);
+const GenAIDetailPage = lazy(() =>
+  import("../pages/detail-pages/GenAiDetailPage/Index").then((module) => ({
+    default: module.default,
+  })),
+);
+
+//About & Contact Pages
+const AboutPage = lazy(() =>
+  import("../pages/about/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const ContactPage = lazy(() =>
+  import("../pages/contact/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const CareersPage = lazy(() =>
+  import("../pages/careers/index").then((module) => ({
+    default: module.default,
+  })),
+);
+
+//Press Release Pages
+const PressReleasePage = lazy(() =>
+  import("../pages/detail-pages/PressRelease/index").then((module) => ({
+    default: module.default,
+  })),
+);
+
+//News & Blogs Pages
+// const NewsAndBlogsPage = lazy(() =>
+//   import("../pages/newsandblogs/index").then((module) => ({
+//     default: module.default,
+//   })),
+// );
+
+//News & Blogs Detail Pages
+// const NewsAndBlogsDetailPage = lazy(() =>
+//   import("../pages/detail-pages/newsandblogdetailpage/index").then((module) => ({
+//     default: module.default,
+//   })),
+// );
+
+//Policies Pages
+const PrivacyPolicyPage = lazy(() =>
+  import("../pages/policies/privacy/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const TermsOfServicePage = lazy(() =>
+  import("../pages/policies/termsandconditions/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const CookiePolicyPage = lazy(() =>
+  import("../pages/policies/cookies/index").then((module) => ({
+    default: module.default,
+  })),
+);
+const RefundPolicyPage = lazy(() =>
+  import("../pages/policies/refund/index").then((module) => ({
+    default: module.default,
+  })),
+);
+
+const routeConfig = [
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/case-studies",
+    element: <CaseStudyShowcase />,
+  },
+  {
+    path: "/software-vlsi-services",
+    element: <SoftwareVlsiServices />,
+  },
+  {
+    path: "/case-studies-slider",
+    element: <CaseStudiesSlider />,
+  },
+  {
+    path: "/cloud-cta",
+    element: <CloudCTA />,
+  },
+  {
+    path: "/cloud-slider",
+    element: <CloudSlider />,
+  },
+  {
+    path: "/our-services",
+    element: <OurServices />,
+  },
+  {
+    path: "/manufacturing-solutions",
+    element: <ManufacturingServices />,
+  },
+  {
+    path: "/services",
+    element: <DigitalSolutions />,
+  },
+
+  // Route for Detail Page
+  {
+    path: "/case-studies/:caseStudySlug",
+    element: <CaseStudyDetailPage />,
+  },
+  {
+    path: "/slider-detail/:serviceId",
+    element: <SliderDetailPage />,
+  },
+  {
+    path: "/software-development",
+    element: <SoftwareServiceDetailPage />,
+  },
+  {
+    path: "/vlsi-design",
+    element: <VlsiServiceDetailPage />,
+  },
+  {
+    path: "/business-services/:slug",
+    element: <OurServicesDetailPage />,
+  },
+  {
+    path: "/business-solution",
+    element: <BusinessSolution />,
+  },
+  {
+    path: "/business-solutions",
+    element: <BusinessSolution />,
+  },
+  {
+    path: "/business-solutions/:slug",
+    element: <BusinessSolutionsDetailPage />,
+  },
+  {
+    path: "/service-details/:serviceId",
+    element: <ManufacturingSolutionsDetailPage />,
+  },
+  {
+    path: "/services/:serviceId",
+    element: <DigitalSolutionsDetailPage />,
+  },
+  {
+    path: "/product/:productId",
+    element: <ProductDetailPage />,
+  },
+  {
+    path: "/careers/:jobId",
+    element: <JobDetailPage />,
+  },
+  {
+    path: "/generative-ai",
+    element: <GenAIDetailPage />,
+  },
+  //About & Contact Pages
+  {
+    path: "/about",
+    element: <AboutPage />,
+  },
+  {
+    path: "/contact",
+    element: <ContactPage />,
+  },
+  {
+    path: "/careers",
+    element: <CareersPage />,
+  },
+
+  //Press Release Pages
+  {
+    path: "/press-release",
+    element: <PressReleasePage />,
+  },
+
+  //News & Blogs Pages
+  // {
+  //   path: "/news-and-blogs-detail",
+  //   element: <NewsAndBlogsDetailPage />,
+  // },
+
+  //News & Blogs Detail Pages
+  // {
+  //   path: "/news-and-blogs",
+  //   element: <NewsAndBlogsPage />,
+  // },
+
+  //Policies Pages
+  {
+    path: "/privacy-policy",
+    element: <PrivacyPolicyPage />,
+  },
+  {
+    path: "/terms-and-conditions",
+    element: <TermsOfServicePage />,
+  },
+  {
+    path: "/cookies-policy",
+    element: <CookiePolicyPage />,
+  },
+  {
+    path: "/refund-policy",
+    element: <RefundPolicyPage />,
+  },
+
+  // 404 Not Found Page - This will catch all undefined routes
+  {
+    path: "*",
+    element: <NotFoundPage />,
+  },
+];
+
+export default routeConfig;
diff --git a/Tech4biz-Version01/Tech4biz/src/utils/AsyncComponent.jsx b/Tech4biz-Version01/Tech4biz/src/utils/AsyncComponent.jsx
new file mode 100644
index 0000000..06b0458
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/utils/AsyncComponent.jsx
@@ -0,0 +1,9 @@
+import React, { Suspense } from 'react';
+
+const AsyncComponent = ({ component: Component, fallback }) => (
+  <Suspense fallback={fallback}>
+    <Component />
+  </Suspense>
+);
+
+export default AsyncComponent;
\ No newline at end of file
diff --git a/Tech4biz-Version01/Tech4biz/src/utils/newsletterApi.js b/Tech4biz-Version01/Tech4biz/src/utils/newsletterApi.js
new file mode 100644
index 0000000..b31fea1
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/src/utils/newsletterApi.js
@@ -0,0 +1,76 @@
+/**
+ * Newsletter API utility functions
+ * Handles all API interactions related to newsletter subscriptions
+ */
+
+import { notification } from 'antd';
+
+// Updated base API URL using environment variable, matching jobsApi.js setup
+const API_URL = import.meta.env.PROD
+  ? 'https://career.tech4bizsolutions.com/api'
+  : '/api';
+
+// API endpoint for newsletter subscriptions
+const SUBSCRIPTION_ENDPOINT = `${API_URL}/subscribed-emails`;
+
+// API token for Strapi authorization
+const API_TOKEN = "Bearer 5ec9852ea1bc8c847f1670bc1688e51ab1e39bf979caa9e2116fc6729f93e7bbc6a5a554b512603cc194034168d021b35dc15dbff19fe826f988c1ef3fa74bdbdaf883ed909f6b567c1f075633b4841cc5ac4508d8f7f87e2fb4515f26dfb6f74439d3ebaac64c0a06a167af692e93d6a426a6262a4cf50e400107d9296cc5aa";
+
+/**
+ * Subscribe a user's email to the newsletter
+ * 
+ * @param {string} email - The email to subscribe
+ * @param {string} location - The location where the subscription was initiated
+ * @returns {Promise<boolean>} - True if subscription was successful, false otherwise
+ */
+export const subscribeToNewsletter = async (email, location) => {
+  try {
+    const response = await fetch(`${SUBSCRIPTION_ENDPOINT}?populate=*`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "Authorization": API_TOKEN
+      },
+      body: JSON.stringify({
+        "data": {
+          "SubscribedEmail": email,
+        }
+      }),
+    });
+
+    if (response.ok) {
+      notification.success({
+        message: 'Subscription Successful',
+        description: 'Thank you for subscribing to the Weekly Developer Digest!',
+        duration: 3,
+      });
+      return true;
+    } else {
+      const errorData = await response.json();
+      notification.error({
+        message: 'Subscription Failed',
+        description: errorData.error?.message || 'Something went wrong. Please try again.',
+        duration: 3,
+      });
+      return false;
+    }
+  } catch (error) {
+    console.error("Subscription error:", error);
+    notification.error({
+      message: 'Subscription Failed',
+      description: 'An error occurred while subscribing. Please try again.',
+      duration: 3,
+    });
+    return false;
+  }
+};
+
+/**
+ * Validate email format
+ * 
+ * @param {string} email - The email to validate
+ * @returns {boolean} - True if email format is valid, false otherwise
+ */
+export const validateEmail = (email) => {
+  return email && /^\S+@\S+\.\S+$/.test(email);
+};
diff --git a/Tech4biz-Version01/Tech4biz/tailwind.config.js b/Tech4biz-Version01/Tech4biz/tailwind.config.js
new file mode 100644
index 0000000..e2fa6de
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/tailwind.config.js
@@ -0,0 +1,30 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        light: {
+          primaryBg: '#1B1B1B',
+          primaryText: '#FFFFFF',
+          secondaryText: '#5F5F5F',
+          primaryAccent: "#F97316",
+          primaryHoverColor: "#ed7f32",
+          primaryLabel: "#A3E635"
+        },
+        dark: {
+          primaryBg: '#F3F4F6',
+          primaryText: '#000000',
+          secondaryText: '#6B7280',
+          primaryAccent: "#2563EB",
+          primaryHoverColor: "#ed7f32",
+          primaryLabel: "#A3E635"
+        },
+      },
+    },
+  },
+  plugins: [],
+}
diff --git a/Tech4biz-Version01/Tech4biz/vite.config.js b/Tech4biz-Version01/Tech4biz/vite.config.js
new file mode 100644
index 0000000..4e51139
--- /dev/null
+++ b/Tech4biz-Version01/Tech4biz/vite.config.js
@@ -0,0 +1,52 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@pages': path.resolve(__dirname, './src/pages'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+      '@hooks': path.resolve(__dirname, './src/hooks'),
+    },
+  },
+  server: {
+    proxy: {
+      '/api/job': {
+        target: 'https://career.tech4bizsolutions.com',
+        changeOrigin: true,
+        secure: false,
+      },
+      '/api/jobdataa': {
+        target: 'https://career.tech4bizsolutions.com',
+        changeOrigin: true,
+        secure: false,
+      },
+      '/api/candidate-applications': {
+        target: 'https://career.tech4bizsolutions.com',
+        changeOrigin: true,
+        secure: false,
+      },
+      '/api/upload': {
+        target: 'https://career.tech4bizsolutions.com',
+        changeOrigin: true,
+        secure: false,
+      },
+      '/api/subscribed-emails': {
+        target: 'https://career.tech4bizsolutions.com',
+        changeOrigin: true,
+        secure: false,
+      },
+      '/api/contact-forms': {
+        target: 'https://career.tech4bizsolutions.com',
+        changeOrigin: true,
+        secure: false,
+      },
+    },
+  },
+})
diff --git a/certificates/localhost-key.pem b/certificates/localhost-key.pem
new file mode 100644
index 0000000..586fab5
--- /dev/null
+++ b/certificates/localhost-key.pem
@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQC0yxzB1wr+alBS
+BI5uWzp/u4/V9jkt/QFPMC2MLWyanemD50hDBRs0lZxmiYoLHqUDWZNPg/jdSj8d
+VV+bcjdpfIH8s95TewTovG/szuGLZpu33DFSi/WB/1mulS2qflW/5A4h/3XgrgU6
+Zze1sEvGBHEzI/obBkt/pebmt0AUruYlUonQW23JWLaLCsjTd9kMVGpqG8mRreaH
+N3sYCEMKa3flyucToEA32OYXLkuQgmgs5txcdGXQp/0ELstoxzvTNdJcCyBSZ2V8
+5JzR/yt58MXjH6xcHq3VYEOqvGOmuGmbZxa6QfevGml7ivO0FWjHneSnnCFm5kKs
+rehy+uZNAgMBAAECggEAQrABJYca6QlyIy7HEvHXvDIFNlkiclI232zYADLpMoc5
+EYyIXSBPDrB5BmGJZ9yf5YJvEg+OBqJScZGCOKaCxghFMl9ujMB96RNI/cK581+f
+5Mv17YruvkrgW8NvGsqK+sM2a1f9tSi7iPV12TD0YlBVKRYGNV23D5i0eTnzCy1x
+JruG5088zPnLoDy8T9WRTfYEnqXFxQscsTyDF9+2rZ+Vyr2YHxIt55w7IIrHFiUR
+OczY4UJhmMIF0grddHNaTrjxtjAhCR+ysKq+qLs8QLZf2uXz3RawIohe7Rbl47D0
+E3R6fD3AeeLmc3wokz40s8RO8BV0ce6iWiH56i8uiQKBgQDq+NXy2vUXLM3CTYHB
+onUmJbWybmyN4g7aJLHcoPzhVonr5e/cToh/uWqmDGcQlo7iNS9TZh23VdpaUbn0
+ZEm2y0GhPA9K1WJl20F+NQT8/HPF4pdBdAr8fUSjDpqi61+AYTr0W/pGD1pFp60S
+H+kxd/BjrbPEKZVR39Kn9pMJ7wKBgQDE+Q4T02IvmJjXdOqjz1SnC5CQfzpb1AqJ
+3xFGZTlFuy9uXY+9I5KVlfssMD8MXv+UzjQruk0/W8dnDdxvf35xi3z8zIQSDJxU
+frJQB/qH/xoVnPgBe9eoAxus68p16ymONqEnNfjwmGhjeADpcV22uqVn2lMP9gN7
+sGiVhWU/gwKBgQDqs/9RA3DI41HrgWvYtKN7pTMmtbHszx6yuvCGRrARjVVasmSy
+lCc4HUbv8XeJVDoIrcNF9Lw+Ap2Glhe+i+Ytlj1KBinoP9h3kViL7f27jZc+1CTt
+ljHbHm1OyimgDqdoHra6mp0VGgS7is8PSZyucvVFO55SlI64J2/NojghNQKBgH8I
+CFYs65O6nEfH9VNz8SpSQQePpfl3BNzp6eA2g/s+v1Y0LPFUMcMbGQPkkaTO15IG
+cosI+ay06iLCQ7n8xXVA+ninBT4GuAOeOi13F9IBabcqpp9+WRTX/E9HOilWYlR/
+UutQ2Z2BDUGpMR1cqY2hTe9uVEdk59YrbSeRAj01AoGAU34mB2IROZEytgHwpcde
+upFIEizd80UVemoKU8pF2/9XgXDTHjSC9c4NF4WSmAWQsIcXpJaCkDyr+qNhO6zz
+/acU3HYaCB6zL/TEUme2D6suF6r6jxL/Dplh3rSunODbWJnb7doyonp+vuYXRuvE
+8K/7IqtqgiDXoTK8fqc5ArM=
+-----END PRIVATE KEY-----
diff --git a/certificates/localhost.pem b/certificates/localhost.pem
new file mode 100644
index 0000000..d1a8fb3
--- /dev/null
+++ b/certificates/localhost.pem
@@ -0,0 +1,25 @@
+-----BEGIN CERTIFICATE-----
+MIIEOTCCAqGgAwIBAgIQbxETXs1CjgYgD/b+KdTWeDANBgkqhkiG9w0BAQsFADB5
+MR4wHAYDVQQKExVta2NlcnQgZGV2ZWxvcG1lbnQgQ0ExJzAlBgNVBAsMHmNvbXBA
+Y29tcC1PcHRpUGxleC0zMDYwIChDT01QKTEuMCwGA1UEAwwlbWtjZXJ0IGNvbXBA
+Y29tcC1PcHRpUGxleC0zMDYwIChDT01QKTAeFw0yNDExMTgxMTEzMjRaFw0yNzAy
+MTgxMTEzMjRaMFIxJzAlBgNVBAoTHm1rY2VydCBkZXZlbG9wbWVudCBjZXJ0aWZp
+Y2F0ZTEnMCUGA1UECwweY29tcEBjb21wLU9wdGlQbGV4LTMwNjAgKENPTVApMIIB
+IjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAtMscwdcK/mpQUgSObls6f7uP
+1fY5Lf0BTzAtjC1smp3pg+dIQwUbNJWcZomKCx6lA1mTT4P43Uo/HVVfm3I3aXyB
+/LPeU3sE6Lxv7M7hi2abt9wxUov1gf9ZrpUtqn5Vv+QOIf914K4FOmc3tbBLxgRx
+MyP6GwZLf6Xm5rdAFK7mJVKJ0FttyVi2iwrI03fZDFRqahvJka3mhzd7GAhDCmt3
+5crnE6BAN9jmFy5LkIJoLObcXHRl0Kf9BC7LaMc70zXSXAsgUmdlfOSc0f8refDF
+4x+sXB6t1WBDqrxjprhpm2cWukH3rxppe4rztBVox53kp5whZuZCrK3ocvrmTQID
+AQABo2QwYjAOBgNVHQ8BAf8EBAMCBaAwEwYDVR0lBAwwCgYIKwYBBQUHAwEwHwYD
+VR0jBBgwFoAUESjQ1/iXrVC2pXmwsifWkOsW1JYwGgYDVR0RBBMwEYIJbG9jYWxo
+b3N0hwR/AAABMA0GCSqGSIb3DQEBCwUAA4IBgQCCXjtWpgqhWL6kxuHpc2Mi7/Qn
+GDQFsgxJg5ydLJbvgglf2+IocGEro4IfU1xIbfT3gsoTbbl2SERq/jrhBzQzrFh6
+rdrpRfuXAI2/bubPmO3gbPAx0P0yf0ADpwIrxQKqy+sWipMdVaFef644MK+C6jHx
+9LOpo48WQWXkbd/wFPVyU0XIcofjTaB41ITPUuAk+/rMyBCGcUSZvDgsMo0Aguf6
+8oO+bk6v2jBORkcel0FAWOaK9IIrG6vg1w1A5OWI0whCDsV01Zty7vqdRibTKb00
+yswGas/nTZCIcaPnZ9pBLwUvzwsJrlsB9xEjASu4TlOGxbXOQI1d0kbvyZDLsR8A
+/jmQT/UPXpUhIrxeYTQugco8w3K1r8SXPp5bHVgdj7aAt+vv68xlujkKN/FKlOii
+rfc1IqH5YKQ0a9LO8wm4XAI9RxXubt6Of/hdlwPeJA2BTG2PmaDwYWZSpN0YnCul
+sOkAe0EWYwFN3iga7JqsyhQVTzQH0ChHIYa+dBQ=
+-----END CERTIFICATE-----
diff --git a/eslint.config.js b/eslint.config.js
new file mode 100644
index 0000000..238d2e4
--- /dev/null
+++ b/eslint.config.js
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c0968f8
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tech4biz-Update</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..852585c
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6440 @@
+{
+  "name": "tech4biz-update",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "tech4biz-update",
+      "version": "0.0.0",
+      "dependencies": {
+        "@react-spring/web": "^9.7.5",
+        "@tanstack/react-virtual": "^3.10.9",
+        "@types/react-window": "^1.8.8",
+        "embla-carousel-react": "^8.5.1",
+        "framer-motion": "^11.11.17",
+        "gsap": "^3.12.5",
+        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
+        "lucide-react": "^0.454.0",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-error-boundary": "^4.1.2",
+        "react-feather": "^2.0.10",
+        "react-helmet": "^6.1.0",
+        "react-helmet-async": "^2.0.5",
+        "react-icons": "^5.3.0",
+        "react-intersection-observer": "^9.13.1",
+        "react-router-dom": "^6.28.0",
+        "react-swipeable": "^7.0.2",
+        "react-virtuoso": "^4.12.0",
+        "react-window": "^1.8.10",
+        "recharts": "^2.13.3",
+        "split-type": "^0.3.4"
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.13.0",
+        "@tailwindcss/forms": "^0.5.9",
+        "@tailwindcss/typography": "^0.5.15",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
+        "@vitejs/plugin-basic-ssl": "^1.1.0",
+        "@vitejs/plugin-react": "^4.3.3",
+        "autoprefixer": "^10.4.20",
+        "eslint": "^9.13.0",
+        "eslint-plugin-react": "^7.37.2",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.14",
+        "globals": "^15.11.0",
+        "postcss": "^8.4.47",
+        "tailwindcss": "^3.4.14",
+        "vite": "^5.4.10",
+        "vite-plugin-compression": "^0.5.1"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
+      "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
+      "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.2.0",
+        "@babel/code-frame": "^7.26.0",
+        "@babel/generator": "^7.26.0",
+        "@babel/helper-compilation-targets": "^7.25.9",
+        "@babel/helper-module-transforms": "^7.26.0",
+        "@babel/helpers": "^7.26.0",
+        "@babel/parser": "^7.26.0",
+        "@babel/template": "^7.25.9",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+      "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.26.2",
+        "@babel/types": "^7.26.0",
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.25",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.25.9.tgz",
+      "integrity": "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/compat-data": "^7.25.9",
+        "@babel/helper-validator-option": "^7.25.9",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz",
+      "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz",
+      "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "@babel/traverse": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz",
+      "integrity": "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz",
+      "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz",
+      "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.26.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.25.9.tgz",
+      "integrity": "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.25.9.tgz",
+      "integrity": "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
+      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "license": "MIT",
+      "dependencies": {
+        "regenerator-runtime": "^0.14.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.25.9.tgz",
+      "integrity": "sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.25.9",
+        "@babel/generator": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.25.9",
+        "debug": "^4.3.1",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
+      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz",
+      "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/eslint-utils/node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
+      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
+      "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.4",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.2"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
+      "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
+      "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.12.4",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
+      "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.4.tgz",
+      "integrity": "sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz",
+      "integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.6",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz",
+      "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz",
+      "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.0.tgz",
+      "integrity": "sha512-xnRgu9DxZbkWak/te3fcytNyp8MTbuiZIaueg2rgEvBuN55n04nwLYLU9TX/VVlusc9L2ZNXi99nUFNkHXtr5g==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
+      "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.21.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz",
+      "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz",
+      "integrity": "sha512-ufb2CH2KfBWPJok95frEZZ82LtDl0A6QKTa8MoM+cWwDZvVGl5/jNb79pIhRvAalUu+7LD91VYR0nwRD799HkQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.3.tgz",
+      "integrity": "sha512-iAHpft/eQk9vkWIV5t22V77d90CRofgR2006UiCjHcHJFVI1E0oBkQIAbz+pLtthFw3hWEmVB4ilxGyBf48i2Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.3.tgz",
+      "integrity": "sha512-QPW2YmkWLlvqmOa2OwrfqLJqkHm7kJCIMq9kOz40Zo9Ipi40kf9ONG5Sz76zszrmIZZ4hgRIkez69YnTHgEz1w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.3.tgz",
+      "integrity": "sha512-KO0pN5x3+uZm1ZXeIfDqwcvnQ9UEGN8JX5ufhmgH5Lz4ujjZMAnxQygZAVGemFWn+ZZC0FQopruV4lqmGMshow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.3.tgz",
+      "integrity": "sha512-CsC+ZdIiZCZbBI+aRlWpYJMSWvVssPuWqrDy/zi9YfnatKKSLFCe6fjna1grHuo/nVaHG+kiglpRhyBQYRTK4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.3.tgz",
+      "integrity": "sha512-F0nqiLThcfKvRQhZEzMIXOQG4EeX61im61VYL1jo4eBxv4aZRmpin6crnBJQ/nWnCsjH5F6J3W6Stdm0mBNqBg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.3.tgz",
+      "integrity": "sha512-KRSFHyE/RdxQ1CSeOIBVIAxStFC/hnBgVcaiCkQaVC+EYDtTe4X7z5tBkFyRoBgUGtB6Xg6t9t2kulnX6wJc6A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.3.tgz",
+      "integrity": "sha512-h6Q8MT+e05zP5BxEKz0vi0DhthLdrNEnspdLzkoFqGwnmOzakEHSlXfVyA4HJ322QtFy7biUAVFPvIDEDQa6rw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.3.tgz",
+      "integrity": "sha512-fKElSyXhXIJ9pqiYRqisfirIo2Z5pTTve5K438URf08fsypXrEkVmShkSfM8GJ1aUyvjakT+fn2W7Czlpd/0FQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.3.tgz",
+      "integrity": "sha512-YlddZSUk8G0px9/+V9PVilVDC6ydMz7WquxozToozSnfFK6wa6ne1ATUjUvjin09jp34p84milxlY5ikueoenw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.3.tgz",
+      "integrity": "sha512-yNaWw+GAO8JjVx3s3cMeG5Esz1cKVzz8PkTJSfYzE5u7A+NvGmbVFEHP+BikTIyYWuz0+DX9kaA3pH9Sqxp69g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.3.tgz",
+      "integrity": "sha512-lWKNQfsbpv14ZCtM/HkjCTm4oWTKTfxPmr7iPfp3AHSqyoTz5AgLemYkWLwOBWc+XxBbrU9SCokZP0WlBZM9lA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.3.tgz",
+      "integrity": "sha512-HoojGXTC2CgCcq0Woc/dn12wQUlkNyfH0I1ABK4Ni9YXyFQa86Fkt2Q0nqgLfbhkyfQ6003i3qQk9pLh/SpAYw==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.3.tgz",
+      "integrity": "sha512-mnEOh4iE4USSccBOtcrjF5nj+5/zm6NcNhbSEfR3Ot0pxBwvEn5QVUXcuOwwPkapDtGZ6pT02xLoPaNv06w7KQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.3.tgz",
+      "integrity": "sha512-rMTzawBPimBQkG9NKpNHvquIUTQPzrnPxPbCY1Xt+mFkW7pshvyIS5kYgcf74goxXOQk0CP3EoOC1zcEezKXhw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.3.tgz",
+      "integrity": "sha512-2lg1CE305xNvnH3SyiKwPVsTVLCg4TmNCF1z7PSHX2uZY2VbUpdkgAllVoISD7JO7zu+YynpWNSKAtOrX3AiuA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.3.tgz",
+      "integrity": "sha512-9SjYp1sPyxJsPWuhOCX6F4jUMXGbVVd5obVpoVEi8ClZqo52ViZewA6eFz85y8ezuOA+uJMP5A5zo6Oz4S5rVQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.3.tgz",
+      "integrity": "sha512-HGZgRFFYrMrP3TJlq58nR1xy8zHKId25vhmm5S9jETEfDf6xybPxsavFTJaufe2zgOGYJBskGlj49CwtEuFhWQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.9",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz",
+      "integrity": "sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20"
+      }
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
+      "integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
+      }
+    },
+    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.10.9.tgz",
+      "integrity": "sha512-OXO2uBjFqA4Ibr2O3y0YMnkrRWGVNqcvHQXmGvMu6IK8chZl3PrDxFXdGZ2iZkSrKh3/qUYoFqYe+Rx23RoU0g==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.10.9"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz",
+      "integrity": "sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.6.8",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
+      "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.20.6",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
+      "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.20.7"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "22.9.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz",
+      "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~6.19.8"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.13",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
+      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/react-window": {
+      "version": "1.8.8",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
+      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@vitejs/plugin-basic-ssl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz",
+      "integrity": "sha512-wO4Dk/rm8u7RNhOf95ZzcEmC9rYOncYgvq4z3duaJrCgjN8BxAnDVyndanfcJZ0O6XZzHz6Q0hTimxTg8Y9g/A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.6.0"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.3.tgz",
+      "integrity": "sha512-NooDe9GpHGqNns1i8XDERg0Vsg5SSYRhRxxyTGogUdkdNt47jal+fbuYi+Yfq6pzRCKXyoPcWisfxE6RIM3GKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.25.2",
+        "@babel/plugin-transform-react-jsx-self": "^7.24.7",
+        "@babel/plugin-transform-react-jsx-source": "^7.24.7",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.14.2"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
+      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
+      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/array-buffer-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.1.tgz",
+      "integrity": "sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "is-array-buffer": "^3.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array-includes": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
+      "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.2.tgz",
+      "integrity": "sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.2.tgz",
+      "integrity": "sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/arraybuffer.prototype.slice": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.3.tgz",
+      "integrity": "sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.22.3",
+        "es-errors": "^1.2.1",
+        "get-intrinsic": "^1.2.3",
+        "is-array-buffer": "^3.0.4",
+        "is-shared-array-buffer": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/available-typed-arrays": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
+      "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.24.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
+      "integrity": "sha512-ZIc+Q62revdMcqC6aChtW4jz3My3klmCO1fEmINZY/8J3EpBg5/A/D0AKmBveUh6pgoeycoMkVMko84tuYS+Gg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001669",
+        "electron-to-chromium": "^1.5.41",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.1"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "set-function-length": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001677",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
+      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/data-view-buffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.1.tgz",
+      "integrity": "sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.1.tgz",
+      "integrity": "sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/data-view-byte-offset": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.0.tgz",
+      "integrity": "sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-data-view": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/define-data-property": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
+      "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/define-properties": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
+      "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.0.1",
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.50",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.50.tgz",
+      "integrity": "sha512-eMVObiUQ2LdgeO1F/ySTXsvqvxb6ZH2zPGaMYsWzRDdOddUa77tdmI0ltg+L16UpbWdhPmuF3wIQYyQq65WfZw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/embla-carousel": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.5.1.tgz",
+      "integrity": "sha512-JUb5+FOHobSiWQ2EJNaueCNT/cQU9L6XWBbWmorWPQT9bkbk+fhsuLr8wWrzXKagO3oWszBO7MSx+GfaRk4E6A==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.5.1.tgz",
+      "integrity": "sha512-z9Y0K84BJvhChXgqn2CFYbfEi6AwEr+FFVVKm/MqbTQ2zIzO1VQri6w67LcfpVF0AjbhwVMywDZqY4alYkjW5w==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.5.1",
+        "embla-carousel-reactive-utils": "8.5.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.5.1.tgz",
+      "integrity": "sha512-n7VSoGIiiDIc4MfXF3ZRTO59KDp820QDuyBDGlt5/65+lumPHxX2JLz0EZ23hZ4eg4vZGUXwMkYv02fw2JVo/A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.5.1"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/es-abstract": {
+      "version": "1.23.3",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
+      "integrity": "sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-buffer-byte-length": "^1.0.1",
+        "arraybuffer.prototype.slice": "^1.0.3",
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "data-view-buffer": "^1.0.1",
+        "data-view-byte-length": "^1.0.1",
+        "data-view-byte-offset": "^1.0.0",
+        "es-define-property": "^1.0.0",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-set-tostringtag": "^2.0.3",
+        "es-to-primitive": "^1.2.1",
+        "function.prototype.name": "^1.1.6",
+        "get-intrinsic": "^1.2.4",
+        "get-symbol-description": "^1.0.2",
+        "globalthis": "^1.0.3",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.2",
+        "internal-slot": "^1.0.7",
+        "is-array-buffer": "^3.0.4",
+        "is-callable": "^1.2.7",
+        "is-data-view": "^1.0.1",
+        "is-negative-zero": "^2.0.3",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.3",
+        "is-string": "^1.0.7",
+        "is-typed-array": "^1.1.13",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.13.1",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.5",
+        "regexp.prototype.flags": "^1.5.2",
+        "safe-array-concat": "^1.1.2",
+        "safe-regex-test": "^1.0.3",
+        "string.prototype.trim": "^1.2.9",
+        "string.prototype.trimend": "^1.0.8",
+        "string.prototype.trimstart": "^1.0.8",
+        "typed-array-buffer": "^1.0.2",
+        "typed-array-byte-length": "^1.0.1",
+        "typed-array-byte-offset": "^1.0.2",
+        "typed-array-length": "^1.0.6",
+        "unbox-primitive": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/es-define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
+      "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.1.0.tgz",
+      "integrity": "sha512-/SurEfycdyssORP/E+bj4sEu1CWw4EmLDsHynHwSXQ7utgbrMRWW195pTrCjFgFCddf/UkYm3oqKPRq5i8bJbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.0.3",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "globalthis": "^1.0.4",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.0.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.7",
+        "iterator.prototype": "^1.1.3",
+        "safe-array-concat": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
+      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.2.tgz",
+      "integrity": "sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.0"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.14.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
+      "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.18.0",
+        "@eslint/core": "^0.7.0",
+        "@eslint/eslintrc": "^3.1.0",
+        "@eslint/js": "9.14.0",
+        "@eslint/plugin-kit": "^0.2.0",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.0",
+        "@types/estree": "^1.0.6",
+        "@types/json-schema": "^7.0.15",
+        "ajv": "^6.12.4",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.2.0",
+        "eslint-visitor-keys": "^4.2.0",
+        "espree": "^10.3.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3",
+        "text-table": "^0.2.0"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.37.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.2.tgz",
+      "integrity": "sha512-EsTAnj9fLVr/GZleBLFbj/sSuXeWmp1eXIN60ceYnZveqEaUCyW4X+Vh4WTdUhCkW4xutXYqTXCUSyqD4rB75w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.2",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.1.0",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.8",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.0",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.11",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz",
+      "integrity": "sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.14",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.14.tgz",
+      "integrity": "sha512-aXvzCTK7ZBv1e7fahFuR3Z/fyQQSIQ711yPgYRj+Oj64tyTgO4iQIDmYXDBqvSWQ/FA4OSCsXOStlF+noU0/NA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=7"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
+      "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
+      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.14.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/esquery": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
+      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/find-up": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
+      "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^6.0.0",
+        "path-exists": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
+      "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
+      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "11.11.17",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.6.tgz",
+      "integrity": "sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "functions-have-names": "^1.2.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
+      "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
+      "integrity": "sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/glob/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/glob/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/globals": {
+      "version": "15.11.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-15.11.0.tgz",
+      "integrity": "sha512-yeyNSjdbyVaWurlwCpcA6XNBrHTMIeDdj0/hnvX/OLJ9ekOXYbLsLinH/MucQyGvNnXhidTdNhTtJaffL2sMfw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globalthis": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
+      "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "gopd": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==",
+      "license": "Standard 'no charge' license: https://gsap.com/standard-license. Club GSAP members get more: https://gsap.com/licensing/. Why GreenSock doesn't employ an MIT license: https://gsap.com/why-license/"
+    },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
+      "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-define-property": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
+      "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/ignore": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+      "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/internal-slot": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
+      "integrity": "sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "hasown": "^2.0.0",
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
+    "node_modules/is-array-buffer": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
+      "integrity": "sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-async-function": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
+      "integrity": "sha512-Y1JXKrfykRJGdlDwdKlLpLyMIiWqWvuSd17TvZk68PLAOGOoF4Xyav1z0Xhoi+gCYjZVeC5SI+hYFOfvXmGRCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
+      "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
+      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-view": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.1.tgz",
+      "integrity": "sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-date-object": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
+      "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-finalizationregistry": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.0.2.tgz",
+      "integrity": "sha512-0by5vtUJs8iFQb5TYUHHPudOR+qXYIMKtiUzvLIZITZUjknFmziyBJuLhVRc+Ds0dREFlskDNJKYIdIzu/9pfw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-generator-function": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
+      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-map": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
+      "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-negative-zero": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz",
+      "integrity": "sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-regex": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-set": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
+      "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.3.tgz",
+      "integrity": "sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-typed-array": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.13.tgz",
+      "integrity": "sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "which-typed-array": "^1.1.14"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakmap": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
+      "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-weakset": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.3.tgz",
+      "integrity": "sha512-LvIm3/KWzS9oRFHugab7d+M/GcBXuXX5xZkzPmN+NxihdQlZUQ4dWuSV1xR/sq6upL1TJEDrfBgRepHFdBtSNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
+      "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.3.tgz",
+      "integrity": "sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.2.1",
+        "get-intrinsic": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "reflect.getprototypeof": "^1.0.4",
+        "set-function-name": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
+      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jsesc": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
+      "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.454.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
+      "integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/memoize-one": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
+      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
+      "license": "MIT"
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/object-inspect": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
+      "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.5.tgz",
+      "integrity": "sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.5",
+        "define-properties": "^1.2.1",
+        "has-symbols": "^1.0.3",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.entries": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz",
+      "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.0.tgz",
+      "integrity": "sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/p-limit": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
+      "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "yocto-queue": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
+      "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-limit": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
+      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0"
+    },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/path-scurry/node_modules/lru-cache": {
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
+      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/possible-typed-array-names": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
+      "integrity": "sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-import/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-error-boundary": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz",
+      "integrity": "sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-feather": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/react-feather/-/react-feather-2.0.10.tgz",
+      "integrity": "sha512-BLhukwJ+Z92Nmdcs+EMw6dy1Z/VLiJTzEQACDUEnWMClhYnFykJCGWQx+NmwP/qQHGX/5CzQ+TGi8ofg2+HzVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.6"
+      }
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.3.0.tgz",
+      "integrity": "sha512-DnUk8aFbTyQPSkCfF8dbX6kQjXA9DktMeJqfjrg6cK9vwQVMxmcA3BfP4QoiztVmEHtwlTgLFsPuH2NskKT6eg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/react-intersection-observer": {
+      "version": "9.13.1",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.13.1.tgz",
+      "integrity": "sha512-tSzDaTy0qwNPLJHg8XZhlyHTgGW6drFKTtvjdL+p6um12rcnp8Z5XstE+QNBJ7c64n5o0Lj4ilUleA41bmDoMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-refresh": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
+      "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-router": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
+      "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.21.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.28.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz",
+      "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.21.0",
+        "react-router": "6.28.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-smooth": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-swipeable": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/react-swipeable/-/react-swipeable-7.0.2.tgz",
+      "integrity": "sha512-v1Qx1l+aC2fdxKa9aKJiaU/ZxmJ5o98RMoFwUqAAzVWUcxgfHFXDDruCKXhw6zIYXm6V64JiHgP9f6mlME5l8w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.3 || ^17 || ^18 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
+    "node_modules/react-virtuoso": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/react-virtuoso/-/react-virtuoso-4.12.0.tgz",
+      "integrity": "sha512-oHrKlU7xHsrnBQ89ecZoMPAK0tHnI9s1hsFW3KKg5ZGeZ5SWvbGhg/QFJFY4XETAzoCUeu+Xaxn1OUb/PGtPlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16 || >=17 || >= 18",
+        "react-dom": ">=16 || >=17 || >= 18"
+      }
+    },
+    "node_modules/react-window": {
+      "version": "1.8.10",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
+      "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "2.13.3",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.13.3.tgz",
+      "integrity": "sha512-YDZ9dOfK9t3ycwxgKbrnDlRC4BHdjlY73fet3a0C1+qGMjXVZe6+VXmpOIIhzkje5MMEL8AN4hLIe4AMskBzlA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^18.3.1",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "license": "MIT",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "license": "MIT"
+    },
+    "node_modules/reflect.getprototypeof": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
+      "integrity": "sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.1",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "globalthis": "^1.0.3",
+        "which-builtin-type": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.14.1",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
+      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
+      "license": "MIT"
+    },
+    "node_modules/regexp.prototype.flags": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.3.tgz",
+      "integrity": "sha512-vqlC04+RQoFalODCbCumG2xIOvapzVMHwsyIGM/SIE8fRhFFsXeH8/QQ+s0T0kDAhKc4k30s73/0ydkHQz6HlQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-errors": "^1.3.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "2.0.0-next.5",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz",
+      "integrity": "sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.24.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.3.tgz",
+      "integrity": "sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.6"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.24.3",
+        "@rollup/rollup-android-arm64": "4.24.3",
+        "@rollup/rollup-darwin-arm64": "4.24.3",
+        "@rollup/rollup-darwin-x64": "4.24.3",
+        "@rollup/rollup-freebsd-arm64": "4.24.3",
+        "@rollup/rollup-freebsd-x64": "4.24.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.24.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.24.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.24.3",
+        "@rollup/rollup-linux-arm64-musl": "4.24.3",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.24.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.24.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.24.3",
+        "@rollup/rollup-linux-x64-gnu": "4.24.3",
+        "@rollup/rollup-linux-x64-musl": "4.24.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.24.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.24.3",
+        "@rollup/rollup-win32-x64-msvc": "4.24.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/safe-array-concat": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.2.tgz",
+      "integrity": "sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "get-intrinsic": "^1.2.4",
+        "has-symbols": "^1.0.3",
+        "isarray": "^2.0.5"
+      },
+      "engines": {
+        "node": ">=0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/safe-regex-test": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.3.tgz",
+      "integrity": "sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.6",
+        "es-errors": "^1.3.0",
+        "is-regex": "^1.1.4"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/set-function-length": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
+      "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/set-function-name": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
+      "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-errors": "^1.3.0",
+        "functions-have-names": "^1.2.3",
+        "has-property-descriptors": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/side-channel": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
+      "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.4",
+        "object-inspect": "^1.13.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-type": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/split-type/-/split-type-0.3.4.tgz",
+      "integrity": "sha512-otEk9vnD8qwfLsk3Lx0gz+qRkNIJCx0mlyL47ImP/DjMuV39d75Lpfwjn9fHteDRz0aoOblSzQjSNT9+Sswxcg==",
+      "license": "ISC"
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
+      "integrity": "sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.4",
+        "gopd": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.7",
+        "regexp.prototype.flags": "^1.5.2",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
+    "node_modules/string.prototype.trim": {
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.9.tgz",
+      "integrity": "sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.0",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.8.tgz",
+      "integrity": "sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
+      "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
+      "integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/typed-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "es-errors": "^1.3.0",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/typed-array-byte-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.1.tgz",
+      "integrity": "sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-byte-offset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.2.tgz",
+      "integrity": "sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/typed-array-length": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.6.tgz",
+      "integrity": "sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-proto": "^1.0.3",
+        "is-typed-array": "^1.1.13",
+        "possible-typed-array-names": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
+      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.0"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.10",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.10.tgz",
+      "integrity": "sha512-1hvaPshuPUtxeQ0hsVH3Mud0ZanOLwVTneA1EgbAM5LhaZEqyPWGRQ7BtaMvUrTDeEaC8pxtj6a6jku3x4z6SQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-compression": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
+      "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "debug": "^4.3.3",
+        "fs-extra": "^10.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-builtin-type": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.1.4.tgz",
+      "integrity": "sha512-bppkmBSsHFmIMSl8BO9TbsyzsvGjVoppt8xUiGzwiu/bhDCGxnpOKCxgqj6GuyHE0mINMDecBFPlOm2hzY084w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function.prototype.name": "^1.1.6",
+        "has-tostringtag": "^1.0.2",
+        "is-async-function": "^2.0.0",
+        "is-date-object": "^1.0.5",
+        "is-finalizationregistry": "^1.0.2",
+        "is-generator-function": "^1.0.10",
+        "is-regex": "^1.1.4",
+        "is-weakref": "^1.0.2",
+        "isarray": "^2.0.5",
+        "which-boxed-primitive": "^1.0.2",
+        "which-collection": "^1.0.2",
+        "which-typed-array": "^1.1.15"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-collection": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
+      "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-map": "^2.0.3",
+        "is-set": "^2.0.3",
+        "is-weakmap": "^2.0.2",
+        "is-weakset": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/which-typed-array": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.15.tgz",
+      "integrity": "sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "available-typed-arrays": "^1.0.7",
+        "call-bind": "^1.0.7",
+        "for-each": "^0.3.3",
+        "gopd": "^1.0.1",
+        "has-tostringtag": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/yaml": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.6.0.tgz",
+      "integrity": "sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/yocto-queue": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
+      "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..fb69664
--- /dev/null
+++ b/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "tech4biz-update",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@react-spring/web": "^9.7.5",
+    "@tanstack/react-virtual": "^3.10.9",
+    "@types/react-window": "^1.8.8",
+    "embla-carousel-react": "^8.5.1",
+    "framer-motion": "^11.11.17",
+    "gsap": "^3.12.5",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "lucide-react": "^0.454.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-error-boundary": "^4.1.2",
+    "react-feather": "^2.0.10",
+    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
+    "react-icons": "^5.3.0",
+    "react-intersection-observer": "^9.13.1",
+    "react-router-dom": "^6.28.0",
+    "react-swipeable": "^7.0.2",
+    "react-virtuoso": "^4.12.0",
+    "react-window": "^1.8.10",
+    "recharts": "^2.13.3",
+    "split-type": "^0.3.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-basic-ssl": "^1.1.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
+    "vite": "^5.4.10",
+    "vite-plugin-compression": "^0.5.1"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/public/vite.svg b/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 0000000..aabb7db
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { 
+  createBrowserRouter,
+  RouterProvider,
+  createRoutesFromElements,
+  Route
+} from 'react-router-dom';
+import { HelmetProvider } from 'react-helmet-async';
+import Home from './pages/Home';
+import Services from './pages/ServicePage';
+
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <>
+      <Route path="/" element={<Home />} />
+      <Route path="/services" element={<Services />} />
+    </>
+  ),
+  {
+    future: {
+      v7_startTransition: true,
+      v7_relativeSplatPath: true,
+      v7_fetcherPersist: true,
+      v7_normalizeFormMethod: true,
+      v7_partialHydration: true,
+      v7_skipActionErrorRevalidation: true
+    }
+  }
+);
+
+const App = () => {
+  return (
+    <HelmetProvider>
+      <RouterProvider router={router} />
+    </HelmetProvider>
+  );
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/assets/AI-service.webp b/src/assets/AI-service.webp
new file mode 100644
index 0000000..c402995
Binary files /dev/null and b/src/assets/AI-service.webp differ
diff --git a/src/assets/Case Studies Slider/3D-Visual-Img.webp b/src/assets/Case Studies Slider/3D-Visual-Img.webp
new file mode 100644
index 0000000..6532a25
Binary files /dev/null and b/src/assets/Case Studies Slider/3D-Visual-Img.webp differ
diff --git a/src/assets/Case Studies Slider/automating.webp b/src/assets/Case Studies Slider/automating.webp
new file mode 100644
index 0000000..008aeb2
Binary files /dev/null and b/src/assets/Case Studies Slider/automating.webp differ
diff --git a/src/assets/Case Studies Slider/decentralized-banner.webp b/src/assets/Case Studies Slider/decentralized-banner.webp
new file mode 100644
index 0000000..858e30e
Binary files /dev/null and b/src/assets/Case Studies Slider/decentralized-banner.webp differ
diff --git a/src/assets/Case Studies Slider/empower.webp b/src/assets/Case Studies Slider/empower.webp
new file mode 100644
index 0000000..fa55853
Binary files /dev/null and b/src/assets/Case Studies Slider/empower.webp differ
diff --git a/src/assets/Case Studies Slider/fitness.webp b/src/assets/Case Studies Slider/fitness.webp
new file mode 100644
index 0000000..8968d7e
Binary files /dev/null and b/src/assets/Case Studies Slider/fitness.webp differ
diff --git a/src/assets/Case Studies Slider/iotconnecctivity.webp b/src/assets/Case Studies Slider/iotconnecctivity.webp
new file mode 100644
index 0000000..e688329
Binary files /dev/null and b/src/assets/Case Studies Slider/iotconnecctivity.webp differ
diff --git a/src/assets/Case Studies Slider/transforming-blockchain.webp b/src/assets/Case Studies Slider/transforming-blockchain.webp
new file mode 100644
index 0000000..78c950f
Binary files /dev/null and b/src/assets/Case Studies Slider/transforming-blockchain.webp differ
diff --git a/src/assets/Case Studies Slider/urban-connectivity.webp b/src/assets/Case Studies Slider/urban-connectivity.webp
new file mode 100644
index 0000000..a8b90d6
Binary files /dev/null and b/src/assets/Case Studies Slider/urban-connectivity.webp differ
diff --git a/src/assets/Cloud Infrastructure section/Enterprise Cloud Infrastructure.webp b/src/assets/Cloud Infrastructure section/Enterprise Cloud Infrastructure.webp
new file mode 100644
index 0000000..575fb9e
Binary files /dev/null and b/src/assets/Cloud Infrastructure section/Enterprise Cloud Infrastructure.webp differ
diff --git a/src/assets/Cloud Infrastructure section/Infrastructure as a Service Platform.webp b/src/assets/Cloud Infrastructure section/Infrastructure as a Service Platform.webp
new file mode 100644
index 0000000..40fcc3c
Binary files /dev/null and b/src/assets/Cloud Infrastructure section/Infrastructure as a Service Platform.webp differ
diff --git a/src/assets/Cloud Infrastructure section/Platform as a Service Architecture.webp b/src/assets/Cloud Infrastructure section/Platform as a Service Architecture.webp
new file mode 100644
index 0000000..97326d8
Binary files /dev/null and b/src/assets/Cloud Infrastructure section/Platform as a Service Architecture.webp differ
diff --git a/src/assets/Cloud Infrastructure section/Software as a Service Solutions.webp b/src/assets/Cloud Infrastructure section/Software as a Service Solutions.webp
new file mode 100644
index 0000000..5b0f78c
Binary files /dev/null and b/src/assets/Cloud Infrastructure section/Software as a Service Solutions.webp differ
diff --git a/src/assets/Cloud-Service.webp b/src/assets/Cloud-Service.webp
new file mode 100644
index 0000000..9eb6d55
Binary files /dev/null and b/src/assets/Cloud-Service.webp differ
diff --git a/src/assets/CloudCTA/arrow-shape.png b/src/assets/CloudCTA/arrow-shape.png
new file mode 100644
index 0000000..82b654e
Binary files /dev/null and b/src/assets/CloudCTA/arrow-shape.png differ
diff --git a/src/assets/Header-slide/Img-1.webp b/src/assets/Header-slide/Img-1.webp
new file mode 100644
index 0000000..a53edf3
Binary files /dev/null and b/src/assets/Header-slide/Img-1.webp differ
diff --git a/src/assets/Header-slide/Img-2.webp b/src/assets/Header-slide/Img-2.webp
new file mode 100644
index 0000000..402f4da
Binary files /dev/null and b/src/assets/Header-slide/Img-2.webp differ
diff --git a/src/assets/Header-slide/Img-3.webp b/src/assets/Header-slide/Img-3.webp
new file mode 100644
index 0000000..361529c
Binary files /dev/null and b/src/assets/Header-slide/Img-3.webp differ
diff --git a/src/assets/Header-slide/Img-4.webp b/src/assets/Header-slide/Img-4.webp
new file mode 100644
index 0000000..8fc25ff
Binary files /dev/null and b/src/assets/Header-slide/Img-4.webp differ
diff --git a/src/assets/Header/Product-Card/cloud-drive-storage-platform.webp b/src/assets/Header/Product-Card/cloud-drive-storage-platform.webp
new file mode 100644
index 0000000..ca59000
Binary files /dev/null and b/src/assets/Header/Product-Card/cloud-drive-storage-platform.webp differ
diff --git a/src/assets/Header/Product-Card/cloudtopiaa-enterprise-solutions.webp b/src/assets/Header/Product-Card/cloudtopiaa-enterprise-solutions.webp
new file mode 100644
index 0000000..7485062
Binary files /dev/null and b/src/assets/Header/Product-Card/cloudtopiaa-enterprise-solutions.webp differ
diff --git a/src/assets/Header/Product-Card/codenuk-coding-solution-platform.webp b/src/assets/Header/Product-Card/codenuk-coding-solution-platform.webp
new file mode 100644
index 0000000..9fd0305
Binary files /dev/null and b/src/assets/Header/Product-Card/codenuk-coding-solution-platform.webp differ
diff --git a/src/assets/Header/Product-Card/learning-management-system.webp b/src/assets/Header/Product-Card/learning-management-system.webp
new file mode 100644
index 0000000..7b6c4aa
Binary files /dev/null and b/src/assets/Header/Product-Card/learning-management-system.webp differ
diff --git a/src/assets/Logo/AWS-Partner-Netwrok-tech4biz.webp b/src/assets/Logo/AWS-Partner-Netwrok-tech4biz.webp
new file mode 100644
index 0000000..c4c23c6
Binary files /dev/null and b/src/assets/Logo/AWS-Partner-Netwrok-tech4biz.webp differ
diff --git a/src/assets/Logo/AZURE-Partner-Tech4biz.webp b/src/assets/Logo/AZURE-Partner-Tech4biz.webp
new file mode 100644
index 0000000..51912cf
Binary files /dev/null and b/src/assets/Logo/AZURE-Partner-Tech4biz.webp differ
diff --git a/src/assets/Logo/Cloudtopiaa-Tech4biz.webp b/src/assets/Logo/Cloudtopiaa-Tech4biz.webp
new file mode 100644
index 0000000..40d7380
Binary files /dev/null and b/src/assets/Logo/Cloudtopiaa-Tech4biz.webp differ
diff --git a/src/assets/Logo/IBM-Tech4biz-partner.webp b/src/assets/Logo/IBM-Tech4biz-partner.webp
new file mode 100644
index 0000000..bf33c3c
Binary files /dev/null and b/src/assets/Logo/IBM-Tech4biz-partner.webp differ
diff --git a/src/assets/Logo/ISO-Partner-Tech4biz.webp b/src/assets/Logo/ISO-Partner-Tech4biz.webp
new file mode 100644
index 0000000..26925e2
Binary files /dev/null and b/src/assets/Logo/ISO-Partner-Tech4biz.webp differ
diff --git a/src/assets/Logo/OPENAI-Partner-Tech4biz.webp b/src/assets/Logo/OPENAI-Partner-Tech4biz.webp
new file mode 100644
index 0000000..0e5fee1
Binary files /dev/null and b/src/assets/Logo/OPENAI-Partner-Tech4biz.webp differ
diff --git a/src/assets/Logo/Tech4biz-logo.webp b/src/assets/Logo/Tech4biz-logo.webp
new file mode 100644
index 0000000..af933a8
Binary files /dev/null and b/src/assets/Logo/Tech4biz-logo.webp differ
diff --git a/src/assets/Our-Product-Img/advanced-risk-analytics-trading-platform-ml-investment-dashboard.webp b/src/assets/Our-Product-Img/advanced-risk-analytics-trading-platform-ml-investment-dashboard.webp
new file mode 100644
index 0000000..2f79f6c
Binary files /dev/null and b/src/assets/Our-Product-Img/advanced-risk-analytics-trading-platform-ml-investment-dashboard.webp differ
diff --git a/src/assets/Our-Product-Img/connected-retail-management-iot-customer-experience-platform.webp b/src/assets/Our-Product-Img/connected-retail-management-iot-customer-experience-platform.webp
new file mode 100644
index 0000000..cba55d9
Binary files /dev/null and b/src/assets/Our-Product-Img/connected-retail-management-iot-customer-experience-platform.webp differ
diff --git a/src/assets/Our-Product-Img/digital-commerce-intelligence-platform-pricing-analytics-dashboard.webp b/src/assets/Our-Product-Img/digital-commerce-intelligence-platform-pricing-analytics-dashboard.webp
new file mode 100644
index 0000000..848378e
Binary files /dev/null and b/src/assets/Our-Product-Img/digital-commerce-intelligence-platform-pricing-analytics-dashboard.webp differ
diff --git a/src/assets/Our-Product-Img/digital-learning-experience-mixed-reality-education-platform.webp b/src/assets/Our-Product-Img/digital-learning-experience-mixed-reality-education-platform.webp
new file mode 100644
index 0000000..04133d8
Binary files /dev/null and b/src/assets/Our-Product-Img/digital-learning-experience-mixed-reality-education-platform.webp differ
diff --git a/src/assets/Our-Product-Img/enterprise-cloud-commerce-scalable-business-platform.webp b/src/assets/Our-Product-Img/enterprise-cloud-commerce-scalable-business-platform.webp
new file mode 100644
index 0000000..2774ecc
Binary files /dev/null and b/src/assets/Our-Product-Img/enterprise-cloud-commerce-scalable-business-platform.webp differ
diff --git a/src/assets/Our-Product-Img/enterprise-security-defense-platform-dashboard-ai-threat-detection.webp b/src/assets/Our-Product-Img/enterprise-security-defense-platform-dashboard-ai-threat-detection.webp
new file mode 100644
index 0000000..6726238
Binary files /dev/null and b/src/assets/Our-Product-Img/enterprise-security-defense-platform-dashboard-ai-threat-detection.webp differ
diff --git a/src/assets/Our-Product-Img/enterprise-speech-recognition-ai-voice-analysis-platform.webp b/src/assets/Our-Product-Img/enterprise-speech-recognition-ai-voice-analysis-platform.webp
new file mode 100644
index 0000000..72f1941
Binary files /dev/null and b/src/assets/Our-Product-Img/enterprise-speech-recognition-ai-voice-analysis-platform.webp differ
diff --git a/src/assets/Our-Product-Img/smart-retail-automation-inventory-management-platform.webp b/src/assets/Our-Product-Img/smart-retail-automation-inventory-management-platform.webp
new file mode 100644
index 0000000..6a67f8a
Binary files /dev/null and b/src/assets/Our-Product-Img/smart-retail-automation-inventory-management-platform.webp differ
diff --git a/src/assets/Product-Show-Case/ASIC-AI-Deployment.webp b/src/assets/Product-Show-Case/ASIC-AI-Deployment.webp
new file mode 100644
index 0000000..ae4a7ac
Binary files /dev/null and b/src/assets/Product-Show-Case/ASIC-AI-Deployment.webp differ
diff --git a/src/assets/Product-Show-Case/Accelerated-Performance.webp b/src/assets/Product-Show-Case/Accelerated-Performance.webp
new file mode 100644
index 0000000..1205810
Binary files /dev/null and b/src/assets/Product-Show-Case/Accelerated-Performance.webp differ
diff --git a/src/assets/Product-Show-Case/Adaptive-Solutions.webp b/src/assets/Product-Show-Case/Adaptive-Solutions.webp
new file mode 100644
index 0000000..ff9119b
Binary files /dev/null and b/src/assets/Product-Show-Case/Adaptive-Solutions.webp differ
diff --git a/src/assets/Product-Show-Case/Advanced-FPGA-Architecture.webp b/src/assets/Product-Show-Case/Advanced-FPGA-Architecture.webp
new file mode 100644
index 0000000..5c0da3b
Binary files /dev/null and b/src/assets/Product-Show-Case/Advanced-FPGA-Architecture.webp differ
diff --git a/src/assets/Service-Section/Cloud-Service.webp b/src/assets/Service-Section/Cloud-Service.webp
new file mode 100644
index 0000000..9eb6d55
Binary files /dev/null and b/src/assets/Service-Section/Cloud-Service.webp differ
diff --git a/src/assets/Service-Section/Software Engineering Solutions.webp b/src/assets/Service-Section/Software Engineering Solutions.webp
new file mode 100644
index 0000000..e5b4ddc
Binary files /dev/null and b/src/assets/Service-Section/Software Engineering Solutions.webp differ
diff --git a/src/assets/Service-Section/VLSI Design Services.webp b/src/assets/Service-Section/VLSI Design Services.webp
new file mode 100644
index 0000000..f3ab6fd
Binary files /dev/null and b/src/assets/Service-Section/VLSI Design Services.webp differ
diff --git a/src/assets/Service-Section/placeholder.jpg b/src/assets/Service-Section/placeholder.jpg
new file mode 100644
index 0000000..7e35296
Binary files /dev/null and b/src/assets/Service-Section/placeholder.jpg differ
diff --git a/src/assets/Service-Section/service-main.webp b/src/assets/Service-Section/service-main.webp
new file mode 100644
index 0000000..892bb40
Binary files /dev/null and b/src/assets/Service-Section/service-main.webp differ
diff --git a/src/assets/Tech4biz-logo.png b/src/assets/Tech4biz-logo.png
new file mode 100644
index 0000000..823f2ef
Binary files /dev/null and b/src/assets/Tech4biz-logo.png differ
diff --git a/src/assets/Tech4biz.mp4 b/src/assets/Tech4biz.mp4
new file mode 100644
index 0000000..0ebeb4b
Binary files /dev/null and b/src/assets/Tech4biz.mp4 differ
diff --git a/src/assets/Videos/cloud-infra.mp4 b/src/assets/Videos/cloud-infra.mp4
new file mode 100644
index 0000000..a1ff7e1
Binary files /dev/null and b/src/assets/Videos/cloud-infra.mp4 differ
diff --git a/src/assets/Videos/deployment.mp4 b/src/assets/Videos/deployment.mp4
new file mode 100644
index 0000000..f286835
Binary files /dev/null and b/src/assets/Videos/deployment.mp4 differ
diff --git a/src/assets/Videos/solutions.mp4 b/src/assets/Videos/solutions.mp4
new file mode 100644
index 0000000..d500981
Binary files /dev/null and b/src/assets/Videos/solutions.mp4 differ
diff --git a/src/assets/demo-card.jpg b/src/assets/demo-card.jpg
new file mode 100644
index 0000000..85d0c6c
Binary files /dev/null and b/src/assets/demo-card.jpg differ
diff --git a/src/assets/placeholder.jpg b/src/assets/placeholder.jpg
new file mode 100644
index 0000000..7e35296
Binary files /dev/null and b/src/assets/placeholder.jpg differ
diff --git a/src/assets/png.png b/src/assets/png.png
new file mode 100644
index 0000000..33f23a7
Binary files /dev/null and b/src/assets/png.png differ
diff --git a/src/assets/refference img/SlideLayout.png b/src/assets/refference img/SlideLayout.png
new file mode 100644
index 0000000..8ad29b6
Binary files /dev/null and b/src/assets/refference img/SlideLayout.png differ
diff --git a/src/assets/service-main.webp b/src/assets/service-main.webp
new file mode 100644
index 0000000..892bb40
Binary files /dev/null and b/src/assets/service-main.webp differ
diff --git a/src/assets/speech-bubble.png b/src/assets/speech-bubble.png
new file mode 100644
index 0000000..2c236a0
Binary files /dev/null and b/src/assets/speech-bubble.png differ
diff --git a/src/assets/tech4biz-hero-background.mp4 b/src/assets/tech4biz-hero-background.mp4
new file mode 100644
index 0000000..80bae3f
Binary files /dev/null and b/src/assets/tech4biz-hero-background.mp4 differ
diff --git a/src/components/CloudCTA/CloudCTA.jsx b/src/components/CloudCTA/CloudCTA.jsx
new file mode 100644
index 0000000..ea5f87f
--- /dev/null
+++ b/src/components/CloudCTA/CloudCTA.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { cloudConfig } from './config';
+import { useInViewAnimation } from './hooks/useInViewAnimation';
+import { containerVariants } from './utils/variants';
+import CTAContent from './components/CTAContent';
+import CTAButton from './components/CTAButton';
+import styles from './styles/CloudCTA.module.css';
+
+const CloudCTA = () => {
+  const { ref, controls } = useInViewAnimation();
+
+  return (
+    <section 
+      className={styles.container}
+      aria-labelledby="cta-heading"
+    >
+      <div className={styles.wrapper}>
+        <motion.div
+          ref={ref}
+          variants={containerVariants}
+          initial="hidden"
+          animate={controls}
+          className={styles.content}
+        >
+          <CTAContent
+            heading={cloudConfig.heading}
+            description={cloudConfig.description}
+            image={cloudConfig.images.arrow}
+          />
+          
+          <CTAButton text={cloudConfig.button.text} />
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default CloudCTA;
\ No newline at end of file
diff --git a/src/components/CloudCTA/components/CTAButton.jsx b/src/components/CloudCTA/components/CTAButton.jsx
new file mode 100644
index 0000000..11c2b78
--- /dev/null
+++ b/src/components/CloudCTA/components/CTAButton.jsx
@@ -0,0 +1,42 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { itemVariants } from '../utils/variants';
+import styles from '../styles/CloudCTA.module.css';
+
+const CTAButton = memo(({ text }) => {
+  return (
+    <motion.button
+      variants={itemVariants}
+      className={styles.button}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      aria-label={text}
+    >
+      {text}
+      <motion.svg 
+        xmlns="http://www.w3.org/2000/svg" 
+        className={styles.buttonIcon}
+        fill="none" 
+        viewBox="0 0 24 24" 
+        stroke="currentColor"
+        animate={{ x: [0, 4, 0] }}
+        transition={{
+          duration: 1.5,
+          repeat: Infinity,
+          ease: "easeInOut"
+        }}
+        aria-hidden="true"
+      >
+        <path 
+          strokeLinecap="round" 
+          strokeLinejoin="round" 
+          strokeWidth={2} 
+          d="M13 7l5 5m0 0l-5 5m5-5H6" 
+        />
+      </motion.svg>
+    </motion.button>
+  );
+});
+
+CTAButton.displayName = 'CTAButton';
+export default CTAButton;
diff --git a/src/components/CloudCTA/components/CTAContent.jsx b/src/components/CloudCTA/components/CTAContent.jsx
new file mode 100644
index 0000000..5b95d86
--- /dev/null
+++ b/src/components/CloudCTA/components/CTAContent.jsx
@@ -0,0 +1,68 @@
+import React, { memo, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { itemVariants } from '../utils/variants';
+import OptimizedImage from '@/components/common/OptimizedImage';
+import { preloadImage } from '../utils/performance';
+import styles from '../styles/CloudCTA.module.css';
+
+const CTAContent = memo(({ heading, description, image }) => {
+  useEffect(() => {
+    preloadImage(image.src);
+  }, [image.src]);
+
+  return (
+    <div className={styles.contentWrapper}>
+      <div className={styles.textContainer}>
+        <motion.h2 
+          variants={itemVariants}
+          className={styles.contentHeading}
+        >
+          {heading}
+        </motion.h2>
+        
+        <motion.div 
+          variants={itemVariants}
+          className={styles.divider}
+          aria-hidden="true"
+        />
+        
+        <motion.p 
+          variants={itemVariants}
+          className={styles.contentDescription}
+        >
+          {description}
+        </motion.p>
+      </div>
+
+      <div className={styles.imageContainer}>
+        <motion.img
+          src={image.src}
+          alt={image.alt}
+          width={image.width}
+          height={image.height}
+          className={styles.floatingImage}
+          initial={{ 
+            opacity: 0, 
+            scale: 0.5,
+            y: 50,
+            rotate: -5
+          }}
+          animate={{ 
+            opacity: [0.2, 0.3, 0.2],
+            scale: [1, 1.05, 1],
+            y: [0, -15, 0],
+            rotate: [-5, 5, -5]
+          }}
+          transition={{
+            duration: 4,
+            repeat: Infinity,
+            ease: "easeInOut"
+          }}
+        />
+      </div>
+    </div>
+  );
+});
+
+CTAContent.displayName = 'CTAContent';
+export default CTAContent;
\ No newline at end of file
diff --git a/src/components/CloudCTA/config/content.js b/src/components/CloudCTA/config/content.js
new file mode 100644
index 0000000..ad0fdab
--- /dev/null
+++ b/src/components/CloudCTA/config/content.js
@@ -0,0 +1,20 @@
+import arrowShape from '@assets/CloudCTA/arrow-shape.png';
+
+export const cloudConfig = {
+  heading: "MAXIMIZE YOUR CLOUD INVESTMENT",
+  description: "We help companies save thousands of dollars by optimizing their cloud server deployments across top platforms like AWS, Azure, and Google Cloud, while also cutting labor costs, so you can focus on driving business growth and performance.",
+  button: {
+    text: "Start Optimizing Today",
+    ariaLabel: "Start cloud optimization process"
+  },
+  images: {
+    arrow: {
+      src: arrowShape,
+      alt: "Decorative arrow shape",
+      srcSet: `${arrowShape} 1x, ${arrowShape.replace('.png', '@2x.png')} 2x`,
+      sizes: "(max-width: 768px) 100vw, 50vw",
+      width: 180,
+      height: 180
+    }
+  }
+};
diff --git a/src/components/CloudCTA/config/index.js b/src/components/CloudCTA/config/index.js
new file mode 100644
index 0000000..0d4fab6
--- /dev/null
+++ b/src/components/CloudCTA/config/index.js
@@ -0,0 +1,2 @@
+export { cloudConfig } from './content';
+export { cloudCTASchema } from './schema';
\ No newline at end of file
diff --git a/src/components/CloudCTA/config/meta.js b/src/components/CloudCTA/config/meta.js
new file mode 100644
index 0000000..c8f59fd
--- /dev/null
+++ b/src/components/CloudCTA/config/meta.js
@@ -0,0 +1,11 @@
+export const ctaMeta = {
+  title: "Cloud Investment Optimization | Your Company",
+  description: "Optimize your cloud infrastructure costs across AWS, Azure, and Google Cloud platforms. Start saving today with our expert solutions.",
+  keywords: "cloud optimization, AWS optimization, Azure optimization, Google Cloud optimization, cloud cost savings",
+  openGraph: {
+    title: "Maximize Your Cloud Investment",
+    description: "Save thousands on cloud infrastructure with expert optimization",
+    image: "/og-cloud-optimization.jpg",
+    type: "website"
+  }
+};
diff --git a/src/components/CloudCTA/config/schema.js b/src/components/CloudCTA/config/schema.js
new file mode 100644
index 0000000..24e97c3
--- /dev/null
+++ b/src/components/CloudCTA/config/schema.js
@@ -0,0 +1,34 @@
+export const cloudCTASchema = {
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "name": "Cloud Investment Optimization",
+  "description": "Cloud server deployment and optimization services for AWS, Azure, and Google Cloud platforms",
+  "provider": {
+    "@type": "Organization",
+    "name": "Your Company Name",
+    "url": "https://yourcompany.com"
+  },
+  "offers": {
+    "@type": "Offer",
+    "description": "Cloud optimization services to reduce infrastructure and labor costs",
+    "price": "0",
+    "priceCurrency": "USD",
+    "availability": "https://schema.org/InStock"
+  },
+  "serviceType": "Cloud Optimization",
+  "areaServed": "Worldwide",
+  "hasOfferCatalog": {
+    "@type": "OfferCatalog",
+    "name": "Cloud Optimization Services",
+    "itemListElement": [
+      {
+        "@type": "Offer",
+        "itemOffered": {
+          "@type": "Service",
+          "name": "Cloud Cost Optimization",
+          "description": "Reduce your cloud infrastructure costs"
+        }
+      }
+    ]
+  }
+};
diff --git a/src/components/CloudCTA/hooks/useInViewAnimation.js b/src/components/CloudCTA/hooks/useInViewAnimation.js
new file mode 100644
index 0000000..189b036
--- /dev/null
+++ b/src/components/CloudCTA/hooks/useInViewAnimation.js
@@ -0,0 +1,19 @@
+import { useEffect, useRef } from 'react';
+import { useAnimation, useInView } from 'framer-motion';
+import { debouncedAnimation } from '../utils/performance';
+
+export const useInViewAnimation = () => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  const controls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      debouncedAnimation(() => {
+        controls.start("visible");
+      });
+    }
+  }, [isInView, controls]);
+
+  return { ref, controls };
+};
diff --git a/src/components/CloudCTA/index.jsx b/src/components/CloudCTA/index.jsx
new file mode 100644
index 0000000..944ac0a
--- /dev/null
+++ b/src/components/CloudCTA/index.jsx
@@ -0,0 +1,14 @@
+import React, { lazy, Suspense } from 'react';
+import { ErrorBoundary } from '@/components/common/ErrorBoundary';
+
+const CloudCTA = lazy(() => import('./CloudCTA'));
+
+const CloudCTAWrapper = () => (
+  <ErrorBoundary>
+    <Suspense fallback={<div className="min-h-[400px] bg-white" />}>
+      <CloudCTA />
+    </Suspense>
+  </ErrorBoundary>
+);
+
+export default CloudCTAWrapper;
diff --git a/src/components/CloudCTA/styles/CloudCTA.module.css b/src/components/CloudCTA/styles/CloudCTA.module.css
new file mode 100644
index 0000000..c5b013d
--- /dev/null
+++ b/src/components/CloudCTA/styles/CloudCTA.module.css
@@ -0,0 +1,112 @@
+:root {
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+}
+
+.container {
+  @apply w-full bg-white p-4 sm:p-6 md:p-8;
+}
+
+.wrapper {
+  @apply max-w-[80rem] mx-auto;
+}
+
+.content {
+  @apply bg-[#1F2937] rounded-[1.5rem] p-6 sm:p-8 md:p-12 flex flex-col gap-[1rem] relative overflow-hidden
+         border border-white/10 shadow-2xl;
+}
+
+.contentWrapper {
+  @apply flex flex-col md:flex-row md:items-center md:gap-16 gap-6;
+}
+
+.textContainer {
+  @apply w-full md:flex-[0.65];
+}
+
+.contentHeading {
+  @apply text-white text-[28px] sm:text-[30px] md:text-[32px] md:whitespace-nowrap font-[600] tracking-[0.03em] leading-[1.25] mb-4 font-syne uppercase;
+}
+
+.divider {
+  @apply w-[7rem] sm:w-[8rem] md:w-[9rem] h-[3px] bg-white/90 mb-6 md:mb-8;
+}
+
+.contentDescription {
+  @apply text-white/80 text-[14px] sm:text-[16px] md:text-[18px] font-[400] leading-[1.6] font-poppins;
+}
+
+.buttonContainer {
+  @apply mt-6 sm:mt-8;
+}
+
+.button {
+  @apply bg-[#f4791f] text-white px-6 sm:px-8 py-3 sm:py-3.5 rounded-full text-[15px] sm:text-[16px] md:text-[17px] font-medium
+         flex items-center gap-2 hover:bg-[#ff8827] transition-all duration-300 text-nowrap
+         shadow-lg hover:shadow-xl hover:translate-y-[-2px] justify-center w-full sm:w-auto;
+}
+
+.buttonText {
+  @apply whitespace-nowrap;
+}
+
+.buttonIcon {
+  @apply h-4 w-4 sm:h-5 sm:w-5;
+}
+
+.imageContainer {
+  @apply hidden md:flex md:flex-[0.35] items-center justify-end relative;
+}
+
+.floatingImage {
+  @apply absolute !important;
+  min-width: 400px !important;
+  max-width: 400px !important;
+  width: 400px !important;
+  height: 120px !important;
+  right: -45px !important;
+  bottom: -120px !important;
+  opacity: 100 !important;
+  object-fit: contain !important;
+  filter: brightness(1.2) !important;
+  will-change: transform, opacity !important;
+}
+
+@media (max-width: 480px) {
+  .content {
+    @apply p-5;
+  }
+  
+  .contentHeading {
+    @apply text-[28px] leading-[1] mb-[0.5rem];
+  }
+  
+  .contentDescription {
+    @apply text-[14px] leading-[1.5];
+  }
+  
+  .divider {
+    @apply w-[6rem] mb-5;
+  }
+  
+  .button {
+    @apply px-5 py-2.5 text-[14px];
+  }
+  
+  .buttonIcon {
+    @apply h-4 w-4;
+  }
+}
+
+@media (min-width: 768px) {
+  .content {
+    @apply flex-row items-center justify-between;
+  }
+  
+  .buttonContainer {
+    @apply mt-0;
+  }
+}
\ No newline at end of file
diff --git a/src/components/CloudCTA/utils/breakpoints.js b/src/components/CloudCTA/utils/breakpoints.js
new file mode 100644
index 0000000..cc7026c
--- /dev/null
+++ b/src/components/CloudCTA/utils/breakpoints.js
@@ -0,0 +1,15 @@
+export const breakpoints = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px'
+};
+
+export const mediaQueries = {
+  sm: `@media (min-width: ${breakpoints.sm})`,
+  md: `@media (min-width: ${breakpoints.md})`,
+  lg: `@media (min-width: ${breakpoints.lg})`,
+  xl: `@media (min-width: ${breakpoints.xl})`,
+  '2xl': `@media (min-width: ${breakpoints['2xl']})`
+};
diff --git a/src/components/CloudCTA/utils/performance.js b/src/components/CloudCTA/utils/performance.js
new file mode 100644
index 0000000..97c392b
--- /dev/null
+++ b/src/components/CloudCTA/utils/performance.js
@@ -0,0 +1,24 @@
+const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+export const debouncedAnimation = debounce((callback) => {
+  requestAnimationFrame(callback);
+}, 16);
+
+export const preloadImage = (src) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = src;
+    img.onload = resolve;
+    img.onerror = reject;
+  });
+};
diff --git a/src/components/CloudCTA/utils/variants.js b/src/components/CloudCTA/utils/variants.js
new file mode 100644
index 0000000..258f025
--- /dev/null
+++ b/src/components/CloudCTA/utils/variants.js
@@ -0,0 +1,19 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      duration: 0.6,
+      staggerChildren: 0.2
+    }
+  }
+};
+
+export const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.5 }
+  }
+};
diff --git a/src/components/CloudSlider/CloudSlider.jsx b/src/components/CloudSlider/CloudSlider.jsx
new file mode 100644
index 0000000..62454bd
--- /dev/null
+++ b/src/components/CloudSlider/CloudSlider.jsx
@@ -0,0 +1,173 @@
+import React, { useCallback } from 'react';
+import useEmblaCarousel from 'embla-carousel-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { slides } from './sliderData';
+import styles from './CloudSlider.module.css';
+import { motion } from 'framer-motion';
+
+const DeploymentPoint = ({ point, index, isVisible, isMobile }) => (
+  <motion.div
+    initial={isMobile ? false : { opacity: 0, y: 20 }}
+    animate={isMobile ? { opacity: 1, y: 0 } : isVisible ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+    transition={{ 
+      duration: isMobile ? 0.5 : 0.8,
+      delay: isMobile ? 0 : index * 0.1,
+      ease: [0.25, 0.1, 0.25, 1],
+    }}
+    className={`${styles.deploymentPoint} ${isMobile ? styles.mobilePoint : ''}`}
+  >
+    <div>
+      <div className="flex items-center gap-2">
+        <h3 className={styles.pointTitle}>{`${index + 1}. ${point.title}`}</h3>
+        {point.isNew && (
+          <span className={styles.newTag}>New</span>
+        )}
+      </div>
+      <p className={styles.pointDescription}>{point.description}</p>
+    </div>
+  </motion.div>
+);
+
+export default function CloudSlider() {
+  const [progress, setProgress] = React.useState(0);
+  const progressRef = React.useRef(null);
+  const [currentSlide, setCurrentSlide] = React.useState(0);
+  const [isMobile, setIsMobile] = React.useState(false);
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: true,
+    align: 'center',
+    skipSnaps: false,
+    containScroll: false,
+    dragFree: false,
+    startIndex: 0,
+    slidesToScroll: 1,
+    speed: 15,
+    breakpoints: {
+      '(max-width: 768px)': {
+        align: 'center',
+        containScroll: 'keepSnaps',
+        dragFree: true
+      }
+    }
+  });
+
+  React.useEffect(() => {
+    if (!emblaApi) return;
+
+    const onSelect = () => {
+      setCurrentSlide(emblaApi.selectedScrollSnap());
+    };
+
+    emblaApi.on('select', onSelect);
+    onSelect(); // Initial call to set current slide
+
+    if (progressRef.current) {
+      clearInterval(progressRef.current);
+    }
+
+    const startProgress = () => {
+      let currentProgress = 0;
+      progressRef.current = setInterval(() => {
+        currentProgress += 1;
+        setProgress(currentProgress);
+        
+        if (currentProgress >= 100) {
+          setProgress(0);
+          scrollNext();
+          currentProgress = 0;
+        }
+      }, 50); // 50ms * 100 steps = 5 seconds per slide
+    };
+
+    startProgress();
+
+    return () => {
+      emblaApi.off('select', onSelect);
+      if (progressRef.current) {
+        clearInterval(progressRef.current);
+      }
+    };
+  }, [emblaApi]);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 768);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) emblaApi.scrollPrev();
+  }, [emblaApi]);
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) emblaApi.scrollNext();
+  }, [emblaApi]);
+
+  return (
+    <div className={styles.container}>
+      <h1 className={styles.title}>
+        <span className={styles.titleWhite}>Cloud Infrastructure </span>
+        <span className={styles.titleBlue}>Deployments</span>
+      </h1>
+
+      <div className={styles.embla} ref={emblaRef}>
+        <div className={styles.emblaContainer}>
+          {slides.map((slide, index) => (
+            <div key={index} className={styles.emblaSlide}>
+              <div className={styles.slideContent}>
+                <div 
+                  className={styles.slideBackground}
+                  style={{
+                    backgroundImage: `url(${slide.backgroundImage})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    opacity: 0.15
+                  }}
+                />
+                <div className={styles.gradientOverlay} />
+                
+                <div className={styles.contentWrapper}>
+                  <h2 className={styles.slideTitle}>{slide.title}</h2>
+                  <div className={styles.pointsContainer}>
+                    {slide.points.map((point, idx) => (
+                      <div key={idx} className={styles.pointWrapper}>
+                        <DeploymentPoint 
+                          point={point} 
+                          index={idx} 
+                          isVisible={currentSlide === index}
+                          isMobile={isMobile}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+                <div className={styles.progressBarContainer}>
+                  {currentSlide === index && (
+                    <div 
+                      className={styles.progressBar} 
+                      style={{ width: `${progress}%` }}
+                    />
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className={styles.navigationButtons}>
+        <button onClick={scrollPrev} className={styles.navButton} aria-label="Previous slide">
+          <ChevronLeft className={styles.navIcon} />
+        </button>
+        <button onClick={scrollNext} className={styles.navButton} aria-label="Next slide">
+          <ChevronRight className={styles.navIcon} />
+        </button>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/CloudSlider/CloudSlider.module.css b/src/components/CloudSlider/CloudSlider.module.css
new file mode 100644
index 0000000..79349ba
--- /dev/null
+++ b/src/components/CloudSlider/CloudSlider.module.css
@@ -0,0 +1,245 @@
+.container {
+    @apply min-h-screen bg-[#1F2937] flex flex-col items-center justify-center p-4;
+}
+
+.title {
+    @apply text-5xl font-bold text-center mb-16 font-sans;
+}
+
+.titleWhite {
+    @apply text-white;
+}
+
+.titleBlue {
+    @apply text-blue-500;
+}
+
+.sliderContainer {
+    @apply relative w-full max-w-[1200px] mx-auto;
+}
+
+.slide {
+    @apply rounded-xl relative overflow-hidden w-full mx-auto;
+    min-height: 552px;
+    height: auto;
+    padding: 2rem;
+    
+    @media (max-width: 768px) {
+      min-height: auto;
+      padding: 1rem;
+    }
+}
+
+.slideBackground {
+    @apply absolute inset-0 z-0;
+}
+
+.gradientOverlay {
+    @apply absolute inset-0 bg-gradient-to-br from-purple-500/10 to-emerald-500/5 pointer-events-none;
+}
+
+.contentWrapper {
+    @apply h-full flex flex-col relative z-10;
+    justify-content: space-between;
+    min-height: 552px;
+
+    @media (max-width: 768px) {
+      height: 100%;
+      justify-content: flex-start;
+      gap: 1.5rem;
+    }
+}
+
+.slideTitle {
+    @apply text-[24px] text-white font-syne font-semibold text-left;
+
+    @media (max-width: 768px) {
+      font-size: 20px;
+      position: relative;
+      top: 0;
+      left: 0;
+      margin-bottom: 1rem;
+    }
+}
+
+.pointsContainer {
+    @apply flex flex-col relative;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(200px, 1fr));
+    gap: 24px;
+    padding-top: 32px;
+    overflow: hidden;
+
+    @media (max-width: 768px) {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      height: calc(100% - 60px);
+      overflow-y: auto;
+    }
+}
+
+.pointWrapper {
+    @apply flex justify-center;
+    transform-style: preserve-3d;
+    perspective: 1000px;
+
+    @media (max-width: 768px) {
+      transform-style: flat;
+      perspective: none;
+      width: 100%;
+    }
+}
+
+.navigationButtons {
+    @apply flex justify-center gap-4 mt-8;
+}
+
+.navButton {
+    @apply p-2 rounded-full bg-gray-800/30 hover:bg-gray-700/30 transition-colors backdrop-blur-sm;
+}
+
+.navIcon {
+    @apply w-5 h-5 text-white/80;
+}
+
+.progressBarContainer {
+    @apply absolute bottom-0 left-0 right-0 h-1 bg-gray-800/50;
+    z-index: 20;
+}
+
+.progressBar {
+    @apply h-full bg-blue-500;
+    transition: width 50ms linear;
+}
+
+.deploymentPoint {
+    @apply flex items-start gap-3;
+    position: relative;
+
+    @media (max-width: 768px) {
+      background: rgba(255, 255, 255, 0.03);
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      border-radius: 12px;
+      padding: 0.75rem;
+      width: 100%;
+      display: flex;
+      align-items: flex-start;
+      transition: all 0.2s ease;
+      /* Removed backdrop-filter: blur(8px); */
+    }
+}
+
+/* Removed the .starIcon class below
+.starIcon {
+    @apply mt-1 text-blue-500;
+}
+
+@media (max-width: 768px) {
+  .starIcon {
+    color: rgb(96, 165, 250);
+    transform: scale(0.7);
+    margin-right: 0.5rem;
+  }
+}
+*/
+
+.pointTitle {
+    @apply text-white font-medium tracking-wide font-poppins text-[18px] leading-[27px];
+    
+    @media (max-width: 768px) {
+      font-size: 16px;
+      line-height: 1.3;
+      letter-spacing: 0.02em;
+    }
+}
+
+.newTag {
+    @apply px-1.5 py-0.5 text-[11px] bg-[#22c55e]/90 text-white rounded-[2px] uppercase tracking-wide font-medium;
+}
+
+.pointDescription {
+    @apply text-gray-400 font-poppins font-medium text-[14px] leading-[21px] mt-1.5 max-w-[280px];
+    
+    @media (max-width: 768px) {
+      display: none; /* Hide descriptions only on mobile */
+      font-size: 13px;
+      line-height: 20px;
+      max-width: 100%;
+    }
+}
+
+.embla {
+    @apply relative w-full max-w-[1400px] mx-auto overflow-hidden;
+    padding: 1.6rem;
+
+    @media (max-width: 768px) {
+      padding: 1rem;
+    }
+}
+
+.emblaContainer {
+    @apply flex;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+    will-change: transform;
+    transition: transform 200ms ease;
+}
+
+.emblaSlide {
+    flex: 0 0 80%;
+    margin: 0 2%;
+    position: relative;
+    overflow: hidden;
+
+    @media (max-width: 768px) {
+      flex: 0 0 calc(100% - 2rem);
+      margin: 0 1rem;
+      scroll-snap-align: center;
+    }
+}
+
+.slideContent {
+    @apply rounded-xl p-12 relative overflow-hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    background: linear-gradient(to bottom right, rgba(31, 41, 55, 1), rgba(17, 24, 39, 1));
+    min-height: 552px;
+    
+    @media (max-width: 768px) {
+      height: 480px;
+      padding: 1.25rem;
+      background: linear-gradient(200.96deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.98));
+    }
+}
+
+/* Additional adjustments to ensure proper spacing and sizing */
+@media (max-width: 768px) {
+  .pointsContainer {
+    gap: 12px;
+  }
+
+  .deploymentPoint {
+    padding: 0.75rem;
+    /* backdrop-filter removed */
+  }
+
+  .slideContent {
+    padding: 1.25rem;
+  }
+
+  .pointWrapper {
+    width: 100%;
+  }
+
+  .pointTitle {
+    font-size: 16px;
+  }
+
+  .newTag {
+    font-size: 10px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/CloudSlider/sliderData.js b/src/components/CloudSlider/sliderData.js
new file mode 100644
index 0000000..15974b5
--- /dev/null
+++ b/src/components/CloudSlider/sliderData.js
@@ -0,0 +1,131 @@
+import SaaSImage from '@/assets/Cloud Infrastructure section/Software as a Service Solutions.webp';
+import PaaSImage from '@/assets/Cloud Infrastructure section/Platform as a Service Architecture.webp';
+import IaaSImage from '@/assets/Cloud Infrastructure section/Infrastructure as a Service Platform.webp';
+import EnterpriseImage from '@/assets/Cloud Infrastructure section/Enterprise Cloud Infrastructure.webp';
+
+export const slides = [
+  {
+    title: "Public Cloud Orchestration and Design",
+    backgroundImage: SaaSImage,
+    points: [
+      {
+        title: "Flexible Deployment",
+        description: "Choose from multiple deployment options that best suit your infrastructure needs",
+        isNew: false
+      },
+      {
+        title: "Auto-scaling",
+        description: "Automatically adjust resources based on demand and workload patterns",
+        isNew: false
+      },
+      {
+        title: "Multi-region Support",
+        description: "Deploy across multiple geographic regions for improved availability",
+        isNew: false
+      },
+      {
+        title: "Container Orchestration",
+        description: "Integrated container management with Kubernetes support",
+        isNew: true
+      },
+      {
+        title: "Infrastructure as Code",
+        description: "Define and manage infrastructure using modern IaC tools",
+        isNew: true
+      }
+    ]
+  },
+  {
+    title: "Security and Compliance Features",
+    backgroundImage: PaaSImage,
+    points: [
+      {
+        title: "Advanced Encryption",
+        description: "Industry-standard encryption protocols to protect data at rest and in transit",
+        isNew: false
+      },
+      {
+        title: "Compliance Framework",
+        description: "Built-in compliance tools for HIPAA, GDPR, and other regulatory requirements",
+        isNew: false
+      },
+      {
+        title: "Identity Management",
+        description: "Robust IAM capabilities with role-based access control and SSO integration",
+        isNew: true
+      },
+      {
+        title: "Security Monitoring",
+        description: "24/7 threat detection and automated security incident response",
+        isNew: true
+      },
+      {
+        title: "Audit Logging",
+        description: "Comprehensive audit trails and logging for all system activities",
+        isNew: false
+      }
+    ]
+  },
+  {
+    title: "Performance and Scalability",
+    backgroundImage: IaaSImage,
+    points: [
+      {
+        title: "Global CDN",
+        description: "Worldwide content delivery network for optimal performance",
+        isNew: true
+      },
+      {
+        title: "Load Balancing",
+        description: "Intelligent traffic distribution for high availability",
+        isNew: false
+      },
+      {
+        title: "Elastic Resources",
+        description: "Dynamic resource allocation based on real-time demands",
+        isNew: false
+      },
+      {
+        title: "Performance Monitoring",
+        description: "Real-time metrics and performance analytics",
+        isNew: true
+      },
+      {
+        title: "Disaster Recovery",
+        description: "Automated backup and recovery solutions",
+        isNew: false
+      }
+    ]
+  },
+  {
+    title: "Enterprise Integration",
+    backgroundImage: EnterpriseImage,
+    points: [
+      {
+        title: "API Management",
+        description: "Comprehensive API gateway and management tools",
+        isNew: true
+      },
+      {
+        title: "Hybrid Cloud",
+        description: "Seamless integration between public and private clouds",
+        isNew: false
+      },
+      {
+        title: "Data Migration",
+        description: "Enterprise-grade tools for secure data transfer",
+        isNew: false
+      },
+      {
+        title: "DevOps Pipeline",
+        description: "Integrated CI/CD tools for automated deployments",
+        isNew: true
+      },
+      {
+        title: "Enterprise Support",
+        description: "24/7 dedicated support and consulting services",
+        isNew: false
+      }
+    ]
+  }
+];
diff --git a/src/components/ExperienceSection/ExperienceService.jsx b/src/components/ExperienceSection/ExperienceService.jsx
new file mode 100644
index 0000000..739c8f4
--- /dev/null
+++ b/src/components/ExperienceSection/ExperienceService.jsx
@@ -0,0 +1,71 @@
+import React, { Suspense } from 'react';
+import ErrorBoundary from '../common/ErrorBoundary';
+import { SECTION_CONFIG } from './config/constants';
+import { experienceSchema } from './config/schema';
+import './styles/ExperienceSection.css';
+import { Helmet } from 'react-helmet-async';
+import { useExperienceData } from './hooks/useExperienceData';
+
+const ExperienceHeader = React.lazy(() => import('./components/ExperienceHeader'));
+const ExperienceCard = React.lazy(() => import('./components/ExperienceCard'));
+
+const ExperienceService = () => {
+  const { experiences, isLoading, error } = useExperienceData();
+
+  if (error) {
+    return (
+      <div className="error-message text-center text-red-600">
+        <h2>Something went wrong while loading experiences.</h2>
+        <p>Please try again later.</p>
+      </div>
+    );
+  }
+
+  return (
+    <ErrorBoundary>
+      <section className="experience-section max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
+        <script type="application/ld+json">
+          {JSON.stringify(experienceSchema)}
+        </script>
+        
+        <Helmet>
+          <title>{SECTION_CONFIG.title}</title>
+          <meta name="description" content={SECTION_CONFIG.metaDescription} />
+          <meta name="keywords" content="AI, Quantum Computing, 3D Design, EV Technology, Business Growth" />
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
+          
+          {/* Open Graph Meta Tags */}
+          <meta property="og:title" content={SECTION_CONFIG.title} />
+          <meta property="og:description" content={SECTION_CONFIG.metaDescription} />
+          <meta property="og:type" content="website" />
+          <meta property="og:url" content="https://yourwebsite.com/experience" />
+          <meta property="og:image" content="https://yourwebsite.com/images/experience-og-image.jpg" />
+          
+          {/* Twitter Card Meta Tags */}
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:title" content={SECTION_CONFIG.title} />
+          <meta name="twitter:description" content={SECTION_CONFIG.metaDescription} />
+          <meta name="twitter:image" content="https://yourwebsite.com/images/experience-twitter-image.jpg" />
+        </Helmet>
+
+        <Suspense fallback={<div className="header-placeholder animate-pulse bg-gray-100 rounded-lg h-24" />}>
+          <ExperienceHeader />
+        </Suspense>
+
+        <div className="experience-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
+          {isLoading ? (
+            <div className="loading-message">Loading experiences...</div>
+          ) : (
+            experiences.map((experience, index) => (
+              <Suspense key={experience.id} fallback={<div className="card-placeholder animate-pulse bg-gray-100 rounded-lg h-64" />}>
+                <ExperienceCard {...experience} index={index} />
+              </Suspense>
+            ))
+          )}
+        </div>
+      </section>
+    </ErrorBoundary>
+  );
+};
+
+export default ExperienceService;
diff --git a/src/components/ExperienceSection/components/ExperienceCard.jsx b/src/components/ExperienceSection/components/ExperienceCard.jsx
new file mode 100644
index 0000000..38500ee
--- /dev/null
+++ b/src/components/ExperienceSection/components/ExperienceCard.jsx
@@ -0,0 +1,56 @@
+import React, { useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { ArrowRight } from 'lucide-react';
+import gsap from 'gsap';
+import { ANIMATION_CONFIG } from '../config/constants';
+import '../styles/ExperienceCard.css';
+
+const ExperienceCard = ({ icon: Icon, title, description, stats }) => {
+  const cardRef = useRef(null);
+
+  useEffect(() => {
+    const card = cardRef.current;
+    gsap.fromTo(
+      card,
+      ANIMATION_CONFIG.card.initial,
+      {
+        ...ANIMATION_CONFIG.card.animate,
+        scrollTrigger: {
+          trigger: card,
+          ...ANIMATION_CONFIG.card.trigger,
+        },
+      }
+    );
+  }, []);
+
+  return (
+    <div ref={cardRef} className="experience-card group">
+      <div className="card-pattern" aria-hidden="true" />
+      <div className="experience-card-content">
+        <div className="flex items-start gap-4 mb-6">
+          <div className="card-icon-wrapper">
+            <Icon className="experience-icon w-6 h-6 text-white" aria-hidden="true" />
+          </div>
+          <div>
+            <h3 className="card-title">{title}</h3>
+            {stats && <span className="card-stats">{stats}</span>}
+          </div>
+        </div>
+
+        <p className="experience-description">{description}</p>
+
+        <motion.button 
+          className="experience-button inline-flex items-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+          whileHover={{ x: 10 }}
+          transition={{ type: "spring", stiffness: 400 }}
+          aria-label={`Learn more about ${title}`}
+        >
+          <span className="mr-2">Learn More</span>
+          <ArrowRight className="experience-button-icon w-5 h-5" />
+        </motion.button>
+      </div>
+    </div>
+  );
+};
+
+export default React.memo(ExperienceCard);
diff --git a/src/components/ExperienceSection/components/ExperienceHeader.jsx b/src/components/ExperienceSection/components/ExperienceHeader.jsx
new file mode 100644
index 0000000..4aa879b
--- /dev/null
+++ b/src/components/ExperienceSection/components/ExperienceHeader.jsx
@@ -0,0 +1,57 @@
+import React, { useRef, useEffect } from 'react';
+import gsap from 'gsap';
+import { ANIMATION_CONFIG, SECTION_CONFIG } from '../config/constants';
+import '../styles/ExperienceHeader.css';
+
+const ExperienceHeader = () => {
+  const headerRef = useRef(null);
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      const tl = gsap.timeline({
+        scrollTrigger: {
+          trigger: headerRef.current,
+          ...ANIMATION_CONFIG.header.trigger,
+        },
+      });
+
+      tl.from(".header-subtitle", {
+        opacity: 0,
+        y: -20,
+        duration: ANIMATION_CONFIG.header.duration,
+        ease: ANIMATION_CONFIG.header.ease,
+      })
+        .from(
+          ".header-title",
+          {
+            opacity: 0,
+            y: 30,
+            duration: ANIMATION_CONFIG.header.duration,
+            ease: ANIMATION_CONFIG.header.ease,
+          },
+          "-=0.3"
+        )
+        .from(
+          ".header-line",
+          {
+            scaleX: 0,
+            duration: ANIMATION_CONFIG.header.duration,
+            ease: "power3.inOut",
+          },
+          "-=0.5"
+        );
+    }, headerRef);
+
+    return () => ctx.revert();
+  }, []);
+
+  return (
+    <div ref={headerRef} className="section-header">
+      <h2 className="header-subtitle">{SECTION_CONFIG.subtitle}</h2>
+      <h1 className="header-title">{SECTION_CONFIG.title}</h1>
+      <div className="header-line" />
+    </div>
+  );
+};
+
+export default React.memo(ExperienceHeader);
diff --git a/src/components/ExperienceSection/config/animations.js b/src/components/ExperienceSection/config/animations.js
new file mode 100644
index 0000000..cf4c608
--- /dev/null
+++ b/src/components/ExperienceSection/config/animations.js
@@ -0,0 +1,28 @@
+export const ANIMATION_CONFIG = {
+  card: {
+    initial: {
+      opacity: 0,
+      y: 50,
+      scale: 0.95,
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      duration: 0.8,
+      ease: "power3.out"
+    },
+    trigger: {
+      start: "top bottom-=100",
+      toggleActions: "play none none reverse"
+    }
+  },
+  header: {
+    duration: 0.8,
+    ease: "power3.out",
+    trigger: {
+      start: "top center+=100",
+      toggleActions: "play none none reverse"
+    }
+  }
+};
diff --git a/src/components/ExperienceSection/config/constants.js b/src/components/ExperienceSection/config/constants.js
new file mode 100644
index 0000000..c1084ab
--- /dev/null
+++ b/src/components/ExperienceSection/config/constants.js
@@ -0,0 +1,65 @@
+import { Monitor, Cpu, Box, BatteryCharging } from 'lucide-react';
+
+export const SECTION_CONFIG = {
+  title: "How Our Services Will Help You to Grow Your Business",
+  subtitle: "Our Working Process",
+  metaDescription: "Explore our innovative services in AI, Quantum Computing, 3D Design, and EV Technology to accelerate your business growth.",
+  experiences: [
+    {
+      id: "exp-0",
+      icon: Monitor,
+      title: "AI in Medical Industry",
+      description: "Using efficient AI infrastructure, our primary focus is to disrupt and revolutionize the healthcare business by innovatively redefining the quality of medical services.",
+      stats: "100% AI-Driven"
+    },
+    {
+      id: "exp-1",
+      icon: Cpu,
+      title: "Quantum Computing Acceleration",
+      description: "With faster hardware's accelerating the efficiency of quantum computing setups, complex computing problems and demands can be handled in a limited timeframe.",
+      stats: "100x Faster"
+    },
+    {
+      id: "exp-2",
+      icon: Box,
+      title: "3D Design Engineering",
+      description: "Modern design and engineering approaches for 3D project or product outcome is a reliable approach to achieving a more efficient, budget-friendly, and solution-providing design and infrastructure outcome.",
+      stats: "$200k Saved"
+    },
+    {
+      id: "exp-3",
+      icon: BatteryCharging,
+      title: "EV PCB Board Designs",
+      description: "Use advanced technological infrastructure to curb emissions, driving your business and the consumers associated with it towards a safer and better future.",
+      stats: "Zero Emission"
+    }
+  ]
+};
+
+export const ANIMATION_CONFIG = {
+  card: {
+    initial: {
+      opacity: 0,
+      y: 50,
+      scale: 0.95,
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      duration: 0.8,
+      ease: "power3.out"
+    },
+    trigger: {
+      start: "top bottom-=100",
+      toggleActions: "play none none reverse"
+    }
+  },
+  header: {
+    duration: 0.8,
+    ease: "power3.out",
+    trigger: {
+      start: "top center+=100"
+    }
+  }
+};
diff --git a/src/components/ExperienceSection/config/schema.js b/src/components/ExperienceSection/config/schema.js
new file mode 100644
index 0000000..69c6c74
--- /dev/null
+++ b/src/components/ExperienceSection/config/schema.js
@@ -0,0 +1,12 @@
+export const experienceSchema = {
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "name": "Business Growth Services",
+  "provider": {
+    "@type": "Organization",
+    "name": "Your Company Name"
+  },
+  "serviceType": ["AI Services", "Quantum Computing", "3D Design", "EV Technology"],
+  "description": "Comprehensive business growth services including AI in healthcare, quantum computing acceleration, 3D design engineering, and EV PCB board designs.",
+  "areaServed": "Worldwide"
+};
diff --git a/src/components/ExperienceSection/hooks/useExperienceData.js b/src/components/ExperienceSection/hooks/useExperienceData.js
new file mode 100644
index 0000000..68a67ae
--- /dev/null
+++ b/src/components/ExperienceSection/hooks/useExperienceData.js
@@ -0,0 +1,26 @@
+import { useState, useEffect, useMemo } from 'react';
+import { SECTION_CONFIG } from '../config/constants';
+import { processExperienceData } from '../utils/experienceHelpers';
+
+export const useExperienceData = () => {
+  const [experiences, setExperiences] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const memoizedProcessedData = useMemo(() => {
+    return processExperienceData(SECTION_CONFIG.experiences);
+  }, []);
+
+  useEffect(() => {
+    try {
+      setExperiences(memoizedProcessedData);
+      setIsLoading(false);
+    } catch (err) {
+      console.error("Error processing experience data:", err);
+      setError(err);
+      setIsLoading(false);
+    }
+  }, [memoizedProcessedData]);
+
+  return { experiences, isLoading, error };
+};
diff --git a/src/components/ExperienceSection/hooks/useScrollAnimation.js b/src/components/ExperienceSection/hooks/useScrollAnimation.js
new file mode 100644
index 0000000..e699e8f
--- /dev/null
+++ b/src/components/ExperienceSection/hooks/useScrollAnimation.js
@@ -0,0 +1,35 @@
+import { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import ScrollTrigger from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export const useScrollAnimation = (options = {}) => {
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    const element = elementRef.current;
+    const animation = gsap.fromTo(
+      element,
+      { opacity: 0, y: 50 },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.8,
+        scrollTrigger: {
+          trigger: element,
+          start: "top bottom-=100",
+          toggleActions: "play none none reverse",
+          ...options
+        }
+      }
+    );
+
+    return () => {
+      if (animation) animation.kill();
+      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
+    };
+  }, [options]);
+
+  return elementRef;
+};
diff --git a/src/components/ExperienceSection/styles/ExperienceCard.css b/src/components/ExperienceSection/styles/ExperienceCard.css
new file mode 100644
index 0000000..b31ded4
--- /dev/null
+++ b/src/components/ExperienceSection/styles/ExperienceCard.css
@@ -0,0 +1,43 @@
+.experience-card {
+  @apply relative bg-white rounded-2xl p-6 lg:p-8 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1;
+}
+
+.card-pattern {
+  @apply absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-bl-full opacity-20 transition-all duration-300;
+}
+
+.group:hover .card-pattern {
+  @apply bg-blue-100;
+}
+
+.experience-card-content {
+  @apply relative;
+}
+
+.card-icon-wrapper {
+  @apply p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg;
+}
+
+.card-title {
+  @apply text-xl lg:text-2xl font-bold text-gray-800 mb-2 line-clamp-2;
+}
+
+.card-stats {
+  @apply inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-semibold rounded-full;
+}
+
+.experience-description {
+  @apply text-gray-600 leading-relaxed mb-6 line-clamp-4 lg:line-clamp-none;
+}
+
+.experience-button {
+  @apply inline-flex items-center text-blue-600 font-semibold cursor-pointer;
+}
+
+.experience-button-icon {
+  @apply w-5 h-5 transition-transform duration-300;
+}
+
+.group:hover .experience-button-icon {
+  @apply translate-x-1;
+}
diff --git a/src/components/ExperienceSection/styles/ExperienceHeader.css b/src/components/ExperienceSection/styles/ExperienceHeader.css
new file mode 100644
index 0000000..9e1e305
--- /dev/null
+++ b/src/components/ExperienceSection/styles/ExperienceHeader.css
@@ -0,0 +1,15 @@
+.section-header {
+  @apply text-center mb-16 lg:mb-24;
+}
+
+.header-subtitle {
+  @apply text-sm lg:text-base font-bold text-blue-600 tracking-wider uppercase mb-4;
+}
+
+.header-title {
+  @apply text-3xl lg:text-5xl font-bold text-gray-900 mb-6 max-w-3xl mx-auto leading-tight;
+}
+
+.header-line {
+  @apply w-24 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto rounded-full;
+}
diff --git a/src/components/ExperienceSection/styles/ExperienceSection.css b/src/components/ExperienceSection/styles/ExperienceSection.css
new file mode 100644
index 0000000..aba8a76
--- /dev/null
+++ b/src/components/ExperienceSection/styles/ExperienceSection.css
@@ -0,0 +1,44 @@
+.card-pattern {
+  @apply absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-bl-full opacity-20 transition-all duration-300 group-hover:bg-blue-100;
+}
+
+.card-icon-wrapper {
+  @apply p-3 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl shadow-lg;
+}
+
+.card-title {
+  @apply text-xl lg:text-2xl font-bold text-gray-800 mb-2 line-clamp-2;
+}
+
+.card-stats {
+  @apply inline-block px-3 py-1 bg-blue-50 text-blue-600 text-sm font-semibold rounded-full;
+}
+
+.section-header {
+  @apply text-center mb-16 lg:mb-24;
+}
+
+.header-subtitle {
+  @apply text-sm lg:text-base font-bold text-blue-600 tracking-wider uppercase mb-4;
+}
+
+.header-title {
+  @apply text-3xl lg:text-5xl font-bold text-gray-900 mb-6 max-w-3xl mx-auto leading-tight;
+}
+
+.header-line {
+  @apply w-24 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto rounded-full;
+}
+
+.experience-section {
+  /* Additional styles if needed */
+}
+
+.experience-grid {
+  /* Additional styles if needed */
+}
+
+.header-placeholder,
+.card-placeholder {
+  border-radius: 0.5rem;
+}
diff --git a/src/components/ExperienceSection/utils/experienceHelpers.js b/src/components/ExperienceSection/utils/experienceHelpers.js
new file mode 100644
index 0000000..80c9964
--- /dev/null
+++ b/src/components/ExperienceSection/utils/experienceHelpers.js
@@ -0,0 +1,25 @@
+export const processExperienceData = (experiences) => {
+  return experiences.map((experience, index) => ({
+    ...experience,
+    id: `exp-${index}`,
+    animationDelay: index * 0.2,
+    className: `experience-card-${index}`
+  }));
+};
+
+export const debounce = (func, wait) => {
+  let timeout;
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout);
+      func(...args);
+    };
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+};
+
+export const validateExperienceData = (experience) => {
+  const requiredFields = ['title', 'description', 'icon'];
+  return requiredFields.every(field => !!experience[field]);
+};
diff --git a/src/components/Header/Navbar.jsx b/src/components/Header/Navbar.jsx
new file mode 100644
index 0000000..7152b23
--- /dev/null
+++ b/src/components/Header/Navbar.jsx
@@ -0,0 +1,161 @@
+import React, { useState, useEffect, useRef, lazy, Suspense, useCallback, memo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiSearch, FiChevronDown, FiMenu, FiX } from 'react-icons/fi';
+import { Link } from 'react-router-dom';
+import ErrorBoundary from '../common/ErrorBoundary';
+import OptimizedImage from '../common/OptimizedImage';
+import { menuItems, languages, mobileMenuVariants } from './constants/navigationData';
+import { headerSchema } from './schema/headerSchema';
+import styles from './styles/Header.module.css';
+import baseStyles from './styles/base.module.css';
+import Logo from '@/assets/Logo/Tech4biz-logo.webp';
+
+const SearchOverlay = lazy(() => import('./components/SearchOverlay'));
+const DesktopNav = lazy(() => import('./components/DesktopNav'));
+const MobileNav = lazy(() => import('./components/MobileNav'));
+const LanguageSelector = lazy(() => import('./components/LanguageSelector'));
+
+const Navbar = () => {
+  // State management remains the same
+  const [state, setState] = useState({
+    isProductsOpen: false,
+    isLanguageOpen: false,
+    isMobileLanguageOpen: false,
+    isMobileMenuOpen: false,
+    isSearchOpen: false,
+    selectedLanguage: 'English',
+    isSticky: false
+  });
+
+  // Refs and handlers remain the same
+  const desktopLanguageRef = useRef(null);
+  const mobileLanguageRef = useRef(null);
+
+  // Event handlers with useCallback remain the same
+  const handleClickOutside = useCallback((event) => {
+    if (desktopLanguageRef.current && !desktopLanguageRef.current.contains(event.target)) {
+      setState(prev => ({ ...prev, isLanguageOpen: false }));
+    }
+    if (mobileLanguageRef.current && !mobileLanguageRef.current.contains(event.target)) {
+      setState(prev => ({ ...prev, isMobileLanguageOpen: false }));
+    }
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    setState(prev => ({ ...prev, isSticky: window.scrollY > 0 }));
+  }, []);
+
+  // Effects remain the same
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('scroll', handleScroll);
+
+    const script = document.createElement('script');
+    script.type = 'application/ld+json';
+    script.text = JSON.stringify(headerSchema);
+    document.head.appendChild(script);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll);
+      document.head.removeChild(script);
+    };
+  }, [handleClickOutside, handleScroll]);
+
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<div>Loading...</div>}>
+        <SearchOverlay 
+          isOpen={state.isSearchOpen} 
+          onClose={() => setState(prev => ({ ...prev, isSearchOpen: false }))} 
+        />
+        
+        <nav className={`${styles.navContainer} ${state.isSticky ? styles.stickyNav : ''}`}>
+          <div className={baseStyles.container}>
+            <div className={`${baseStyles.flexBetween} h-16`}>
+              <div className={`${baseStyles.flexCenter} space-x-4`}>
+                <Link to="/" className="flex-shrink-0">
+                  <OptimizedImage
+                    src={Logo}
+                    alt="Tech4biz Logo"
+                    width={180}
+                    height={36}
+                    className="h-9 w-auto"
+                    loading="eager"
+                    priority={true}
+                  />
+                </Link>
+                
+                {/* Mobile search and language */}
+                <div className="md:hidden flex items-center space-x-3">
+                  <button 
+                    onClick={() => setState(prev => ({ ...prev, isSearchOpen: true }))}
+                    className={styles.searchButton}
+                    aria-label="Search"
+                  >
+                    <FiSearch className="h-5 w-5" />
+                  </button>
+                  
+                  <LanguageSelector
+                    isDesktop={false}
+                    isOpen={state.isMobileLanguageOpen}
+                    selectedLanguage={state.selectedLanguage}
+                    languageRef={mobileLanguageRef}
+                    setState={setState}
+                  />
+                </div>
+              </div>
+
+              <DesktopNav 
+                isProductsOpen={state.isProductsOpen}
+                setIsProductsOpen={(value) => setState(prev => ({ ...prev, isProductsOpen: value }))}
+              />
+
+              {/* Desktop search and language */}
+              <div className="hidden md:flex items-center space-x-4">
+                <button 
+                  onClick={() => setState(prev => ({ ...prev, isSearchOpen: true }))}
+                  className={styles.searchButton}
+                  aria-label="Search"
+                >
+                  <FiSearch className="h-5 w-5" />
+                </button>
+                
+                <LanguageSelector
+                  isDesktop={true}
+                  isOpen={state.isLanguageOpen}
+                  selectedLanguage={state.selectedLanguage}
+                  languageRef={desktopLanguageRef}
+                  setState={setState}
+                />
+              </div>
+
+              {/* Mobile menu toggle button */}
+              <button
+                className="md:hidden text-gray-600 hover:text-[#1E0E62] transition-colors"
+                onClick={() => setState(prev => ({ 
+                  ...prev, 
+                  isMobileMenuOpen: !prev.isMobileMenuOpen 
+                }))}
+                aria-label="Toggle mobile menu"
+              >
+                {state.isMobileMenuOpen ? (
+                  <FiX className="h-6 w-6" />
+                ) : (
+                  <FiMenu className="h-6 w-6" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <MobileNav 
+            isMobileMenuOpen={state.isMobileMenuOpen}
+            setState={setState}
+          />
+        </nav>
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default memo(Navbar);
\ No newline at end of file
diff --git a/src/components/Header/components/DesktopNav.jsx b/src/components/Header/components/DesktopNav.jsx
new file mode 100644
index 0000000..1ee9462
--- /dev/null
+++ b/src/components/Header/components/DesktopNav.jsx
@@ -0,0 +1,70 @@
+import React, { memo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiChevronDown } from 'react-icons/fi';
+import { Link } from 'react-router-dom';
+import { menuItems } from '../constants/navigationData';
+import ProductShowcase from './ProductShowcase';
+import styles from '../styles/DesktopNav.module.css';
+import baseStyles from '../styles/base.module.css';
+
+const DesktopNav = memo(({ isProductsOpen, setIsProductsOpen }) => {
+  const handleProductsClick = (e) => {
+    e.stopPropagation();
+    setIsProductsOpen(!isProductsOpen);
+  };
+
+  const getItemPath = (item) => {
+    switch (item) {
+      case 'HOME':
+        return '/';
+      case 'SERVICES':
+        return '/services';
+      case 'ABOUT':
+        return '/about';
+      case 'CONTACT':
+        return '/contact';
+      default:
+        return '#';
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      {menuItems.map((item) => (
+        <div key={item} className="relative">
+          {item === 'PRODUCTS' ? (
+            <div>
+              <button 
+                className={styles.menuButton}
+                onClick={handleProductsClick}
+                aria-expanded={isProductsOpen}
+                aria-haspopup="true"
+                data-products-trigger
+              >
+                {item}
+                <FiChevronDown 
+                  className={`ml-1 transition-transform duration-300 ${isProductsOpen ? 'rotate-180' : ''}`} 
+                  aria-hidden="true" 
+                />
+              </button>
+              <AnimatePresence mode="wait">
+                {isProductsOpen && <ProductShowcase setIsProductsOpen={setIsProductsOpen} />}
+              </AnimatePresence>
+            </div>
+          ) : (
+            <Link
+              to={getItemPath(item)}
+              className={styles.menuLink}
+            >
+              {item}
+            </Link>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+});
+
+DesktopNav.displayName = 'DesktopNav';
+
+export default DesktopNav;
\ No newline at end of file
diff --git a/src/components/Header/components/LanguageSelector.jsx b/src/components/Header/components/LanguageSelector.jsx
new file mode 100644
index 0000000..7764ecb
--- /dev/null
+++ b/src/components/Header/components/LanguageSelector.jsx
@@ -0,0 +1,62 @@
+import React, { memo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiChevronDown } from 'react-icons/fi';
+import { languages } from '../constants/navigationData';
+import styles from '../styles/LanguageSelector.module.css';
+
+const LanguageSelector = memo(({ 
+  isDesktop = true,
+  isOpen,
+  selectedLanguage,
+  languageRef,
+  setState 
+}) => {
+  return (
+    <div ref={languageRef} className={`${styles.container} ${isDesktop ? 'hidden md:block' : ''}`}>
+      <button
+        onClick={() => setState(prev => ({ 
+          ...prev, 
+          [isDesktop ? 'isLanguageOpen' : 'isMobileLanguageOpen']: !isOpen 
+        }))}
+        className={styles.languageButton}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        {selectedLanguage}
+        <FiChevronDown className={`ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+      </button>
+
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 10 }}
+            className={styles.dropdown}
+            role="listbox"
+          >
+            {languages.map((language) => (
+              <button
+                key={language}
+                className={styles.dropdownItem}
+                onClick={() => setState(prev => ({ 
+                  ...prev, 
+                  selectedLanguage: language,
+                  [isDesktop ? 'isLanguageOpen' : 'isMobileLanguageOpen']: false 
+                }))}
+                role="option"
+                aria-selected={selectedLanguage === language}
+              >
+                {language}
+              </button>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+});
+
+LanguageSelector.displayName = 'LanguageSelector';
+
+export default LanguageSelector;
\ No newline at end of file
diff --git a/src/components/Header/components/MobileNav.jsx b/src/components/Header/components/MobileNav.jsx
new file mode 100644
index 0000000..32c7216
--- /dev/null
+++ b/src/components/Header/components/MobileNav.jsx
@@ -0,0 +1,90 @@
+import React, { memo, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiChevronDown } from 'react-icons/fi';
+import { Link } from 'react-router-dom';
+import { menuItems, mobileMenuVariants } from '../constants/navigationData';
+import MobileProductShowcase from './MobileProductShowcase';
+import styles from '../styles/MobileNav.module.css';
+
+const MobileNav = memo(({ isMobileMenuOpen, setState }) => {
+  const [isProductsOpen, setIsProductsOpen] = useState(false);
+
+  const getItemPath = (item) => {
+    switch (item) {
+      case 'HOME':
+        return '/';
+      case 'SERVICES':
+        return '/services';
+      case 'ABOUT':
+        return '/about';
+      case 'CONTACT':
+        return '/contact';
+      default:
+        return '#';
+    }
+  };
+
+  return (
+    <AnimatePresence>
+      {isMobileMenuOpen && (
+        <motion.div
+          initial="closed"
+          animate="open"
+          exit="closed"
+          variants={mobileMenuVariants}
+          transition={{ duration: 0.3, ease: "easeInOut" }}
+          className={styles.container}
+          role="dialog"
+          aria-modal="true"
+          aria-label="Mobile navigation menu"
+        >
+          <div className="flex flex-col h-full">
+            <div className="overflow-y-auto">
+              {menuItems.map((item) => (
+                <div key={item}>
+                  {item === 'PRODUCTS' ? (
+                    <>
+                      <button
+                        className={styles.menuButton}
+                        onClick={() => setIsProductsOpen(!isProductsOpen)}
+                        aria-expanded={isProductsOpen}
+                      >
+                        {item}
+                        <FiChevronDown 
+                          className={`ml-1 transition-transform duration-300 ${isProductsOpen ? 'rotate-180' : ''}`}
+                        />
+                      </button>
+                      <AnimatePresence>
+                        {isProductsOpen && (
+                          <motion.div
+                            initial={{ height: 0, opacity: 0 }}
+                            animate={{ height: 'auto', opacity: 1 }}
+                            exit={{ height: 0, opacity: 0 }}
+                            transition={{ duration: 0.3 }}
+                            className="overflow-hidden"
+                          >
+                            <MobileProductShowcase />
+                          </motion.div>
+                        )}
+                      </AnimatePresence>
+                    </>
+                  ) : (
+                    <Link
+                      to={getItemPath(item)}
+                      className={styles.menuLink}
+                      onClick={() => setState(prev => ({ ...prev, isMobileMenuOpen: false }))}
+                    >
+                      {item}
+                    </Link>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+});
+
+export default MobileNav;
\ No newline at end of file
diff --git a/src/components/Header/components/MobileProductShowcase.jsx b/src/components/Header/components/MobileProductShowcase.jsx
new file mode 100644
index 0000000..634972c
--- /dev/null
+++ b/src/components/Header/components/MobileProductShowcase.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { products } from '../constants/navigationData';
+import styles from '../styles/MobileProductShowcase.module.css';
+
+const MobileProductShowcase = () => {
+  return (
+    <div className={styles.container}>
+      <div className={styles.productList}>
+        {products.map((product) => (
+          <motion.div
+            key={product.id}
+            className={styles.productCard}
+            whileHover={{ x: 5 }}
+            transition={{ duration: 0.2 }}
+          >
+            <h3 className={styles.productTitle}>
+              {product.name}
+            </h3>
+            <p className={styles.productDescription}>
+              {product.description}
+            </p>
+          </motion.div>
+        ))}
+        
+        <div className={styles.buttonContainer}>
+          <motion.button
+            className={styles.viewAllButton}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            View All Products
+            <svg 
+              className="ml-2 w-5 h-5" 
+              xmlns="http://www.w3.org/2000/svg" 
+              fill="none" 
+              viewBox="0 0 24 24" 
+              stroke="currentColor"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </motion.button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MobileProductShowcase;
diff --git a/src/components/Header/components/ProductShowcase.jsx b/src/components/Header/components/ProductShowcase.jsx
new file mode 100644
index 0000000..220972d
--- /dev/null
+++ b/src/components/Header/components/ProductShowcase.jsx
@@ -0,0 +1,167 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import styles from '../styles/ProductShowcase.module.css';
+import baseStyles from '../styles/base.module.css';
+import { products, productList } from '../constants/navigationData';
+
+const containerVariants = {
+  initial: {
+    opacity: 0,
+    y: -10,
+  },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.15,
+      ease: "easeOut"
+    }
+  },
+  exit: {
+    opacity: 0,
+    y: -10,
+    transition: {
+      duration: 0.15,
+      ease: "easeIn"
+    }
+  }
+};
+
+const ProductShowcase = ({ setIsProductsOpen }) => {
+  const [hoveredIndex, setHoveredIndex] = useState(0);
+  const [isFirstItemLocked, setIsFirstItemLocked] = useState(true);
+  const showcaseRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (
+        showcaseRef.current && 
+        !showcaseRef.current.contains(event.target) &&
+        !event.target.closest('[data-products-trigger]')
+      ) {
+        setIsProductsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside, true);
+    return () => document.removeEventListener('mousedown', handleClickOutside, true);
+  }, [setIsProductsOpen]);
+
+  return (
+    <motion.div 
+      ref={showcaseRef}
+      variants={containerVariants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      className={styles.container}
+      style={{ top: '64px' }}
+    >
+      <div className={baseStyles.container}>
+        <div className="flex flex-col lg:flex-row gap-8">
+          <div className={styles.productGrid}>
+            {products.map((product) => (
+              <motion.div
+                key={product.id}
+                className={`group ${styles.productCard}`}
+                whileHover={{ scale: 1.02 }}
+                transition={{ duration: 0.2 }}
+              >
+                <div className={styles.productImage}>
+                  <img
+                    src={product.image}
+                    alt={product.name}
+                    className="w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105"
+                    loading="lazy"
+                  />
+                </div>
+                <h3 className={styles.productTitle}>
+                  {product.name}
+                </h3>
+                <p className={styles.productDescription}>
+                  {product.description}
+                </p>
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Desktop view for All Products */}
+          <div className="hidden lg:block lg:w-1/3">
+            <h2 className={styles.sidebarTitle}>All Products</h2>
+            <div className="space-y-4">
+              {productList.map((product, index) => (
+                <motion.div
+                  key={index}
+                  className={styles.sidebarItem}
+                  whileHover={{ x: 5 }}
+                  transition={{ duration: 0.2 }}
+                  onMouseEnter={() => setHoveredIndex(index)}
+                  onMouseLeave={() => setHoveredIndex(null)}
+                >
+                  <div className={styles.sidebarContent}>
+                    <h3 className={styles.productTitle}>
+                      {product.name}
+                    </h3>
+                    <AnimatePresence mode="popLayout">
+                      {hoveredIndex === index && (
+                        <motion.div
+                          className={styles.expandedContent}
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ 
+                            height: "auto",
+                            opacity: 1,
+                            transition: {
+                              height: { duration: 0.2 },
+                              opacity: { duration: 0.1, delay: 0.1 }
+                            }
+                          }}
+                          exit={{ 
+                            height: 0,
+                            opacity: 0,
+                            transition: {
+                              height: { duration: 0.2 },
+                              opacity: { duration: 0.1 }
+                            }
+                          }}
+                        >
+                          <p className={styles.productDescription}>
+                            {product.description}
+                          </p>
+                          <motion.button 
+                            className="text-[#6B7280] text-sm mt-2 hover:text-[#1E0E62] font-poppins inline-flex items-center"
+                            initial={{ opacity: 0 }}
+                            animate={{ opacity: 1 }}
+                            transition={{ delay: 0.15 }}
+                          >
+                            Read more
+                            <ChevronRight className="w-4 h-4 ml-1" />
+                          </motion.button>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                </motion.div>
+              ))}
+            </div>
+          </div>
+
+          {/* Mobile/Tablet view with View All Products button */}
+          <div className="lg:hidden w-full">
+            <motion.button
+              className={styles.viewAllButton}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => setIsProductsOpen(false)}
+            >
+              View All Products
+              <ChevronRight className="w-4 h-4 ml-1" />
+            </motion.button>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ProductShowcase;
diff --git a/src/components/Header/components/SearchOverlay.jsx b/src/components/Header/components/SearchOverlay.jsx
new file mode 100644
index 0000000..e57d7d7
--- /dev/null
+++ b/src/components/Header/components/SearchOverlay.jsx
@@ -0,0 +1,68 @@
+import React, { memo, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiSearch, FiX } from 'react-icons/fi';
+import { debounce } from 'lodash';
+import styles from '../styles/SearchOverlay.module.css';
+import baseStyles from '../styles/base.module.css';
+
+const SearchOverlay = memo(({ isOpen, onClose }) => {
+  const handleSearch = useCallback(
+    debounce((searchTerm) => {
+      console.log('Searching for:', searchTerm);
+    }, 300),
+    []
+  );
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.4 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className={styles.overlay}
+            onClick={onClose}
+            role="presentation"
+          />
+          
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className={styles.container}
+            role="dialog"
+            aria-label="Search overlay"
+          >
+            <div className={baseStyles.container}>
+              <div className={`${baseStyles.flexCenter} h-16 border-b border-gray-200`}>
+                <FiSearch className="h-5 w-5 text-gray-400" aria-hidden="true" />
+                <input
+                  type="search"
+                  placeholder="What are you looking for?"
+                  className={styles.searchInput}
+                  onChange={(e) => handleSearch(e.target.value)}
+                  aria-label="Search input"
+                  autoFocus
+                />
+                <button
+                  onClick={onClose}
+                  className={styles.closeButton}
+                  aria-label="Close search"
+                >
+                  <FiX className="h-5 w-5" />
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+});
+
+SearchOverlay.displayName = 'SearchOverlay';
+
+export default SearchOverlay;
\ No newline at end of file
diff --git a/src/components/Header/constants/navigationData.js b/src/components/Header/constants/navigationData.js
new file mode 100644
index 0000000..6b74da3
--- /dev/null
+++ b/src/components/Header/constants/navigationData.js
@@ -0,0 +1,81 @@
+import lmsImage from '@/assets/Header/Product-Card/learning-management-system.webp';
+import codenukImage from '@/assets/Header/Product-Card/codenuk-coding-solution-platform.webp';
+import cloudtopiaaImage from '@/assets/Header/Product-Card/cloudtopiaa-enterprise-solutions.webp';
+import cloudDriveImage from '@/assets/Header/Product-Card/cloud-drive-storage-platform.webp';
+
+export const menuItems = [
+  'HOME',
+  'PRODUCTS',
+  'SERVICES',
+  'ABOUT',
+  'CONTACT'
+];
+
+export const languages = ['English', 'Spanish', 'French'];
+
+export const mobileMenuVariants = {
+  closed: { opacity: 0, x: "100%" },
+  open: { opacity: 1, x: 0 }
+};
+
+export const products = [
+  {
+    id: 1,
+    name: 'CloudDriv',
+    image: cloudDriveImage,
+    description: 'Secure cloud storage for seamless sharing and collaboration.'
+  },
+  {
+    id: 2,
+    name: 'Codenuk',
+    image: codenukImage,
+    description: 'Breakthrough coding challenges instantly with Codenuk.'
+  },
+  {
+    id: 3,
+    name: 'LMS',
+    image: lmsImage,
+    description: 'Streamline education delivery with our comprehensive Learning Management System.'
+  },
+  {
+    id: 4,
+    name: 'Cloudtopiaa',
+    image: cloudtopiaaImage,
+    description: 'Secure, scalable cloud solutions that power your business growth.'
+  }
+];
+
+export const productList = [
+  {
+    name: "Product name one",
+    description: "Breakthrough coding challenges instantly with Codenuk. Secure cloud storage for seamless sharing and collaboration."
+  },
+  {
+    name: "Product name two",
+    description: "Advanced cloud computing solutions for enterprise-level businesses with scalable infrastructure."
+  },
+  {
+    name: "Product name three",
+    description: "Comprehensive learning management system with interactive features and real-time analytics."
+  },
+  {
+    name: "Product name four",
+    description: "Secure data storage solutions with enterprise-grade encryption and collaboration tools."
+  },
+  {
+    name: "Product name five",
+    description: "AI-powered development tools for faster and more efficient coding workflows."
+  },
+  {
+    name: "Product name six",
+    description: "Automated testing platform for comprehensive quality assurance and bug detection."
+  },
+  {
+    name: "Product name seven",
+    description: "DevOps automation tools for streamlined deployment and continuous integration."
+  },
+  {
+    name: "Product name eight",
+    description: "Cloud-native application platform with microservices architecture support."
+  }
+];
\ No newline at end of file
diff --git a/src/components/Header/schema/headerSchema.js b/src/components/Header/schema/headerSchema.js
new file mode 100644
index 0000000..73c3841
--- /dev/null
+++ b/src/components/Header/schema/headerSchema.js
@@ -0,0 +1,17 @@
+export const headerSchema = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    "name": "Tech4biz",
+    "url": "https://tech4biz.com",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://tech4biz.com/logo.webp",
+      "width": "180",
+      "height": "36"
+    },
+    "sameAs": [
+      "https://facebook.com/tech4biz",
+      "https://twitter.com/tech4biz",
+      "https://linkedin.com/company/tech4biz"
+    ]
+  };
\ No newline at end of file
diff --git a/src/components/Header/styles/DesktopNav.module.css b/src/components/Header/styles/DesktopNav.module.css
new file mode 100644
index 0000000..7836dab
--- /dev/null
+++ b/src/components/Header/styles/DesktopNav.module.css
@@ -0,0 +1,11 @@
+.container {
+  @apply hidden md:flex items-center space-x-8 max-[956px]:space-x-5;
+}
+
+.menuButton {
+  @apply flex items-center text-gray-600 hover:text-[#1E0E62] transition-colors font-poppins font-bold text-[14px];
+}
+
+.menuLink {
+  @apply text-gray-600 hover:text-[#1E0E62] transition-colors font-poppins font-bold text-[14px];
+}
diff --git a/src/components/Header/styles/Header.module.css b/src/components/Header/styles/Header.module.css
new file mode 100644
index 0000000..516b878
--- /dev/null
+++ b/src/components/Header/styles/Header.module.css
@@ -0,0 +1,25 @@
+.navContainer {
+    @apply fixed top-0 left-0 right-0 w-full bg-white transition-all duration-300 z-40;
+  }
+  
+  .stickyNav {
+    @apply shadow-md;
+  }
+  
+  .navLink {
+    @apply font-poppins font-bold text-[14px] text-gray-600 hover:text-[#1E0E62] transition-colors;
+  }
+  
+  .activeNavLink {
+    @apply text-[#1E0E62];
+  }
+  
+  .languageButton {
+    @apply flex items-center justify-between text-gray-600 hover:text-[#1E0E62] transition-colors border rounded-md px-3 py-1;
+  }
+  
+  .searchButton {
+    @apply text-gray-600 hover:text-[#1E0E62] transition-colors;
+    @apply max-md:scale-90;
+  }
+  
diff --git a/src/components/Header/styles/LanguageSelector.module.css b/src/components/Header/styles/LanguageSelector.module.css
new file mode 100644
index 0000000..646e855
--- /dev/null
+++ b/src/components/Header/styles/LanguageSelector.module.css
@@ -0,0 +1,17 @@
+.container {
+  @apply relative;
+}
+
+.languageButton {
+  @apply flex items-center justify-between text-gray-600 hover:text-[#1E0E62] transition-colors border rounded-md px-3 py-1;
+  @apply max-md:text-sm max-md:px-2 max-md:py-0.5;
+}
+
+.dropdown {
+  @apply absolute mt-2 w-40 bg-white rounded-md shadow-lg z-50;
+  @apply max-md:right-0 md:right-[-35px];
+}
+
+.dropdownItem {
+  @apply block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100;
+}
diff --git a/src/components/Header/styles/MobileNav.module.css b/src/components/Header/styles/MobileNav.module.css
new file mode 100644
index 0000000..d8e628d
--- /dev/null
+++ b/src/components/Header/styles/MobileNav.module.css
@@ -0,0 +1,11 @@
+.container {
+  @apply md:hidden fixed top-16 right-0 h-[calc(100vh-64px)] w-full sm:w-[350px] z-30 bg-white shadow-lg overflow-y-auto;
+}
+
+.menuButton {
+  @apply w-full flex justify-between items-center px-4 py-3 text-gray-600 hover:bg-[#1E0E62]/5 font-poppins font-bold text-[14px];
+}
+
+.menuLink {
+  @apply block px-4 py-3 text-gray-600 hover:bg-[#1E0E62]/5 font-poppins font-bold text-[14px];
+}
diff --git a/src/components/Header/styles/MobileProductShowcase.module.css b/src/components/Header/styles/MobileProductShowcase.module.css
new file mode 100644
index 0000000..c169945
--- /dev/null
+++ b/src/components/Header/styles/MobileProductShowcase.module.css
@@ -0,0 +1,27 @@
+.container {
+  @apply bg-gray-50 px-4 py-4;
+}
+
+.productList {
+  @apply space-y-6;
+}
+
+.productCard {
+  @apply cursor-pointer;
+}
+
+.productTitle {
+  @apply text-[18px] font-[500] text-[#1E0E62] font-poppins;
+}
+
+.productDescription {
+  @apply text-[14px] font-[500] text-[#6B7280] font-poppins mt-1;
+}
+
+.buttonContainer {
+  @apply pt-4 text-center border-t border-gray-200;
+}
+
+.viewAllButton {
+  @apply inline-flex items-center px-4 py-2 bg-[#1E0E62] text-white font-semibold rounded-lg hover:bg-[#1E0E62] transition-colors font-poppins;
+}
diff --git a/src/components/Header/styles/ProductShowcase.module.css b/src/components/Header/styles/ProductShowcase.module.css
new file mode 100644
index 0000000..ede92e8
--- /dev/null
+++ b/src/components/Header/styles/ProductShowcase.module.css
@@ -0,0 +1,43 @@
+.container {
+  @apply fixed left-0 right-0 w-full bg-white shadow-lg z-50 border-b-[5px] border-[#2563EB] py-6;
+}
+
+.productGrid {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-4 lg:w-2/3;
+}
+
+.productCard {
+  @apply cursor-pointer p-2;
+}
+
+.productImage {
+  @apply hidden md:block relative overflow-hidden rounded-lg mb-2;
+}
+
+.productTitle {
+  @apply mt-2 text-[22px] font-[500] text-[#1E0E62] font-poppins;
+}
+
+.productDescription {
+  @apply mt-2 text-[14px] font-[500] text-[#6B7280] font-poppins mb-2;
+}
+
+.sidebarTitle {
+  @apply text-[32px] font-[700] text-[#1E0E62] mb-6 font-poppins;
+}
+
+.sidebarItem {
+  @apply cursor-pointer mb-6 bg-white;
+}
+
+.viewAllButton {
+  @apply w-full flex items-center justify-center px-4 py-3 bg-[#1E0E62] text-white font-semibold rounded-lg hover:bg-[#1E0E62]/90 transition-colors font-poppins mt-4;
+}
+
+.sidebarContent {
+  @apply relative overflow-hidden;
+}
+
+.expandedContent {
+  @apply overflow-hidden;
+}
diff --git a/src/components/Header/styles/SearchOverlay.module.css b/src/components/Header/styles/SearchOverlay.module.css
new file mode 100644
index 0000000..0951805
--- /dev/null
+++ b/src/components/Header/styles/SearchOverlay.module.css
@@ -0,0 +1,15 @@
+.overlay {
+  @apply fixed inset-0 bg-white z-40;
+}
+
+.container {
+  @apply fixed top-0 left-0 right-0 bg-white z-50;
+}
+
+.searchInput {
+  @apply flex-1 px-4 text-gray-600 placeholder-gray-400 bg-transparent border-none focus:outline-none focus:ring-0;
+}
+
+.closeButton {
+  @apply text-gray-400 hover:text-[#1E0E62] transition-colors;
+}
diff --git a/src/components/Header/styles/base.module.css b/src/components/Header/styles/base.module.css
new file mode 100644
index 0000000..6f1a764
--- /dev/null
+++ b/src/components/Header/styles/base.module.css
@@ -0,0 +1,31 @@
+.container {
+  @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
+}
+
+.flexCenter {
+  @apply flex items-center;
+}
+
+.flexBetween {
+  @apply flex justify-between items-center;
+}
+
+.transitionBase {
+  @apply transition-all duration-300;
+}
+
+.textBase {
+  @apply font-poppins font-bold text-[14px];
+}
+
+.textPrimary {
+  @apply text-[#1E0E62];
+}
+
+.textGray {
+  @apply text-gray-600;
+}
+
+.hoverPrimary {
+  @apply hover:text-[#1E0E62] transition-colors;
+}
diff --git a/src/components/Hero/ErrorBoundary.jsx b/src/components/Hero/ErrorBoundary.jsx
new file mode 100644
index 0000000..01907d4
--- /dev/null
+++ b/src/components/Hero/ErrorBoundary.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+class HeroErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Hero component error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen bg-[#001324] text-white flex items-center justify-center">
+          <div className="text-center">
+            <h1 className="text-2xl mb-4">Something went wrong</h1>
+            <button 
+              onClick={() => this.setState({ hasError: false })}
+              className="px-4 py-2 bg-blue-600 rounded-full"
+            >
+              Try again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default HeroErrorBoundary;
\ No newline at end of file
diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx
new file mode 100644
index 0000000..c28f80a
--- /dev/null
+++ b/src/components/Hero/Hero.jsx
@@ -0,0 +1,123 @@
+import React, { lazy, Suspense } from 'react';
+import { motion } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { debounce } from 'lodash';
+import styles from './styles/styles.module.css';
+import { ANIMATION_VARIANTS } from './constants/index';
+import HeroErrorBoundary from './ErrorBoundary';
+import AsyncComponent from '../utils/AsyncComponent';
+
+const VideoPreview = lazy(() => import('./components/VideoPreview'));
+const LogoCarousel = lazy(() => import('./components/LogoCarousel'));
+
+const Hero = () => {
+  const handleButtonClick = debounce((action) => {
+    console.log(`Button clicked: ${action}`);
+  }, 300);
+
+  return (
+    <HeroErrorBoundary>
+      <div className={styles.heroSection}>
+        <Helmet>
+          <title>Tech4biz - The Reliable And Affordable IT Support Company</title>
+          <meta name="description" content="Comprehensive IT solutions by Tech4Biz: cloud computing, data management, security, networking, and IT support, customized for your business." />
+        </Helmet>
+
+        <motion.div 
+          className={styles.wrapper}
+          variants={ANIMATION_VARIANTS.container}
+          initial="hidden"
+          animate="visible"
+        >
+          <motion.div 
+            className={styles.heroContent}
+            variants={ANIMATION_VARIANTS.item}
+          >
+            <motion.h1 
+              className={styles.heading}
+              variants={ANIMATION_VARIANTS.item}
+            >
+              The Leading IT Solutions Company for Businesses
+            </motion.h1>
+            
+            <motion.p 
+              className={styles.subheading}
+              variants={ANIMATION_VARIANTS.item}
+            >
+              Tech4Biz provides reliable IT solutions, from cloud services and data management to network security and support. Our expertise helps businesses thrive, ensuring security, efficiency, and growth.
+            </motion.p>
+
+            <motion.div 
+              className={styles.ctaContainer}
+              variants={ANIMATION_VARIANTS.item}
+            >
+              <motion.button
+                className={styles.primaryButton}
+                whileHover={{ 
+                  scale: 1.05,
+                  boxShadow: "0 0 20px rgba(37, 99, 235, 0.5)",
+                  transition: { duration: 0.2, ease: "easeOut" }
+                }}
+                whileTap={{ 
+                  scale: 0.95,
+                  boxShadow: "0 0 5px rgba(37, 99, 235, 0.5)"
+                }}
+                initial={{ boxShadow: "0 0 0px rgba(37, 99, 235, 0)" }}
+                onClick={() => handleButtonClick('mission')}
+                aria-label="Learn about our mission"
+              >
+                <motion.span
+                  initial={{ x: 0 }}
+                  whileHover={{ x: 5 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  Our Mission →
+                </motion.span>
+              </motion.button>
+              
+              <motion.button
+                className={styles.secondaryButton}
+                whileHover={{ 
+                  scale: 1.05,
+                  backgroundColor: "rgba(255, 255, 255, 0.1)",
+                  borderColor: "rgba(255, 255, 255, 0.4)",
+                  transition: { duration: 0.2, ease: "easeOut" }
+                }}
+                whileTap={{ 
+                  scale: 0.95,
+                  backgroundColor: "rgba(255, 255, 255, 0.05)"
+                }}
+                onClick={() => handleButtonClick('contact')}
+                aria-label="Contact us"
+              >
+                <motion.span
+                  initial={{ x: 0 }}
+                  whileHover={{ x: 5 }}
+                  transition={{ duration: 0.2 }}
+                >
+                  Choose Us →
+                </motion.span>
+              </motion.button>
+            </motion.div>
+          </motion.div>
+
+          <AsyncComponent
+            component={VideoPreview}
+            fallback={
+              <div className="mt-16 h-96 animate-pulse bg-blue-600/20 rounded-2xl" />
+            }
+          />
+
+          <AsyncComponent
+            component={LogoCarousel}
+            fallback={
+              <div className="mt-20 h-32 animate-pulse bg-white/5 rounded-lg" />
+            }
+          />
+        </motion.div>
+      </div>
+    </HeroErrorBoundary>
+  );
+}
+
+export default Hero;
\ No newline at end of file
diff --git a/src/components/Hero/components/LogoCarousel.jsx b/src/components/Hero/components/LogoCarousel.jsx
new file mode 100644
index 0000000..08c6ff1
--- /dev/null
+++ b/src/components/Hero/components/LogoCarousel.jsx
@@ -0,0 +1,55 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { TRUSTED_BRANDS } from '../constants';
+import styles from '../styles/styles.module.css';
+
+const LogoCarousel = memo(() => {
+  const duplicatedBrands = [...TRUSTED_BRANDS, ...TRUSTED_BRANDS];
+
+  const carouselVariants = {
+    animate: {
+      x: [0, -50 * TRUSTED_BRANDS.length],
+      transition: {
+        x: {
+          repeat: Infinity,
+          repeatType: "loop",
+          duration: 20,
+          ease: "linear",
+        },
+      },
+    },
+  };
+
+  return (
+    <div className={styles.trustedSection}>
+      <h3 className={styles.trustedHeading}>
+        TRUSTED BY INDUSTRY LEADERS
+      </h3>
+      <div className={styles.carouselContainer}>
+        <motion.div
+          className={styles.carouselTrack}
+          variants={carouselVariants}
+          animate="animate"
+        >
+          {duplicatedBrands.map((brand, index) => (
+            <motion.div
+              key={`${brand.id}-${index}`}
+              className={styles.logoItem}
+              whileHover={{ scale: 1.1 }}
+            >
+              <img
+                src={brand.logo}
+                alt={`${brand.name} logo`}
+                className={styles.logoImage}
+                loading="lazy"
+              />
+            </motion.div>
+          ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+});
+
+LogoCarousel.displayName = 'LogoCarousel';
+export default LogoCarousel;
\ No newline at end of file
diff --git a/src/components/Hero/components/VideoPreview.jsx b/src/components/Hero/components/VideoPreview.jsx
new file mode 100644
index 0000000..ba85218
--- /dev/null
+++ b/src/components/Hero/components/VideoPreview.jsx
@@ -0,0 +1,260 @@
+import React, { memo, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { HERO_CONTENT } from '../constants/index';
+import styles from '../styles/styles.module.css';
+import { debounce } from 'lodash';
+
+const VideoPreview = memo(() => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isVideoLoaded, setIsVideoLoaded] = useState(false);
+  const videoRef = useRef(null);
+  const observerRef = useRef(null);
+  const intervalRef = useRef(null);
+
+  // Memoize current slide data
+  const currentSlide = useMemo(() => 
+    HERO_CONTENT.slides[currentIndex], 
+    [currentIndex]
+  );
+
+  // Intersection Observer setup
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '50px',
+      threshold: 0.1
+    };
+
+    observerRef.current = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (!entry.isIntersecting && isPlaying) {
+          handlePlayPause();
+        }
+      });
+    }, options);
+
+    if (videoRef.current) {
+      observerRef.current.observe(videoRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [isPlaying]);
+
+  const handlePlayPause = () => {
+    if (videoRef.current) {
+      if (isPlaying) {
+        videoRef.current.pause();
+        setIsPlaying(false);
+      } else {
+        videoRef.current.play()
+          .then(() => {
+            setIsPlaying(true);
+          })
+          .catch((error) => {
+            console.error("Video playback failed:", error);
+            setIsPlaying(false);
+          });
+      }
+    }
+  }; 
+
+  // Video cleanup on unmount
+  useEffect(() => {
+    return () => {
+      if (videoRef.current) {
+        videoRef.current.pause();
+      }
+    };
+  }, []);
+
+  // Handle slide interval
+  useEffect(() => {
+    if (!isPlaying) {
+      intervalRef.current = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % HERO_CONTENT.slides.length);
+      }, 5000);
+    } else {
+      clearInterval(intervalRef.current);
+    }
+
+    return () => clearInterval(intervalRef.current);
+  }, [isPlaying]);
+
+  // Update slide variants for smoother transitions
+  const slideVariants = useMemo(() => ({
+    heading: {
+      enter: {
+        x: -100,
+        opacity: 0
+      },
+      center: {
+        x: 0,
+        opacity: 1
+      },
+      exit: {
+        x: 100,
+        opacity: 0
+      }
+    },
+    subheading: {
+      enter: {
+        x: 100,
+        opacity: 0
+      },
+      center: {
+        x: 0,
+        opacity: 1
+      },
+      exit: {
+        x: -100,
+        opacity: 0
+      }
+    }
+  }), []);
+
+  // Add background transition variants
+  const backgroundVariants = useMemo(() => ({
+    initial: { 
+      scale: 1.05,
+      opacity: 0 
+    },
+    animate: { 
+      scale: 1,
+      opacity: 1 
+    },
+    exit: { 
+      scale: 1.05,
+      opacity: 0 
+    }
+  }), []);
+
+  // Optimized slide transition with debounce
+  const debouncedSlideChange = useCallback(
+    debounce((newIndex) => {
+      setCurrentIndex(newIndex);
+    }, 200),
+    []
+  );
+
+  return (
+    <motion.div className={styles.videoSection}>
+      <video
+        ref={videoRef}
+        className={styles.backgroundVideo}
+        style={{ opacity: isPlaying ? 1 : 0 }}
+        preload="metadata"
+        playsInline
+        loading="lazy"
+        onLoadedData={() => setIsVideoLoaded(true)}
+        loop
+        muted
+      >
+        <source src={HERO_CONTENT.video} type="video/mp4" />
+      </video>
+
+      <AnimatePresence mode="popLayout">
+        {!isPlaying && (
+          <motion.div
+            key={`slide-container-${currentIndex}`}
+            className={styles.slideContainer}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+          >
+            <motion.div 
+              className={styles.backgroundImage}
+              style={{ backgroundImage: `url(${currentSlide.background})` }}
+              variants={backgroundVariants}
+              transition={{ duration: 0.7 }}
+            />
+            
+            <motion.div 
+              className={styles.videoContent}
+              variants={{
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 }
+              }}
+              transition={{ duration: 0.7 }}
+            >
+              <div className={styles.headingWrapper}>
+                <AnimatePresence mode="popLayout">
+                  <motion.h2
+                    className={styles.videoHeading}
+                    variants={slideVariants.heading}
+                    key={`heading-${currentIndex}`}
+                    initial="enter"
+                    animate="center"
+                    exit="exit"
+                    transition={{ 
+                      duration: 0.7,
+                      ease: [0.4, 0.0, 0.2, 1]
+                    }}
+                  >
+                    {currentSlide.heading}
+                  </motion.h2>
+                </AnimatePresence>
+
+                <AnimatePresence mode="popLayout">
+                  <motion.p
+                    className={styles.videoSubheading}
+                    variants={slideVariants.subheading}
+                    key={`subheading-${currentIndex}`}
+                    initial="enter"
+                    animate="center"
+                    exit="exit"
+                    transition={{ 
+                      duration: 0.7,
+                      ease: [0.4, 0.0, 0.2, 1]
+                    }}
+                  >
+                    {currentSlide.subheading}
+                  </motion.p>
+                </AnimatePresence>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <motion.button
+        className={styles.playButton}
+        whileHover={{ scale: 1.1 }}
+        whileTap={{ scale: 0.95 }}
+        onClick={handlePlayPause}
+        aria-label={isPlaying ? "Pause video" : "Play video"}
+        disabled={!isVideoLoaded}
+      >
+        <motion.svg 
+          className="w-5 h-5" 
+          viewBox="0 0 24 24" 
+          fill="none" 
+          xmlns="http://www.w3.org/2000/svg"
+          animate={{ 
+            scale: [1, 1.2, 1],
+            transition: { 
+              repeat: Infinity, 
+              duration: 2,
+              ease: "easeInOut"
+            }
+          }}
+        >
+          {isPlaying ? (
+            <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" fill="currentColor"/>
+          ) : (
+            <path d="M8 5.14v14l11-7-11-7z" fill="currentColor"/>
+          )}
+        </motion.svg>
+        {isPlaying ? 'Pause' : 'Play'}
+      </motion.button>
+    </motion.div>
+  );
+});
+
+VideoPreview.displayName = 'VideoPreview';
+export default VideoPreview;
\ No newline at end of file
diff --git a/src/components/Hero/constants/index.js b/src/components/Hero/constants/index.js
new file mode 100644
index 0000000..b82d6e9
--- /dev/null
+++ b/src/components/Hero/constants/index.js
@@ -0,0 +1,55 @@
+import { imagePaths } from '@/constants/images';
+
+export const TRUSTED_BRANDS = [
+  { id: 1, name: 'AWS', logo: '/src/assets/Logo/AWS-Partner-Netwrok-tech4biz.webp' },
+  { id: 2, name: 'Tech4biz', logo: '/src/assets/Logo/Tech4biz-logo.webp' },
+  { id: 3, name: 'OpenAI', logo: '/src/assets/Logo/OPENAI-Partner-Tech4biz.webp' },
+  { id: 4, name: 'ISO', logo: '/src/assets/Logo/ISO-Partner-Tech4biz.webp' },
+  { id: 5, name: 'IBM', logo: '/src/assets/Logo/IBM-Tech4biz-partner.webp' },
+  { id: 6, name: 'Cloudtopia', logo: '/src/assets/Logo/Cloudtopiaa-Tech4biz.webp' },
+  { id: 7, name: 'Azure', logo: '/src/assets/Logo/AZURE-Partner-Tech4biz.webp' }
+];
+
+export const ANIMATION_VARIANTS = {
+  container: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: { delayChildren: 0.4, staggerChildren: 0.3 }
+    }
+  },
+  item: {
+    hidden: { y: 30, opacity: 0 },
+    visible: {
+      y: 0,
+      opacity: 1,
+      transition: { duration: 0.6, ease: "easeOut" }
+    }
+  }
+};
+
+export const HERO_CONTENT = {
+  video: imagePaths.video.hero,
+  slides: [
+    {
+      heading: "Business Technology Solutions",
+      subheading: "Technology Solutions for Business Efficiency",
+      background: imagePaths.heroSlides[0]
+    },
+    {
+      heading: "Cloud-First Business Strategy",
+      subheading: "Smart Technology for Better Business",
+      background: imagePaths.heroSlides[1]
+    },
+    {
+      heading: "AI-Driven Business Growth",
+      subheading: "Optimizing Growth with Data Strategy",
+      background: imagePaths.heroSlides[2]
+    },
+    {
+      heading: "Cybersecurity Excellence",
+      subheading: "Protecting Your Digital Assets 24/7",
+      background: imagePaths.heroSlides[3]
+    }
+  ]
+};
\ No newline at end of file
diff --git a/src/components/Hero/index.jsx b/src/components/Hero/index.jsx
new file mode 100644
index 0000000..49b3dba
--- /dev/null
+++ b/src/components/Hero/index.jsx
@@ -0,0 +1 @@
+export { default } from './Hero'; 
\ No newline at end of file
diff --git a/src/components/Hero/styles/styles.module.css b/src/components/Hero/styles/styles.module.css
new file mode 100644
index 0000000..494e611
--- /dev/null
+++ b/src/components/Hero/styles/styles.module.css
@@ -0,0 +1,177 @@
+.heroSection {
+    @apply min-h-screen bg-[#001324] text-white overflow-hidden relative;
+  }
+  
+  .wrapper {
+    @apply mx-auto px-4 py-8 pt-16 md:py-16 md:pt-24 max-w-7xl;
+  }
+  
+  .heroContent {
+    @apply max-w-6xl mx-auto text-center space-y-6;
+  }
+  
+  .heading {
+    @apply text-4xl md:text-6xl lg:text-7xl font-serif leading-tight;
+  }
+  
+  .subheading {
+    @apply text-lg md:text-xl text-gray-300 max-w-3xl mx-auto;
+  }
+  
+  .ctaContainer {
+    @apply flex flex-col sm:flex-row gap-4 justify-center pt-6;
+  }
+  
+  .primaryButton {
+    @apply px-8 py-3 bg-blue-600 rounded-full text-white font-medium 
+           hover:bg-blue-700 transition-colors;
+  }
+  
+  .secondaryButton {
+    @apply px-8 py-3 border border-white/20 rounded-full text-white font-medium 
+           hover:bg-white/10 transition-colors;
+  }
+  
+  .videoSection {
+    @apply relative w-full h-[600px] mt-12 rounded-2xl overflow-hidden;
+    transform: translateZ(0);
+    will-change: transform;
+    backface-visibility: hidden;
+  }
+  
+  .backgroundVideo {
+    @apply absolute inset-0 w-full h-full object-cover;
+    transition: opacity 0.6s ease-in-out;
+    transform: translateZ(0);
+    will-change: opacity;
+  }
+  
+  .backgroundVideo[data-playing="true"] {
+    opacity: 1;
+    z-index: 10;
+  }
+  
+  .playButton {
+    @apply absolute top-4 right-4 z-50 flex items-center gap-2 px-4 py-2 
+           bg-black/40 rounded-full text-white hover:bg-black/60 
+           transition-all duration-300;
+  }
+  
+  .backgroundImage {
+    @apply absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat;
+    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
+    transform: translateZ(0);
+    will-change: opacity, transform;
+  }
+  
+  .backgroundImage::after {
+    @apply content-[''] absolute inset-0 bg-gradient-to-br from-blue-900/60 to-black/60;
+  }
+  
+  .videoContent {
+    @apply absolute inset-0 flex items-center justify-center z-20 px-4;
+    pointer-events: none;
+  }
+  
+  .videoHeading {
+    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-serif leading-tight 
+           max-w-4xl mx-auto text-center relative z-20 text-white;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  .videoSubheading {
+    @apply block text-base sm:text-lg md:text-xl lg:text-2xl mt-2 md:mt-4 
+           font-light opacity-90 relative text-white max-w-3xl mx-auto text-center;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .videoSubheading {
+      transition: none;
+    }
+  }
+  
+  .trustedSection {
+    @apply mt-20 text-center;
+  }
+  
+  .trustedHeading {
+    @apply text-sm font-medium tracking-wider text-gray-400 mb-8;
+  }
+  
+  .logoGrid {
+    @apply flex flex-wrap justify-center items-center gap-8 md:gap-12 opacity-70;
+  }
+  
+  .carouselContainer {
+    @apply relative overflow-hidden w-full;
+  }
+  
+  .carouselTrack {
+    @apply flex items-center gap-8 md:gap-12;
+  }
+  
+  .logoItem {
+    @apply flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity;
+  }
+  
+  .logoImage {
+    @apply h-6 md:h-8 w-auto object-contain filter brightness-0 invert opacity-50 hover:opacity-100 transition-all duration-300;
+  }
+  
+  .headingWrapper {
+    @apply relative z-20 flex flex-col items-center justify-center text-center;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+  }
+  
+  .videoHeading {
+    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-serif leading-tight 
+           max-w-4xl mx-auto text-center relative z-20 text-white;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  .videoSubheading {
+    @apply block text-base sm:text-lg md:text-xl lg:text-2xl mt-2 md:mt-4 
+           font-light opacity-90 relative text-white max-w-3xl mx-auto text-center;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .videoHeading,
+    .videoSubheading {
+      @apply transition-none transform-none;
+    }
+  }
+  
+  .backgroundImage {
+    @apply absolute inset-0 w-full h-full bg-cover bg-center bg-no-repeat;
+  }
+  
+  .backgroundImage::after {
+    @apply content-[''] absolute inset-0 bg-gradient-to-br from-blue-900/80 to-black/80;
+  }
+  
+  .videoContent {
+    @apply absolute inset-0 flex items-center justify-center z-10 px-4;
+    transform: translateZ(0);
+    will-change: opacity, transform;
+    background: transparent;
+  }
+  
+  .headingWrapper {
+    @apply relative z-20 flex flex-col items-center justify-center;
+    perspective: 1000px;
+  }
+  
+  .videoHeading {
+    @apply text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-serif leading-tight 
+           max-w-4xl mx-auto text-center relative z-20 text-white;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  }
+  
+  .videoSubheading {
+    @apply block text-base sm:text-lg md:text-xl lg:text-2xl mt-2 md:mt-4 
+           font-light opacity-90 relative text-white;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+  } 
\ No newline at end of file
diff --git a/src/components/Hero/utils/schema.js b/src/components/Hero/utils/schema.js
new file mode 100644
index 0000000..54eff6a
--- /dev/null
+++ b/src/components/Hero/utils/schema.js
@@ -0,0 +1,11 @@
+export const heroSchema = {
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "AI Customer Service Solution",
+  "description": "The only solution that combines an AI chatbot, help desk, and proactive support",
+  "url": "https://example.com",
+  "potentialAction": {
+    "@type": "ViewAction",
+    "target": "https://example.com/trial"
+  }
+}; 
\ No newline at end of file
diff --git a/src/components/ProductCards/ErrorBoundary.jsx b/src/components/ProductCards/ErrorBoundary.jsx
new file mode 100644
index 0000000..22dac03
--- /dev/null
+++ b/src/components/ProductCards/ErrorBoundary.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('ProductCards Error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="text-center py-12">
+          <h2 className="text-2xl text-gray-800">Something went wrong</h2>
+          <button
+            onClick={() => this.setState({ hasError: false })}
+            className="mt-4 px-4 py-2 bg-tech4biz-500 text-white rounded-md"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/components/ProductCards/ProductGrid.jsx b/src/components/ProductCards/ProductGrid.jsx
new file mode 100644
index 0000000..b690a8a
--- /dev/null
+++ b/src/components/ProductCards/ProductGrid.jsx
@@ -0,0 +1,143 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion } from 'framer-motion';
+import ProductCard from './components/ProductCard';
+import { productImages } from './config/productCard.config';
+import styles from './styles/ProductGrid.module.css';
+import { useScrollPosition } from '../../hooks/useScrollPosition';
+import ProductDots from './components/ProductDots';
+import ProductNavigation from './components/ProductNavigation';
+import { getProductSchema } from './config/productCard.schema';
+import { Helmet } from 'react-helmet-async';
+
+const ProductGrid = () => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const productGridRef = useRef(null);
+  const isScrolled = useScrollPosition();
+  const [touchStart, setTouchStart] = useState(0);
+  const [touchEnd, setTouchEnd] = useState(0);
+
+  const totalProducts = productImages.length;
+
+  // Check if screen is mobile
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth <= 639);
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => {
+      const newIndex = prev === 0 ? totalProducts - 1 : prev - 1;
+      updateSlidePosition(newIndex);
+      return newIndex;
+    });
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => {
+      const newIndex = prev === totalProducts - 1 ? 0 : prev + 1;
+      updateSlidePosition(newIndex);
+      return newIndex;
+    });
+  };
+
+  const handleDotClick = (index) => {
+    setCurrentIndex(index);
+    updateSlidePosition(index);
+  };
+
+  const updateSlidePosition = (index) => {
+    if (productGridRef.current && isMobile) {
+      const containerWidth = productGridRef.current.parentElement.offsetWidth;
+      const cardWidth = containerWidth - 40;
+      const gap = 20;
+      const offset = index * (cardWidth + gap);
+      const centeringOffset = (containerWidth - cardWidth) / 2;
+      productGridRef.current.style.transform = `translateX(calc(-${offset}px + ${centeringOffset}px))`;
+    }
+  };
+
+  // Add this useEffect to reset transform on screen resize
+  useEffect(() => {
+    if (!isMobile && productGridRef.current) {
+      productGridRef.current.style.transform = 'translateX(0)';
+    }
+  }, [isMobile]);
+
+  const handleTouchStart = (e) => {
+    setTouchStart(e.touches[0].clientX);
+  };
+
+  const handleTouchMove = (e) => {
+    setTouchEnd(e.touches[0].clientX);
+  };
+
+  const handleTouchEnd = () => {
+    if (!isMobile) return;
+    
+    const touchDiff = touchStart - touchEnd;
+    const minSwipeDistance = 50;
+
+    if (Math.abs(touchDiff) > minSwipeDistance) {
+      if (touchDiff > 0) {
+        handleNext();
+      } else {
+        handlePrev();
+      }
+    }
+  };
+
+  return (
+    <>
+      <Helmet>
+        <title>Our Products - Tech4biz</title>
+        <meta name="description" content="Explore our innovative product suite" />
+        <script type="application/ld+json">
+          {JSON.stringify(getProductSchema(productImages))}
+        </script>
+      </Helmet>
+
+      <section className={styles.showcase} aria-label="Product showcase">
+        <div className={styles.polyOverlay} aria-hidden="true" />
+        <div className={styles.glowOverlay} aria-hidden="true" />
+        
+        <div className={styles.container}>
+          <h2 className={styles.heading}>Case Studies</h2>
+          
+          <div className={styles.gridContainer}>
+            <div 
+              ref={productGridRef}
+              className={styles.grid}
+              onTouchStart={handleTouchStart}
+              onTouchMove={handleTouchMove}
+              onTouchEnd={handleTouchEnd}
+            >
+              {productImages.map((product) => (
+                <ProductCard key={product.id} product={product} />
+              ))}
+            </div>
+            
+            <ProductDots
+              total={productImages.length}
+              current={currentIndex}
+              onClick={handleDotClick}
+            />
+            
+            <ProductNavigation
+              onPrev={handlePrev}
+              onNext={handleNext}
+              isMobile={isMobile}
+            />
+          </div>
+        </div>
+      </section>
+    </>
+  );
+};
+
+export default ProductGrid;
\ No newline at end of file
diff --git a/src/components/ProductCards/components/ProductCard.jsx b/src/components/ProductCards/components/ProductCard.jsx
new file mode 100644
index 0000000..8ba3bd4
--- /dev/null
+++ b/src/components/ProductCards/components/ProductCard.jsx
@@ -0,0 +1,106 @@
+import React, { memo, useState, useRef } from 'react';
+import { motion } from 'framer-motion';
+import styles from '../styles/ProductCard.module.css';
+import { useImageLoader } from '../hooks/useImageLoader';
+
+const ProductCard = memo(({ product }) => {
+  const { imageLoaded, handleImageLoad } = useImageLoader();
+  const [isPressed, setIsPressed] = useState(false);
+  const touchTimer = useRef(null);
+  const touchStartPos = useRef({ x: 0, y: 0 });
+  const isTouchActive = useRef(false);
+
+  const handleTouchStart = (e) => {
+    if (isTouchActive.current) return;
+    
+    touchStartPos.current = {
+      x: e.touches[0].clientX,
+      y: e.touches[0].clientY
+    };
+    
+    // Set pressed state immediately for visual feedback
+    setIsPressed(true);
+    isTouchActive.current = true;
+  };
+
+  const handleTouchMove = (e) => {
+    if (!touchStartPos.current) return;
+    
+    const deltaX = Math.abs(e.touches[0].clientX - touchStartPos.current.x);
+    const deltaY = Math.abs(e.touches[0].clientY - touchStartPos.current.y);
+
+    // If there's significant horizontal movement, allow sliding
+    if (deltaX > 50 && deltaX > deltaY * 1.5) {
+      setIsPressed(false);
+      isTouchActive.current = false;
+    }
+  };
+
+  const handleTouchEnd = (e) => {
+    const deltaX = Math.abs(e.changedTouches[0].clientX - touchStartPos.current.x);
+    const deltaY = Math.abs(e.changedTouches[0].clientY - touchStartPos.current.y);
+
+    // If minimal movement, keep the pressed state for the animation
+    if (deltaX < 10 && deltaY < 10) {
+      e.stopPropagation();
+      setTimeout(() => {
+        setIsPressed(false);
+        isTouchActive.current = false;
+      }, 1000); // Match this with your CSS transition duration
+    } else {
+      setIsPressed(false);
+      isTouchActive.current = false;
+    }
+  };
+
+  return (
+    <motion.div
+      className={`${styles.card} ${isPressed ? styles.touched : ''}`}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: imageLoaded ? 1 : 0 }}
+      whileHover={{ y: -5 }}
+      transition={{ duration: 0.3 }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+      onTouchCancel={() => {
+        setIsPressed(false);
+        isTouchActive.current = false;
+      }}
+    >
+      <motion.img
+        src={product.path}
+        srcSet={`${product.path} 300w, ${product.path} 600w`}
+        sizes="(max-width: 639px) 300px, 600px"
+        alt={product.alt}
+        className={styles.cardImage}
+        loading="lazy"
+        onLoad={handleImageLoad}
+        width={600}
+        height={400}
+      />
+      
+      <div className={styles.cardContent}>
+        <h3 className={styles.title}>{product.title}</h3>
+        <h4 className={styles.subtitle}>{product.subtitle}</h4>
+        <p className={styles.description}>{product.description}</p>
+        <a href="#" className={styles.button}>
+          Expand
+          <svg 
+            className={styles.buttonArrow} 
+            xmlns="http://www.w3.org/2000/svg" 
+            fill="none" 
+            viewBox="0 0 24 24" 
+            stroke="currentColor"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+          </svg>
+        </a>
+      </div>
+    </motion.div>
+  );
+});
+
+ProductCard.displayName = 'ProductCard';
+
+export default ProductCard;
\ No newline at end of file
diff --git a/src/components/ProductCards/components/ProductDots.jsx b/src/components/ProductCards/components/ProductDots.jsx
new file mode 100644
index 0000000..d32386b
--- /dev/null
+++ b/src/components/ProductCards/components/ProductDots.jsx
@@ -0,0 +1,23 @@
+import React, { memo } from 'react';
+import styles from '../styles/ProductGrid.module.css';
+
+const ProductDots = memo(({ total, current, onClick }) => {
+  return (
+    <div className={styles.dots} role="tablist">
+      {Array.from({ length: total }, (_, index) => (
+        <button
+          key={index}
+          className={`${styles.dot} ${current === index ? styles.activeDot : ''}`}
+          onClick={() => onClick(index)}
+          role="tab"
+          aria-selected={current === index}
+          aria-label={`Go to product ${index + 1}`}
+        />
+      ))}
+    </div>
+  );
+});
+
+ProductDots.displayName = 'ProductDots';
+
+export default ProductDots;
\ No newline at end of file
diff --git a/src/components/ProductCards/components/ProductNavigation.jsx b/src/components/ProductCards/components/ProductNavigation.jsx
new file mode 100644
index 0000000..8d76f3f
--- /dev/null
+++ b/src/components/ProductCards/components/ProductNavigation.jsx
@@ -0,0 +1,33 @@
+import React, { memo } from 'react';
+import styles from '../styles/ProductGrid.module.css';
+
+const ProductNavigation = memo(({ onPrev, onNext, isMobile }) => {
+  if (!isMobile) return null;
+
+  return (
+    <div className={styles.navigation} role="navigation">
+      <button
+        onClick={onPrev}
+        className={styles.navButton}
+        aria-label="Previous product"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+      <button
+        onClick={onNext}
+        className={styles.navButton}
+        aria-label="Next product"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+    </div>
+  );
+});
+
+ProductNavigation.displayName = 'ProductNavigation';
+
+export default ProductNavigation;
\ No newline at end of file
diff --git a/src/components/ProductCards/config/productCard.config.js b/src/components/ProductCards/config/productCard.config.js
new file mode 100644
index 0000000..0450f33
--- /dev/null
+++ b/src/components/ProductCards/config/productCard.config.js
@@ -0,0 +1,100 @@
+import { imagePaths } from '@/constants/images';
+import placeholderImage from '@/assets/placeholder.jpg';
+
+export const BREAKPOINTS = {  
+  MOBILE: 639,
+  TABLET: 1023,
+  DESKTOP: 1279
+};
+
+export const CARD_CONFIG = {
+  width: 280,
+  height: 450,
+  gap: 2,
+  cardsPerView: {
+    mobile: 1,
+    tablet: 2,
+    desktop: 4
+  }
+};
+
+export const productImages = [
+  {
+    id: 1,
+    title: 'Defending against cyber threats',
+    subtitle: 'Advanced Security for Financial Systems',
+    description: 'Award-winning enterprise security platform delivering AI-powered threat detection, 24/7 network monitoring, and automated incident response for maximum business protection.',
+    path: imagePaths.productCards.securityPlatform,
+    alt: 'Enterprise Security Platform Dashboard'
+  },
+  {
+    id: 2,
+    title: 'Revolutionizing Financial Security',
+    subtitle: 'AI-Powered Banking Analytics Solutions',
+    description: 'Enterprise-grade financial analytics platform leveraging artificial intelligence to analyze market patterns, assess portfolio risks, and optimize investment performance.',
+    path: imagePaths.productCards.riskAnalytics,
+    alt: 'Financial Analytics Dashboard'
+  },
+  {
+    id: 3,
+    title: 'Dynamic Pricing Analytics',
+    subtitle: 'Smart Pricing for E-commerce Excellence',
+    description: 'Cloud-based e-commerce analytics suite utilizing machine learning algorithms to optimize pricing strategies, boost conversions, and drive sustainable revenue growth.',
+    path: imagePaths.productCards.commerceIntelligence,
+    alt: 'E-Commerce Analytics Dashboard'
+  },
+  {
+    id: 4,
+    title: 'Smart Mall Revolution',
+    subtitle: 'Next-Gen Retail Management Solutions',
+    description: 'Comprehensive retail operations platform integrating IoT technology, real-time analytics, and smart inventory systems for enhanced customer shopping experiences.',
+    path: imagePaths.productCards.retailManagement,
+    alt: 'Retail Management Dashboard'
+  },
+  {
+    id: 5,
+    title: 'Smart Voice Tech for IoT',
+    subtitle: 'Intelligent Voice Processing Systems',
+    description: 'Premium voice recognition technology featuring advanced natural language processing, multi-dialect support, and intelligent conversation analysis capabilities.',
+    path: imagePaths.productCards.speechRecognition,
+    alt: 'Voice Recognition Dashboard'
+  },
+  {
+    id: 6,
+    title: 'Meta verse AR',
+    subtitle: 'Immersive Learning Technologies',
+    description: 'Next-generation learning management system combining augmented reality technology, adaptive algorithms, and interactive content for personalized education.',
+    path: imagePaths.productCards.learningPlatform,
+    alt: 'Education Platform Dashboard'
+  },
+  {
+    id: 7,
+    title: 'Smart Retail Automation',
+    subtitle: 'AI-Driven Retail Transformation',
+    description: 'Enterprise retail automation solution delivering predictive analytics, automated inventory optimization, and data-driven customer experience personalization.',
+    path: imagePaths.productCards.retailAutomation,
+    alt: 'Retail Automation Dashboard'
+  },
+  {
+    id: 8,
+    title: 'Transforming E-commerce',
+    subtitle: 'Enterprise Cloud Commerce Platform',
+    description: 'High-performance cloud commerce platform providing enterprise scalability, advanced security protocols, and comprehensive business intelligence analytics.',
+    path: imagePaths.productCards.cloudCommerce,
+    alt: 'Cloud Commerce Dashboard'
+  }
+].map(product => ({
+  ...product,
+  imageSizes: {
+    sm: `${product.path}?w=300`,
+    md: `${product.path}?w=600`,
+    lg: `${product.path}?w=900`
+  },
+  fallback: placeholderImage
+}));
+
+export const META_CONFIG = {
+  title: 'Our Products - Tech4biz',
+  description: 'Explore our innovative product suite featuring enterprise security, retail management, and AI-powered solutions.',
+  keywords: 'enterprise security, retail management, AI solutions, voice recognition, digital learning'
+};
\ No newline at end of file
diff --git a/src/components/ProductCards/config/productCard.schema.js b/src/components/ProductCards/config/productCard.schema.js
new file mode 100644
index 0000000..13541df
--- /dev/null
+++ b/src/components/ProductCards/config/productCard.schema.js
@@ -0,0 +1,15 @@
+export const getProductSchema = (products) => ({
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    "itemListElement": products.map((product, index) => ({
+      "@type": "Product",
+      "position": index + 1,
+      "name": product.title,
+      "description": product.description,
+      "image": product.path,
+      "offers": {
+        "@type": "Offer",
+        "availability": "https://schema.org/InStock"
+      }
+    }))
+  });
\ No newline at end of file
diff --git a/src/components/ProductCards/hooks/useImageLoader.js b/src/components/ProductCards/hooks/useImageLoader.js
new file mode 100644
index 0000000..d285814
--- /dev/null
+++ b/src/components/ProductCards/hooks/useImageLoader.js
@@ -0,0 +1,11 @@
+import { useState, useCallback } from 'react';
+
+export const useImageLoader = () => {
+  const [imageLoaded, setImageLoaded] = useState(false);
+
+  const handleImageLoad = useCallback(() => {
+    setImageLoaded(true);
+  }, []);
+
+  return { imageLoaded, handleImageLoad };
+};
\ No newline at end of file
diff --git a/src/components/ProductCards/hooks/useProductGrid.js b/src/components/ProductCards/hooks/useProductGrid.js
new file mode 100644
index 0000000..c00a674
--- /dev/null
+++ b/src/components/ProductCards/hooks/useProductGrid.js
@@ -0,0 +1,44 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { debounce } from 'lodash';
+
+export function useProductGrid(totalProducts) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isMobile, setIsMobile] = useState(false);
+  const productGridRef = useRef(null);
+
+  const checkMobile = useCallback(
+    debounce(() => {
+      setIsMobile(window.innerWidth <= 639);
+    }, 150),
+    []
+  );
+
+  useEffect(() => {
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+    return () => {
+      checkMobile.cancel();
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, [checkMobile]);
+
+  const handlePrev = useCallback(() => {
+    setCurrentIndex(prev => prev === 0 ? totalProducts - 1 : prev - 1);
+  }, [totalProducts]);
+
+  const handleNext = useCallback(() => {
+    setCurrentIndex(prev => prev === totalProducts - 1 ? 0 : prev + 1);
+  }, [totalProducts]);
+
+  const handleDotClick = useCallback((index) => {
+    setCurrentIndex(index);
+  }, []);
+
+  return {
+    currentIndex,
+    isMobile,
+    handlePrev,
+    handleNext,
+    handleDotClick
+  };
+}
\ No newline at end of file
diff --git a/src/components/ProductCards/index.js b/src/components/ProductCards/index.js
new file mode 100644
index 0000000..b5c0a0b
--- /dev/null
+++ b/src/components/ProductCards/index.js
@@ -0,0 +1,15 @@
+import React, { Suspense } from 'react';
+import ErrorBoundary from './ErrorBoundary';
+import LoadingFallback from '../commonFallback/LoadingFallback';
+
+const ProductGrid = React.lazy(() => import('./ProductGrid'));
+
+export default function ProductCards() {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<LoadingFallback />}>
+        <ProductGrid />
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
\ No newline at end of file
diff --git a/src/components/ProductCards/styles/ProductCard.module.css b/src/components/ProductCards/styles/ProductCard.module.css
new file mode 100644
index 0000000..4373f02
--- /dev/null
+++ b/src/components/ProductCards/styles/ProductCard.module.css
@@ -0,0 +1,144 @@
+.card {
+    @apply relative overflow-hidden cursor-pointer;
+    height: var(--card-height);
+    background: transparent;
+    perspective: 1000px;
+    transform-style: preserve-3d;
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  }
+  
+  .cardImage {
+    @apply absolute inset-0 w-full h-full object-cover;
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+                filter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    backface-visibility: hidden;
+  }
+  
+  .card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+  }
+  
+  .card:hover .cardImage {
+    transform: scale(5);
+    filter: blur(3px);
+  }
+  
+  .card:hover .description {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  
+  .card:hover .button {
+    opacity: 1;
+    transform: scale(1.05) translateX(0);
+  }
+  
+  .card:hover .title,
+  .card:hover .subtitle {
+    transform: translateX(-10px);
+  }
+  
+  .cardContent {
+    @apply relative z-10 h-full p-6 flex flex-col;
+    background: linear-gradient(
+      to bottom,
+      rgba(0, 0, 0, 0.7) 0%,
+      rgba(0, 0, 0, 0.4) 30%,
+      rgba(0, 0, 0, 0.4) 70%,
+      rgba(0, 0, 0, 0.7) 100%
+    );
+    backface-visibility: hidden;
+  }
+  
+  .title {
+    @apply text-white text-xl font-bold mb-2;
+    transform: translateX(0);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .subtitle {
+    @apply text-gray-200 text-lg mb-4;
+    transform: translateX(0);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  
+  .description {
+    @apply text-white/90 mb-4 mt-auto;
+    opacity: 0;
+    transform: translateX(100%);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    transition-delay: 0.1s;
+  }
+  
+  .button {
+    @apply inline-flex items-center mt-2 px-6 py-2 text-white font-medium;
+    opacity: 0;
+    transform: translateX(-100%);
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
+                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
+                background-color 0.3s ease;
+    transition-delay: 0.2s;
+    align-self: flex-end;
+    border-radius: 4px;
+    text-transform: capitalize;
+  }
+  
+  .button:hover {
+    transform: scale(1.05) translateX(0);
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  
+  .buttonArrow {
+    @apply ml-2 w-4 h-4;
+    transition: transform 0.3s ease;
+  }
+  
+  .button:hover .buttonArrow {
+    transform: translateX(3px);
+  }
+  
+  .revealed .cardContent {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  /* Responsive Styles */
+  @media (max-width: 639px) {
+    .card {
+      flex: 0 0 calc(100% - 40px);
+      width: calc(100% - 40px);
+      margin: 0;
+      scroll-snap-align: center;
+    }
+  }
+  
+  @media (max-width: 639px) {
+    .touched {
+      transform: translateY(-5px);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
+    }
+
+    .touched .cardImage {
+      transform: scale(5);
+      filter: blur(3px);
+    }
+
+    .touched .description {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    .touched .button {
+      opacity: 1;
+      transform: scale(1.05) translateX(0);
+    }
+
+    .touched .title,
+    .touched .subtitle {
+      transform: translateX(-10px);
+    }
+  }
\ No newline at end of file
diff --git a/src/components/ProductCards/styles/ProductGrid.module.css b/src/components/ProductCards/styles/ProductGrid.module.css
new file mode 100644
index 0000000..0a41043
--- /dev/null
+++ b/src/components/ProductCards/styles/ProductGrid.module.css
@@ -0,0 +1,207 @@
+.showcase {
+    --card-width: 280px;
+    --card-height: 450px;
+    --card-gap: 2rem;
+    --cards-per-view: 4;
+    position: relative;
+    padding: 2rem 0;
+    background: radial-gradient(115.45% 482.04% at -5.28% -13.33%, 
+      #2d1b69 0%,
+      #1a103f 50%,
+      #0c0620 100%
+    );
+    overflow: hidden;
+  }
+  
+  .showcase::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: 
+      linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+    background-size: 35px 35px;
+    opacity: 0.5;
+  }
+  
+  .showcase::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image: radial-gradient(
+      rgba(255, 255, 255, 0.15) 2px,
+      transparent 2px
+    );
+    background-size: 35px 35px;
+    background-position: -5px -5px;
+    opacity: 0.3;
+    z-index: 1;
+  }
+  
+  .polyOverlay {
+    @apply absolute inset-0;
+    background: 
+      linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.05) 50%, transparent 52%),
+      linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.05) 50%, transparent 52%);
+    background-size: 70px 70px;
+    opacity: 0.4;
+    z-index: 1;
+  }
+  
+  .glowOverlay {
+    @apply absolute inset-0;
+    background: radial-gradient(
+      circle at 50% 50%,
+      rgba(45, 27, 105, 0.4) 0%,
+      transparent 60%
+    );
+    z-index: 1;
+  }
+  
+  .container {
+    width: 100%;
+    max-width: 90rem;
+    margin: 2rem auto 4rem;
+    padding: 0 1rem;
+    position: relative;
+    z-index: 2;
+  }
+  
+  .heading {
+    @apply text-3xl font-bold text-white capitalize text-center mb-12;
+  }
+  
+  .gridContainer {
+    position: relative;
+    overflow: hidden;
+    padding: 0 var(--card-gap);
+    z-index: 2;
+  }
+  
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(var(--cards-per-view), minmax(var(--card-width), 1fr));
+    gap: var(--card-gap);
+    transition: transform 0.3s ease-in-out;
+  }
+  
+  @media (max-width: 1279px) {
+    .grid {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  
+  @media (max-width: 1023px) {
+    .grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+  
+  @media (max-width: 639px) {
+    .showcase {
+      --cards-per-view: 1;
+      padding: 2rem 0;
+    }
+  
+    .gridContainer {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    }
+  
+    .grid {
+      display: flex;
+      width: 100%;
+      scroll-snap-type: x mandatory;
+      gap: 20px;
+      touch-action: pan-y pan-x pinch-zoom;
+      pointer-events: auto;
+    }
+  
+    .grid * {
+      touch-action: pan-y pan-x pinch-zoom;
+    }
+  
+    .card {
+      flex: 0 0 calc(100% - 20px);
+      width: calc(100% - 20px);
+      margin: 0;
+      scroll-snap-align: center;
+    }
+  
+    .navigation {
+      display: flex !important;
+      justify-content: center;
+      align-items: center;
+      gap: 1rem;
+      margin-top: 1.5rem;
+    }
+  
+    .dots {
+      display: flex !important;
+      justify-content: center;
+      gap: 0.5rem;
+      margin-top: 1rem;
+    }
+  
+    .container {
+      margin: 1rem auto 1rem;
+    }
+  }
+  
+  .dots {
+    display: none;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+  
+  .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: rgba(75, 85, 99, 0.4);
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+  
+  .activeDot {
+    background-color: rgba(75, 85, 99, 1);
+  }
+  
+  .navigation {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
+  
+  .navButton {
+    background-color: rgba(75, 85, 99, 0.8);
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    z-index: 10;
+  }
+  
+  .navButton:hover {
+    background-color: rgba(75, 85, 99, 1);
+  }
+  
+  .navButton svg {
+    width: 24px;
+    height: 24px;
+    color: #ffffff;
+  }
+  
+  .navButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
\ No newline at end of file
diff --git a/src/components/ProductCards/utils/accessibility.js b/src/components/ProductCards/utils/accessibility.js
new file mode 100644
index 0000000..66cd35b
--- /dev/null
+++ b/src/components/ProductCards/utils/accessibility.js
@@ -0,0 +1,23 @@
+export const handleKeyboardNavigation = (event, handlers) => {
+    switch (event.key) {
+      case 'ArrowLeft':
+        handlers.prev();
+        break;
+      case 'ArrowRight':
+        handlers.next();
+        break;
+      case 'Enter':
+      case 'Space':
+        handlers.select();
+        break;
+      default:
+        break;
+    }
+  };
+  
+  export const getAriaLabels = (product) => ({
+    card: `Product card for ${product.title}`,
+    image: product.alt,
+    title: `Product name: ${product.title}`,
+    description: `Product description: ${product.description}`
+  });
\ No newline at end of file
diff --git a/src/components/ProductCards/utils/imageutils.js b/src/components/ProductCards/utils/imageutils.js
new file mode 100644
index 0000000..4a94d22
--- /dev/null
+++ b/src/components/ProductCards/utils/imageutils.js
@@ -0,0 +1,24 @@
+export const getResponsiveImageProps = (product) => ({
+    src: product.path,
+    srcSet: `
+      ${product.imageSizes.sm} 300w,
+      ${product.imageSizes.md} 600w,
+      ${product.imageSizes.lg} 900w
+    `,
+    sizes: `
+      (max-width: ${BREAKPOINTS.MOBILE}px) 300px,
+      (max-width: ${BREAKPOINTS.TABLET}px) 600px,
+      900px
+    `,
+    loading: "lazy",
+    width: 600,
+    height: 400,
+    alt: product.alt
+  });
+  
+  export const preloadImages = (products) => {
+    products.forEach(product => {
+      const img = new Image();
+      img.src = product.path;
+    });
+  };
\ No newline at end of file
diff --git a/src/components/ProjectShowcase/ProjectCard.jsx b/src/components/ProjectShowcase/ProjectCard.jsx
new file mode 100644
index 0000000..b425310
--- /dev/null
+++ b/src/components/ProjectShowcase/ProjectCard.jsx
@@ -0,0 +1,35 @@
+import { motion } from 'framer-motion'
+import { animations } from './config/projectData'
+import { ArrowRight } from 'lucide-react'
+
+export default function ProjectCard({ project }) {
+  return (
+    <motion.div
+      className="group relative overflow-hidden rounded-lg"
+      variants={animations.itemVariants}
+      whileHover={{ scale: 1.02 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="aspect-[4/3] relative">
+        <img
+          src={project.image}
+          alt={project.title}
+          className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-105"
+        />
+        <div className="absolute inset-0 bg-black/40 transition-opacity group-hover:opacity-0" />
+      </div>
+      <div className="p-6">
+        <h3 className="text-xl font-semibold mb-2">{project.title}</h3>
+        <p className="text-gray-300 text-sm mb-4">{project.description}</p>
+        <motion.button
+          className="inline-flex items-center gap-2 text-sm text-yellow-500 hover:text-yellow-400 transition-colors"
+          whileHover={{ x: 5 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          Read More
+          <ArrowRight className="w-4 h-4" />
+        </motion.button>
+      </div>
+    </motion.div>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/ProjectShowcase/ProjectShowcase.jsx b/src/components/ProjectShowcase/ProjectShowcase.jsx
new file mode 100644
index 0000000..4e71aab
--- /dev/null
+++ b/src/components/ProjectShowcase/ProjectShowcase.jsx
@@ -0,0 +1,80 @@
+'use client'
+
+import React, { Suspense, lazy } from 'react'
+import { motion } from 'framer-motion'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
+import ErrorBoundary from '../common/ErrorBoundary'
+import { projects, animations } from './config/projectData'
+import { projectShowcaseSchema } from './config/schema'
+import useProjectAnimation from './hooks/useProjectAnimation'
+import styles from './styles/ProjectShowcase.module.css'
+
+// Lazy load ProjectCard and ProjectHero
+const ProjectCard = lazy(() => import('./components/ProjectCard'))
+const ProjectHero = lazy(() => import('./components/ProjectHero'))
+
+export default function ProjectShowcase() {
+  const { containerRef, isVisible } = useProjectAnimation()
+
+  return (
+    <ErrorBoundary>
+      <HelmetProvider>
+        <div className={styles.showcaseContainer}>
+          <Helmet>
+            <title>AI Processing Solutions - ASIC & FPGA Architecture</title>
+            <meta 
+              name="description" 
+              content="Advanced AI processing solutions with ASIC and FPGA architectures for superior performance and cost efficiency."
+            />
+            <meta name="viewport" content="width=device-width, initial-scale=1" />
+            <link rel="canonical" href="https://www.yourwebsite.com/project-showcase" />
+
+            <meta property="og:title" content="AI Processing Solutions - ASIC & FPGA Architecture" />
+            <meta property="og:description" content="Advanced AI processing solutions with ASIC and FPGA architectures for superior performance and cost efficiency." />
+            <meta property="og:type" content="website" />
+            <meta property="og:url" content="https://www.yourwebsite.com/project-showcase" />
+            <meta property="og:image" content="https://www.yourwebsite.com/assets/og-image.webp" />
+
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:title" content="AI Processing Solutions - ASIC & FPGA Architecture" />
+            <meta name="twitter:description" content="Advanced AI processing solutions with ASIC and FPGA architectures for superior performance and cost efficiency." />
+            <meta name="twitter:image" content="https://www.yourwebsite.com/assets/twitter-image.webp" />
+
+            <script type="application/ld+json">
+              {JSON.stringify(projectShowcaseSchema)}
+            </script>
+          </Helmet>
+
+          <motion.div
+            ref={containerRef}
+            className={styles.contentWrapper}
+            variants={animations.containerVariants}
+            initial="hidden"
+            animate={isVisible ? "visible" : "hidden"}
+          >
+            <ErrorBoundary>
+              <Suspense fallback={<div className={styles.heroSkeleton} />}>
+                <ProjectHero />
+              </Suspense>
+            </ErrorBoundary>
+
+            <motion.div 
+              className={styles.projectGrid}
+              variants={animations.containerVariants}
+            >
+              {projects.map((project) => (
+                <ErrorBoundary key={project.title}>
+                  <Suspense 
+                    fallback={<div className={styles.cardSkeleton} />}
+                  >
+                    <ProjectCard project={project} />
+                  </Suspense>
+                </ErrorBoundary>
+              ))}
+            </motion.div>
+          </motion.div>
+        </div>
+      </HelmetProvider>
+    </ErrorBoundary>
+  )
+}
\ No newline at end of file
diff --git a/src/components/ProjectShowcase/components/ProjectCard.jsx b/src/components/ProjectShowcase/components/ProjectCard.jsx
new file mode 100644
index 0000000..06099cf
--- /dev/null
+++ b/src/components/ProjectShowcase/components/ProjectCard.jsx
@@ -0,0 +1,44 @@
+import React, { memo } from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import OptimizedImage from '../../common/OptimizedImage'
+import { animations } from '../config/projectData'
+import styles from '../styles/ProjectCard.module.css'
+
+const ProjectCard = memo(({ project }) => {
+  return (
+    <motion.div
+      className={`${styles.card} group`}
+      variants={animations.itemVariants}
+      whileHover={{ scale: 1.02 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className={styles.imageContainer}>
+        <OptimizedImage
+          src={project.image}
+          alt={project.title}
+          className={styles.image}
+          sizes="(max-width: 768px) 100vw, 50vw"
+          srcSet={`${project.image}?w=480 480w, ${project.image}?w=800 800w, ${project.image}?w=1200 1200w`}
+        />
+        <div className={styles.overlay} />
+      </div>
+      <div className={styles.content}>
+        <h3 className={styles.title}>{project.title}</h3>
+        <p className={styles.description}>{project.description}</p>
+        <motion.button
+          className={styles.button}
+          whileHover={{ x: 5 }}
+          whileTap={{ scale: 0.95 }}
+          aria-label={`Read more about ${project.title}`}
+        >
+          Read More
+          <ArrowRight className="w-4 h-4" aria-hidden="true" />
+        </motion.button>
+      </div>
+    </motion.div>
+  )
+})
+
+ProjectCard.displayName = 'ProjectCard'
+export default ProjectCard
\ No newline at end of file
diff --git a/src/components/ProjectShowcase/components/ProjectHero.jsx b/src/components/ProjectShowcase/components/ProjectHero.jsx
new file mode 100644
index 0000000..5afcfc2
--- /dev/null
+++ b/src/components/ProjectShowcase/components/ProjectHero.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import { animations } from '../config/projectData'
+import styles from '../styles/ProjectHero.module.css'
+
+export default function ProjectHero() {
+  return (
+    <>
+      <motion.div className={styles.heroSection} variants={animations.itemVariants}>
+        <h1 className={styles.title}>
+          Empowering businesses with cutting-edge solutions and innovative technology
+        </h1>
+        <motion.button
+          className={styles.exploreButton}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          aria-label="Explore Services"
+        >
+          Explore Services
+          <ArrowRight className="w-4 h-4" aria-hidden="true" />
+        </motion.button>
+      </motion.div>
+
+      <motion.div className={styles.descriptionSection} variants={animations.itemVariants}>
+        <p className={styles.description}>
+          We specialize in providing advanced{' '}
+          <span className={styles.highlight}>AI processing solutions</span> with{' '}
+          <span className={styles.highlight}>ASIC</span> and{' '}
+          <span className={styles.highlight}>FPGA architectures</span>. Our expertise helps businesses achieve superior performance while significantly reducing costs compared to traditional cloud solutions.
+        </p>
+      </motion.div>
+    </>
+  )
+}
\ No newline at end of file
diff --git a/src/components/ProjectShowcase/config/animations.js b/src/components/ProjectShowcase/config/animations.js
new file mode 100644
index 0000000..03d9fc2
--- /dev/null
+++ b/src/components/ProjectShowcase/config/animations.js
@@ -0,0 +1,24 @@
+export const animations = {
+  containerVariants: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3,
+      },
+    },
+  },
+  
+  itemVariants: {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { 
+        duration: 0.5,
+        ease: 'easeOut' 
+      },
+    },
+  }
+}
diff --git a/src/components/ProjectShowcase/config/projectData.js b/src/components/ProjectShowcase/config/projectData.js
new file mode 100644
index 0000000..60a411f
--- /dev/null
+++ b/src/components/ProjectShowcase/config/projectData.js
@@ -0,0 +1,49 @@
+import asicAiDeployment from '@/assets/Product-Show-Case/ASIC-AI-Deployment.webp';
+import advancedFpga from '@/assets/Product-Show-Case/Advanced-FPGA-Architecture.webp';
+import adaptiveSolutions from '@/assets/Product-Show-Case/Adaptive-Solutions.webp';
+import acceleratedPerformance from '@/assets/Product-Show-Case/Accelerated-Performance.webp';
+
+export const projects = [
+  {
+    title: 'ASIC AI Deployment',
+    description: 'Massive AI models can be deployed on our ASIC boards computed performances even better then Google Compute Clouds and AWS FPGA instances saving thousands of query invocation dollars.',
+    image: asicAiDeployment,
+  },
+  {
+    title: 'Accelerated Performance',
+    description: 'With efficient speed, performance, and multi-tasking abilities, achieving accelerated results from the same tasks but larger AI models is now possible.',
+    image: acceleratedPerformance,
+  },
+  {
+    title: 'Advanced FPGA Architecture',
+    description: 'Advanced FPGA architecture designs with Artificial Neural Network (ANN) and Convolution neural network (CNN) for high end AI processing.',
+    image: advancedFpga,
+  },
+  {
+    title: 'Adaptive Solutions',
+    description: 'Updating and adaptation as per customer demands, software acceleration, and fast and efficient systems: are all only a few benefits that we strive to deliver through our high-end AI processing services.',
+    image: adaptiveSolutions,
+  },
+]
+
+export const animations = {
+  containerVariants: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.2,
+        delayChildren: 0.3,
+      },
+    },
+  },
+  
+  itemVariants: {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: 0.5 },
+    },
+  }
+} 
\ No newline at end of file
diff --git a/src/components/ProjectShowcase/config/schema.js b/src/components/ProjectShowcase/config/schema.js
new file mode 100644
index 0000000..3545e91
--- /dev/null
+++ b/src/components/ProjectShowcase/config/schema.js
@@ -0,0 +1,12 @@
+export const projectShowcaseSchema = {
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "name": "AI Processing Solutions",
+  "description": "Advanced AI processing solutions with ASIC and FPGA architectures",
+  "provider": {
+    "@type": "Organization",
+    "name": "Your Company Name"
+  },
+  "serviceType": "AI Processing",
+  "areaServed": "Worldwide"
+}
diff --git a/src/components/ProjectShowcase/hooks/useProjectAnimation.js b/src/components/ProjectShowcase/hooks/useProjectAnimation.js
new file mode 100644
index 0000000..d07d0b2
--- /dev/null
+++ b/src/components/ProjectShowcase/hooks/useProjectAnimation.js
@@ -0,0 +1,24 @@
+import { useRef, useState, useEffect } from 'react'
+import { debounce } from '../utils/optimizations'
+
+export default function useProjectAnimation() {
+  const containerRef = useRef(null)
+  const [isVisible, setIsVisible] = useState(false)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      debounce(([entry]) => {
+        setIsVisible(entry.isIntersecting)
+      }, 100),
+      { threshold: 0.1 }
+    )
+
+    if (containerRef.current) {
+      observer.observe(containerRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [])
+
+  return { containerRef, isVisible }
+}
diff --git a/src/components/ProjectShowcase/styles/ProjectCard.module.css b/src/components/ProjectShowcase/styles/ProjectCard.module.css
new file mode 100644
index 0000000..cfd9ff0
--- /dev/null
+++ b/src/components/ProjectShowcase/styles/ProjectCard.module.css
@@ -0,0 +1,31 @@
+.card {
+  @apply relative overflow-hidden rounded-lg;
+}
+
+.imageContainer {
+  @apply aspect-[4/3] relative;
+}
+
+.image {
+  @apply object-cover w-full h-full transition-transform duration-500;
+}
+
+.overlay {
+  @apply absolute inset-0 bg-black/40 transition-opacity;
+}
+
+.content {
+  @apply p-6;
+}
+
+.title {
+  @apply text-xl font-semibold mb-2 text-gray-200;
+}
+
+.description {
+  @apply text-gray-200 text-sm mb-4;
+}
+
+.button {
+  @apply inline-flex items-center gap-2 text-sm text-yellow-500 hover:text-yellow-400 transition-colors focus:outline-none focus:ring-2 focus:ring-yellow-500;
+}
diff --git a/src/components/ProjectShowcase/styles/ProjectHero.module.css b/src/components/ProjectShowcase/styles/ProjectHero.module.css
new file mode 100644
index 0000000..690d59f
--- /dev/null
+++ b/src/components/ProjectShowcase/styles/ProjectHero.module.css
@@ -0,0 +1,23 @@
+.heroSection {
+  @apply mb-24;
+}
+
+.title {
+  @apply text-4xl md:text-6xl font-bold max-w-4xl mb-8 text-gray-200;
+}
+
+.exploreButton {
+  @apply inline-flex items-center gap-2 px-6 py-3 rounded-full border border-white/20 hover:bg-white/10 transition-colors focus:outline-none focus:ring-2 focus:ring-yellow-500;
+}
+
+.descriptionSection {
+  @apply mb-24 max-w-2xl;
+}
+
+.description {
+  @apply text-lg text-gray-200;
+}
+
+.highlight {
+  @apply text-yellow-500;
+}
diff --git a/src/components/ProjectShowcase/styles/ProjectShowcase.module.css b/src/components/ProjectShowcase/styles/ProjectShowcase.module.css
new file mode 100644
index 0000000..36343dd
--- /dev/null
+++ b/src/components/ProjectShowcase/styles/ProjectShowcase.module.css
@@ -0,0 +1,15 @@
+.showcaseContainer {
+    @apply min-h-screen bg-black text-white;
+  }
+  
+  .contentWrapper {
+    @apply container mx-auto px-4 py-16 md:py-24;
+  }
+  
+  .projectGrid {
+    @apply grid grid-cols-1 md:grid-cols-2 gap-8;
+  }
+  
+  .cardSkeleton {
+    @apply animate-pulse bg-gray-800 rounded-lg aspect-[4/3];
+  }
\ No newline at end of file
diff --git a/src/components/ProjectShowcase/utils/optimizations.js b/src/components/ProjectShowcase/utils/optimizations.js
new file mode 100644
index 0000000..d9f0de3
--- /dev/null
+++ b/src/components/ProjectShowcase/utils/optimizations.js
@@ -0,0 +1,22 @@
+export const debounce = (func, wait) => {
+  let timeout
+  return function executedFunction(...args) {
+    const later = () => {
+      clearTimeout(timeout)
+      func(...args)
+    }
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+  }
+}
+
+export const throttle = (func, limit) => {
+  let inThrottle
+  return function executedFunction(...args) {
+    if (!inThrottle) {
+      func(...args)
+      inThrottle = true
+      setTimeout(() => inThrottle = false, limit)
+    }
+  }
+}
diff --git a/src/components/ServiceCards/ServiceCards.jsx b/src/components/ServiceCards/ServiceCards.jsx
new file mode 100644
index 0000000..7b69958
--- /dev/null
+++ b/src/components/ServiceCards/ServiceCards.jsx
@@ -0,0 +1,64 @@
+'use client'
+
+import React, { useRef, useEffect, Suspense, memo } from 'react'
+import { motion, useInView } from 'framer-motion'
+import gsap from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+import SplitType from 'split-type'
+import { containerVariants } from './animations/variants'
+import { services } from './config/serviceCardsConfig'
+import ErrorBoundary from '../common/ErrorBoundary'
+import './styles/ServiceCards.css'
+
+const ServiceHeader = React.lazy(() => import('./components/ServiceHeader'))
+const ServiceCard = React.lazy(() => import('./components/ServiceCard'))
+
+gsap.registerPlugin(ScrollTrigger)
+
+const ServiceCards = () => {
+  const sectionRef = useRef(null)
+  const isInView = useInView(sectionRef, { once: true })
+
+  useEffect(() => {
+    const ctx = gsap.context(() => {
+      // Animation setup moved to a separate useEffect to optimize performance
+      import('./animations/setupAnimations').then(module => {
+        module.default(sectionRef.current)
+      })
+    })
+
+    return () => ctx.revert()
+  }, [])
+
+  return (
+    <ErrorBoundary>
+      <section 
+        ref={sectionRef} 
+        className="service-cards-section"
+        aria-label="Our Services"
+      >
+        <Suspense fallback={<div className="loading-skeleton">Loading...</div>}>
+          <ServiceHeader />
+        </Suspense>
+
+        <motion.div 
+          className="service-cards-grid"
+          variants={containerVariants}
+          initial="hidden"
+          animate={isInView ? "visible" : "hidden"}
+        >
+          {services.map((service, index) => (
+            <Suspense key={service.id} fallback={<div className="card-skeleton" />}>
+              <ServiceCard 
+                service={service} 
+                index={index}
+              />
+            </Suspense>
+          ))}
+        </motion.div>
+      </section>
+    </ErrorBoundary>
+  )
+}
+
+export default memo(ServiceCards) 
\ No newline at end of file
diff --git a/src/components/ServiceCards/animations/setupAnimations.js b/src/components/ServiceCards/animations/setupAnimations.js
new file mode 100644
index 0000000..dc759a1
--- /dev/null
+++ b/src/components/ServiceCards/animations/setupAnimations.js
@@ -0,0 +1,51 @@
+import gsap from 'gsap'
+import SplitType from 'split-type'
+
+const setupAnimations = (sectionRef) => {
+  if (!sectionRef) return
+
+  const heading = sectionRef.querySelector('h2')
+  const text = sectionRef.querySelector('p')
+
+  if (!heading || !text) return
+
+  const splitHeading = new SplitType(heading, { 
+    types: 'chars,words',
+    wordClass: 'word-wrap'
+  })
+
+  const splitText = new SplitType(text, { 
+    types: 'lines',
+    linesClass: 'line-wrap'
+  })
+
+  gsap.set([splitHeading.chars, splitText.lines], { 
+    opacity: 0, 
+    y: 20,
+  })
+
+  const tl = gsap.timeline({
+    scrollTrigger: {
+      trigger: sectionRef,
+      start: 'top 80%',
+      toggleActions: 'play none none reverse',
+    }
+  })
+
+  tl.to(splitHeading.chars, {
+    opacity: 1,
+    y: 0,
+    duration: 1,
+    stagger: 0.02,
+    ease: "power3.out"
+  })
+  .to(splitText.lines, {
+    opacity: 1,
+    y: 0,
+    duration: 0.8,
+    stagger: 0.1,
+    ease: "power3.out"
+  }, '-=0.5')
+}
+
+export default setupAnimations
diff --git a/src/components/ServiceCards/animations/variants.js b/src/components/ServiceCards/animations/variants.js
new file mode 100644
index 0000000..fd2b0b9
--- /dev/null
+++ b/src/components/ServiceCards/animations/variants.js
@@ -0,0 +1,19 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.1
+    }
+  }
+}
+
+export const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: "easeOut" }
+  }
+}
diff --git a/src/components/ServiceCards/components/ServiceCard.jsx b/src/components/ServiceCards/components/ServiceCard.jsx
new file mode 100644
index 0000000..eca770a
--- /dev/null
+++ b/src/components/ServiceCards/components/ServiceCard.jsx
@@ -0,0 +1,51 @@
+import React, { memo } from 'react'
+import { motion } from 'framer-motion'
+import { ArrowRight } from 'lucide-react'
+import { cardVariants } from '../animations/variants'
+
+const ServiceCard = ({ service, index }) => {
+  return (
+    <motion.div
+      className={`service-card ${service.bgColor}`}
+      variants={cardVariants}
+      role="article"
+      aria-labelledby={`service-title-${index}`}
+    >
+      <div className="service-category">
+        <span>{service.category}</span>
+      </div>
+
+      <div className="service-content">
+        <div className="service-text">
+          <h3 
+            id={`service-title-${index}`}
+            className="service-title"
+          >
+            {service.title}
+          </h3>
+          <p className="service-description">
+            {service.description}
+          </p>
+        </div>
+
+        <motion.button
+          className="service-cta group"
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+          aria-label={`${service.cta} for ${service.title}`}
+        >
+          <span>{service.cta}</span>
+          <motion.div
+            className="cta-arrow"
+            whileHover={{ x: 5 }}
+            transition={{ duration: 0.2 }}
+          >
+            <ArrowRight className="w-5 h-5" />
+          </motion.div>
+        </motion.button>
+      </div>
+    </motion.div>
+  )
+}
+
+export default memo(ServiceCard)
diff --git a/src/components/ServiceCards/components/ServiceHeader.jsx b/src/components/ServiceCards/components/ServiceHeader.jsx
new file mode 100644
index 0000000..490c643
--- /dev/null
+++ b/src/components/ServiceCards/components/ServiceHeader.jsx
@@ -0,0 +1,21 @@
+import React, { memo } from 'react'
+import { sectionContent } from '../config/serviceCardsConfig'
+
+const ServiceHeader = () => {
+  return (
+    <div className="text-center mb-16">
+      <h2 
+        className="text-4xl md:text-5xl font-bold text-gray-900 mb-6"
+      >
+        {sectionContent.title}
+      </h2>
+      <p 
+        className="text-xl text-gray-600 max-w-3xl mx-auto"
+      >
+        {sectionContent.subtitle}
+      </p>
+    </div>
+  )
+}
+
+export default memo(ServiceHeader)
diff --git a/src/components/ServiceCards/config/meta.js b/src/components/ServiceCards/config/meta.js
new file mode 100644
index 0000000..4d9043c
--- /dev/null
+++ b/src/components/ServiceCards/config/meta.js
@@ -0,0 +1,16 @@
+export const serviceCardsMeta = {
+  title: "Manufacturing Services | Your Company",
+  description: "Expert manufacturing services including PCBA, PCB Manufacturing, and 3D Printing solutions for your business needs.",
+  openGraph: {
+    title: "Manufacturing Services | Your Company",
+    description: "Expert manufacturing services including PCBA, PCB Manufacturing, and 3D Printing solutions for your business needs.",
+    images: [
+      {
+        url: "/images/services-og.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Manufacturing Services"
+      }
+    ]
+  }
+}
diff --git a/src/components/ServiceCards/config/schema.js b/src/components/ServiceCards/config/schema.js
new file mode 100644
index 0000000..1f53b42
--- /dev/null
+++ b/src/components/ServiceCards/config/schema.js
@@ -0,0 +1,19 @@
+import { services } from './serviceCardsConfig'
+
+export const serviceCardsSchema = {
+  "@context": "https://schema.org",
+  "@type": "Service",
+  "provider": {
+    "@type": "Organization",
+    "name": "Your Company Name"
+  },
+  "serviceType": "Manufacturing Services",
+  "offers": services.map(service => ({
+    "@type": "Offer",
+    "itemOffered": {
+      "@type": "Service",
+      "name": service.title,
+      "description": service.description
+    }
+  }))
+}
diff --git a/src/components/ServiceCards/config/serviceCardsConfig.js b/src/components/ServiceCards/config/serviceCardsConfig.js
new file mode 100644
index 0000000..840d4b7
--- /dev/null
+++ b/src/components/ServiceCards/config/serviceCardsConfig.js
@@ -0,0 +1,43 @@
+export const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.2,
+      delayChildren: 0.1
+    }
+  }
+}
+
+export const cardVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: 0.6, ease: "easeOut" }
+  }
+}
+
+export const sectionContent = {
+  title: "Innovative Manufacturing Solutions",
+  subtitle: "Leverage our expertise in advanced manufacturing and design services to bring your ideas to life with precision and excellence."
+}
+
+export const services = [
+  {
+    id: 'pcba-manufacturing',
+    title: "PCBA & PCB Manufacturing",
+    description: "With our years of experience, we deliver expert PCBA and PCB manufacturing services catered to your business needs and production demands.",
+    cta: "Let's connect",
+    bgColor: "bg-[#1E2875]",
+    category: "Manufacturing"
+  },
+  {
+    id: '3d-printing',
+    title: "3D Designing and Printing",
+    description: "Work with our team of 3d designing and printing experts to reinvent the way you turn ideas into a creative and 3d visual reality.",
+    cta: "See opportunities",
+    bgColor: "bg-[#2563EB]",
+    category: "Design"
+  }
+] 
\ No newline at end of file
diff --git a/src/components/ServiceCards/styles/ServiceCards.css b/src/components/ServiceCards/styles/ServiceCards.css
new file mode 100644
index 0000000..20271d1
--- /dev/null
+++ b/src/components/ServiceCards/styles/ServiceCards.css
@@ -0,0 +1,54 @@
+.service-cards-section {
+  @apply py-20 bg-gray-50;
+}
+
+.service-cards-grid {
+  @apply grid grid-cols-1 md:grid-cols-2 gap-6 p-6 max-w-7xl mx-auto;
+}
+
+.service-card {
+  @apply rounded-2xl p-8 relative overflow-hidden min-h-[500px] flex flex-col;
+}
+
+.service-category {
+  @apply mb-16;
+}
+
+.service-category span {
+  @apply text-white/80 text-sm;
+}
+
+.service-content {
+  @apply flex flex-col h-full justify-between;
+}
+
+.service-text {
+  @apply space-y-6;
+}
+
+.service-title {
+  @apply text-white text-4xl md:text-5xl font-medium leading-tight;
+}
+
+.service-description {
+  @apply text-white/80 text-lg max-w-md;
+}
+
+.service-cta {
+  @apply mt-8 bg-white text-black rounded-full py-4 px-6 inline-flex items-center justify-between w-full sm:w-64;
+}
+
+.loading-skeleton {
+  @apply animate-pulse bg-gray-200 rounded-lg h-32 w-full max-w-3xl mx-auto;
+}
+
+.card-skeleton {
+  @apply animate-pulse bg-gray-200 rounded-2xl h-[500px] w-full;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .loading-skeleton,
+  .card-skeleton {
+    @apply animate-none;
+  }
+}
diff --git a/src/components/ServiceSection/ErrorBoundary.jsx b/src/components/ServiceSection/ErrorBoundary.jsx
new file mode 100644
index 0000000..5fbb4c0
--- /dev/null
+++ b/src/components/ServiceSection/ErrorBoundary.jsx
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Something went wrong.</h1>;
+    }
+
+    return this.props.children; 
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/components/ServiceSection/ServiceSection.css b/src/components/ServiceSection/ServiceSection.css
new file mode 100644
index 0000000..be14d9e
--- /dev/null
+++ b/src/components/ServiceSection/ServiceSection.css
@@ -0,0 +1,21 @@
+.lazy-loaded {
+    opacity: 1 !important;
+  }
+  
+  .scroll-padding {
+    scroll-padding-top: 5rem;
+  }
+
+  .text-primary-600 {
+    transition: all 0.1s ease-out;
+  }
+
+  @keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+  }
+
+  .number-complete {
+    animation: pulse 0.5s ease-out;
+  }
\ No newline at end of file
diff --git a/src/components/ServiceSection/ServiceSection.jsx b/src/components/ServiceSection/ServiceSection.jsx
new file mode 100644
index 0000000..df043a8
--- /dev/null
+++ b/src/components/ServiceSection/ServiceSection.jsx
@@ -0,0 +1,56 @@
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { HiArrowRight } from 'react-icons/hi';
+import StatNumber from './components/StatNumber';
+import ServiceCard from './components/ServiceCard';
+import { useServiceSection } from './hooks/useServiceSection';
+import { content, servicePaths } from './config/ServiceSection-module-content';
+import { fadeInUp, slideIn } from './config/animations';
+import styles from './styles/ServiceSection.module.css';
+import { Helmet } from 'react-helmet-async';
+import { getServiceMetaTags, servicesSEOData } from './utils/schema';
+
+const ServiceSection = memo(() => {
+  const { imageRef, secondImageRef, isScrolled } = useServiceSection();
+  const { first, second } = content.services;
+
+  return (
+    <>
+      <Helmet>
+        <title>{servicesSEOData.title}</title>
+        {getServiceMetaTags().map((tag, index) => 
+          tag.name ? (
+            <meta key={index} name={tag.name} content={tag.content} />
+          ) : (
+            <meta key={index} property={tag.property} content={tag.content} />
+          )
+        )}
+        <script type="application/ld+json">
+          {JSON.stringify(servicesSEOData.structuredData)}
+        </script>
+      </Helmet>
+      <section 
+        className={`${styles.serviceSection} ${isScrolled ? styles.scrollPadding : ''}`}
+        aria-label="Our Services"
+      >
+        <ServiceCard 
+          data={first}
+          imagePath={servicePaths.services.main}
+          imageRef={imageRef}
+          direction="left"
+        />
+        
+        <ServiceCard 
+          data={second}
+          imagePath={servicePaths.services.second}
+          imageRef={secondImageRef}
+          direction="right"
+          reverse
+        />
+      </section>
+    </>
+  );
+});
+
+ServiceSection.displayName = 'ServiceSection';
+export default ServiceSection;
\ No newline at end of file
diff --git a/src/components/ServiceSection/components/ServiceCard.jsx b/src/components/ServiceSection/components/ServiceCard.jsx
new file mode 100644
index 0000000..49987af
--- /dev/null
+++ b/src/components/ServiceSection/components/ServiceCard.jsx
@@ -0,0 +1,61 @@
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { HiArrowRight } from 'react-icons/hi';
+import StatNumber from './StatNumber';
+import { fadeInUp, slideIn } from '../config/animations';
+import { getOptimizedImageProps } from '../utils/imageOptimizer';
+import styles from '../styles/ServiceSection.module.css';
+
+const ServiceCard = memo(({ data, imagePath, imageRef, direction, reverse }) => {
+  return (
+    <div className={`${styles.serviceContainer} ${reverse ? styles.reverse : ''}`}>
+      <motion.div 
+        {...slideIn(direction)} 
+        className={styles.contentContainer}
+      >
+        <motion.h2 {...fadeInUp} className={styles.title}>
+          {data.title}
+        </motion.h2>
+        
+        <motion.h3 {...fadeInUp} transition={{ delay: 0.1 }} className={styles.subtitle}>
+          {data.subtitle}
+        </motion.h3>
+        
+        <motion.p {...fadeInUp} transition={{ delay: 0.2 }} className={styles.description}>
+          {data.description}
+        </motion.p>
+        
+        <motion.a
+          href="#explore-services"
+          className={`group ${styles.exploreLink}`}
+          whileHover={{ x: 10 }}
+          transition={{ type: "spring", stiffness: 400 }}
+          aria-label={`Explore ${data.title}`}
+        >
+          Explore our services 
+          <HiArrowRight aria-hidden="true" className={`${styles.arrowIcon} group-hover:translate-x-1`} />
+        </motion.a>
+
+        <div className={styles.statsContainer}>
+          {data.stats.map((stat, index) => (
+            <StatNumber key={index} {...stat} />
+          ))}
+        </div>
+      </motion.div>
+
+      <motion.div 
+        {...slideIn(direction === 'left' ? 'right' : 'left')} 
+        className={styles.imageContainer}
+      >
+        <img
+          {...getOptimizedImageProps(imagePath, `${data.title} illustration`)}
+          ref={imageRef}
+          className={styles.serviceImage}
+        />
+      </motion.div>
+    </div>
+  );
+});
+
+ServiceCard.displayName = 'ServiceCard';
+export default ServiceCard; 
\ No newline at end of file
diff --git a/src/components/ServiceSection/components/StatNumber.jsx b/src/components/ServiceSection/components/StatNumber.jsx
new file mode 100644
index 0000000..e9d13ec
--- /dev/null
+++ b/src/components/ServiceSection/components/StatNumber.jsx
@@ -0,0 +1,37 @@
+import { memo, useRef, useEffect } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { useCountAnimation } from '@/hooks/useCountAnimation';
+import { fadeInUp } from '../config/animations';
+
+const StatNumber = memo(({ number, label }) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+  const rawNumber = parseInt(number);
+  const [count, setHasAnimated] = useCountAnimation(rawNumber, 2000, true);
+  
+  useEffect(() => {
+    if (isInView) {
+      setHasAnimated(true);
+    }
+  }, [isInView, setHasAnimated]);
+
+  return (
+    <motion.div
+      ref={ref}
+      {...fadeInUp}
+      className="text-center"
+      role="group"
+      aria-label={`${label}: ${number}`}
+    >
+      <span className="block text-3xl lg:text-4xl font-bold bg-gradient-to-r from-indigo-500 to-blue-500 bg-clip-text text-transparent">
+        {count}{number.includes('+') ? '+' : number.includes('%') ? '%' : ''}
+      </span>
+      <span className="text-sm text-gray-600 mt-1">
+        {label}
+      </span>
+    </motion.div>
+  );
+});
+
+StatNumber.displayName = 'StatNumber';
+export default StatNumber; 
\ No newline at end of file
diff --git a/src/components/ServiceSection/config/ServiceSection-module-content.js b/src/components/ServiceSection/config/ServiceSection-module-content.js
new file mode 100644
index 0000000..7726760
--- /dev/null
+++ b/src/components/ServiceSection/config/ServiceSection-module-content.js
@@ -0,0 +1,34 @@
+import { imagePaths } from '@/constants/images';
+
+export const content = {
+  services: {
+    first: {
+      title: "Software Development Solutions",
+      subtitle: "Expert Development Services & Continuous Support",
+      description: "Providing expert services for software design, engineering, support, and continuous improvement all in one comprehensive platform.",
+      stats: [
+        { number: '12+', label: 'Expert Engineers' },
+        { number: '100+', label: 'Successful Projects' },
+        { number: '4+', label: 'Years of Excellence' }
+      ]
+    },
+    second: {
+      title: "VLSI Design Services",
+      subtitle: "Analog & Digital Circuit Design Services",
+      description: "Tech4Biz provides a full range of VLSI services, from analog and mixed-signal verification to IP development, RF design, and turnkey solutions—all tailored to meet your needs with precision.",
+      stats: [
+        { number: '50+', label: 'VLSI Designs' },
+        { number: '99%', label: 'Design Accuracy' },
+        { number: '24/7', label: 'Technical Support' }
+      ]
+    }
+  }
+};
+
+export const servicePaths = {
+  services: {
+    main: imagePaths.serviceSection.main,
+    second: imagePaths.serviceSection.cloud,
+    placeholder: imagePaths.serviceSection.placeholder
+  }
+};
\ No newline at end of file
diff --git a/src/components/ServiceSection/config/animations.js b/src/components/ServiceSection/config/animations.js
new file mode 100644
index 0000000..e5f9007
--- /dev/null
+++ b/src/components/ServiceSection/config/animations.js
@@ -0,0 +1,32 @@
+export const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  whileInView: { opacity: 1, y: 0 },
+  viewport: { once: true },
+  transition: { duration: 0.5 }
+};
+
+export const slideIn = (direction) => ({
+  initial: { 
+    opacity: 0, 
+    x: direction === 'left' ? -50 : 50,
+    width: '100%'
+  },
+  whileInView: { 
+    opacity: 1, 
+    x: 0,
+    width: '100%'
+  },
+  viewport: { once: true },
+  transition: { duration: 0.5 }
+});
+
+export const pulseAnimation = {
+  initial: { scale: 1 },
+  animate: { 
+    scale: [1, 1.05, 1],
+    transition: {
+      duration: 0.5,
+      ease: "easeOut"
+    }
+  }
+}; 
\ No newline at end of file
diff --git a/src/components/ServiceSection/hooks/useServiceSection.js b/src/components/ServiceSection/hooks/useServiceSection.js
new file mode 100644
index 0000000..5245ce0
--- /dev/null
+++ b/src/components/ServiceSection/hooks/useServiceSection.js
@@ -0,0 +1,37 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { useLazyLoad } from '@/hooks/useLazyLoad';
+import { useScrollPosition } from '@/hooks/useScrollPosition';
+import { debounce } from '@/utils/helpers';
+
+export const useServiceSection = () => {
+  const imageRef = useLazyLoad();
+  const secondImageRef = useLazyLoad();
+  const isScrolled = useScrollPosition();
+
+  const handleScroll = useCallback((e) => {
+    if (!imageRef.current || !secondImageRef.current) return;
+    
+    const { top: firstTop } = imageRef.current.getBoundingClientRect();
+    const { top: secondTop } = secondImageRef.current.getBoundingClientRect();
+    
+    if (firstTop < window.innerHeight) {
+      imageRef.current.classList.add('lazy-loaded');
+    }
+    
+    if (secondTop < window.innerHeight) {
+      secondImageRef.current.classList.add('lazy-loaded');
+    }
+  }, []);
+
+  useEffect(() => {
+    const debouncedScroll = debounce(handleScroll, 100);
+    window.addEventListener('scroll', debouncedScroll);
+    return () => window.removeEventListener('scroll', debouncedScroll);
+  }, [handleScroll]);
+
+  return {
+    imageRef,
+    secondImageRef,
+    isScrolled
+  };
+}; 
\ No newline at end of file
diff --git a/src/components/ServiceSection/index.jsx b/src/components/ServiceSection/index.jsx
new file mode 100644
index 0000000..faf6f04
--- /dev/null
+++ b/src/components/ServiceSection/index.jsx
@@ -0,0 +1,17 @@
+import { lazy, Suspense } from 'react';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
+import ErrorBoundary from './ErrorBoundary';
+
+const ServiceSection = lazy(() => import('./ServiceSection'));
+
+const ServiceSectionWrapper = () => {
+  return (
+    <ErrorBoundary>
+    <Suspense fallback={<LoadingSpinner />}>
+      <ServiceSection />
+    </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default ServiceSectionWrapper; 
\ No newline at end of file
diff --git a/src/components/ServiceSection/styles/ServiceSection.module.css b/src/components/ServiceSection/styles/ServiceSection.module.css
new file mode 100644
index 0000000..ac04243
--- /dev/null
+++ b/src/components/ServiceSection/styles/ServiceSection.module.css
@@ -0,0 +1,57 @@
+.serviceSection {
+  @apply container mx-auto px-4 py-16 lg:py-20 space-y-32 overflow-hidden;
+}
+
+.serviceContainer {
+  @apply flex flex-col lg:flex-row items-center gap-12 w-full overflow-hidden;
+}
+
+.reverse {
+  @apply lg:flex-row-reverse;
+}
+
+.contentContainer {
+  @apply lg:w-1/2 space-y-6;
+}
+
+.title {
+  @apply text-2xl sm:text-4xl lg:text-5xl font-bold text-gray-900;
+}
+
+.subtitle {
+  @apply text-lg sm:text-xl lg:text-2xl text-gray-600 font-medium;
+}
+
+.description {
+  @apply text-gray-600 leading-relaxed;
+}
+
+.exploreLink {
+  @apply inline-flex items-center gap-2 font-medium cursor-pointer
+  bg-gradient-to-r from-indigo-500 to-blue-500
+  text-white px-4 py-2 rounded-md
+  hover:from-indigo-600 hover:to-blue-600
+  active:from-indigo-700 active:to-blue-700
+  transition-all duration-300
+  focus:outline-none;
+}
+
+.arrowIcon {
+  @apply transition-transform;
+}
+
+.statsContainer {
+  @apply pt-8 grid grid-cols-3 gap-4 lg:flex lg:flex-wrap lg:gap-8;
+}
+
+.imageContainer {
+  @apply w-full h-[300px] lg:h-auto lg:w-1/2 relative overflow-hidden rounded-lg aspect-[6/4];
+}
+
+.serviceImage {
+  @apply w-full h-full object-cover transition-all duration-300 hover:scale-105;
+}
+
+.scrollPadding {
+  @apply scroll-mt-20;
+} 
\ No newline at end of file
diff --git a/src/components/ServiceSection/styles/animations.module.css b/src/components/ServiceSection/styles/animations.module.css
new file mode 100644
index 0000000..7075e08
--- /dev/null
+++ b/src/components/ServiceSection/styles/animations.module.css
@@ -0,0 +1,92 @@
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(50px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(1); }
+}
+
+.fadeInUp {
+  animation: fadeInUp 0.5s ease-out forwards;
+}
+
+.slideInLeft {
+  animation: slideInLeft 0.5s ease-out forwards;
+}
+
+.slideInRight {
+  animation: slideInRight 0.5s ease-out forwards;
+}
+
+.pulse {
+  animation: pulse 0.5s ease-out;
+}
+
+/* Animation delays */
+.delay-100 {
+  animation-delay: 100ms;
+}
+
+.delay-200 {
+  animation-delay: 200ms;
+}
+
+.delay-300 {
+  animation-delay: 300ms;
+}
+
+/* Animation utilities */
+.animate-once {
+  animation-fill-mode: forwards;
+}
+
+.will-change-transform {
+  will-change: transform;
+}
+
+.backface-hidden {
+  backface-visibility: hidden;
+}
+
+/* Performance optimizations */
+@media (prefers-reduced-motion: reduce) {
+  .fadeInUp,
+  .slideInLeft,
+  .slideInRight,
+  .pulse {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+} 
\ No newline at end of file
diff --git a/src/components/ServiceSection/utils/imageOptimizer.js b/src/components/ServiceSection/utils/imageOptimizer.js
new file mode 100644
index 0000000..2ff660e
--- /dev/null
+++ b/src/components/ServiceSection/utils/imageOptimizer.js
@@ -0,0 +1,16 @@
+import { imagePaths } from '@/constants/images';
+
+export const getOptimizedImageProps = (image, alt) => ({
+  src: image,
+  alt,
+  loading: "lazy",
+  srcSet: `${image} 300w, ${image} 600w, ${image} 900w`,
+  sizes: "(max-width: 768px) 100vw, 50vw",
+  width: "100%",
+  height: "auto",
+  decoding: "async",
+  onError: (e) => {
+    e.target.src = imagePaths.serviceSection.placeholder;
+    console.error(`Failed to load image: ${alt}`);
+  }
+}); 
\ No newline at end of file
diff --git a/src/components/ServiceSection/utils/schema.js b/src/components/ServiceSection/utils/schema.js
new file mode 100644
index 0000000..a75af15
--- /dev/null
+++ b/src/components/ServiceSection/utils/schema.js
@@ -0,0 +1,23 @@
+export const servicesSEOData = {
+  title: "Our Services - Software Engineering & VLSI Design",
+  description: "Expert software engineering solutions and VLSI design services. Comprehensive development, support, and continuous improvement platform.",
+  keywords: "software engineering, VLSI design, development services, technical support",
+  structuredData: {
+    "@context": "https://schema.org",
+    "@type": "Service",
+    "name": "Tech4Biz Services",
+    "serviceType": ["Software Engineering", "VLSI Design"],
+    "provider": {
+      "@type": "Organization",
+      "name": "Tech4Biz"
+    }
+  }
+};
+
+export const getServiceMetaTags = () => [
+  { name: "description", content: servicesSEOData.description },
+  { name: "keywords", content: servicesSEOData.keywords },
+  { property: "og:title", content: servicesSEOData.title },
+  { property: "og:description", content: servicesSEOData.description },
+  { property: "og:type", content: "website" }
+]; 
\ No newline at end of file
diff --git a/src/components/common/ErrorBoundary.jsx b/src/components/common/ErrorBoundary.jsx
new file mode 100644
index 0000000..83c7d26
--- /dev/null
+++ b/src/components/common/ErrorBoundary.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, info) {
+    // You can log the error to an error reporting service here
+    console.error("ErrorBoundary caught an error:", error, info);
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+    // Optionally, you can add logic to retry fetching data or re-rendering components
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex flex-col items-center justify-center h-full p-4 bg-black text-white">
+          <h2 className="text-2xl font-bold mb-4">Oops! Something went wrong.</h2>
+          <p className="mb-6">We encountered an unexpected error. Please try again.</p>
+          <button 
+            onClick={this.handleRetry} 
+            className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600 transition-colors"
+          >
+            Retry
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/src/components/common/OptimizedImage.jsx b/src/components/common/OptimizedImage.jsx
new file mode 100644
index 0000000..f1a9dc5
--- /dev/null
+++ b/src/components/common/OptimizedImage.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+
+const OptimizedImage = ({
+  src,
+  alt,
+  width,
+  height,
+  className,
+  priority = false,
+  sizes = "100vw",
+  quality = 75,
+  onError,
+  onLoad
+}) => {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      loading={priority ? "eager" : "lazy"}
+      decoding="async"
+      className={className}
+      onError={onError}
+      onLoad={onLoad}
+    />
+  );
+};
+
+export default OptimizedImage;
diff --git a/src/components/commonFallback/LoadingFallback.jsx b/src/components/commonFallback/LoadingFallback.jsx
new file mode 100644
index 0000000..64a50a3
--- /dev/null
+++ b/src/components/commonFallback/LoadingFallback.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import styles from './LoadingFallback.module.css';
+
+export const LoadingFallback = () => (
+  <div className={styles.loaderContainer} role="status" aria-live="polite">
+    <div className={styles.loader}></div>
+    <span className="sr-only">Loading notifications...</span>
+  </div>
+);
\ No newline at end of file
diff --git a/src/components/commonFallback/LoadingFallback.module.css b/src/components/commonFallback/LoadingFallback.module.css
new file mode 100644
index 0000000..09d79c8
--- /dev/null
+++ b/src/components/commonFallback/LoadingFallback.module.css
@@ -0,0 +1,7 @@
+.loaderContainer {
+    @apply flex items-center justify-center p-4;
+  }
+  
+  .loader {
+    @apply border-4 border-tech4biz-500 border-t-transparent rounded-full h-6 w-6 animate-spin;
+  }
\ No newline at end of file
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
new file mode 100644
index 0000000..e3840fe
--- /dev/null
+++ b/src/components/footer/Footer.jsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { containerVariants, itemVariants, footerLinks, socialIcons, legalLinks } from './config/footerConfig'
+import { useState } from 'react'
+import { ChevronDown } from 'lucide-react'
+
+export default function Footer() {
+  const [expandedSection, setExpandedSection] = useState(null)
+
+  const toggleSection = (title) => {
+    setExpandedSection(expandedSection === title ? null : title)
+  }
+
+  return (
+    <motion.footer 
+      className="bg-[#1C2B33] text-[#CBD5E0] py-8 md:py-16"
+      variants={containerVariants}
+      initial="hidden"
+      animate="visible"
+    >
+      <div className="max-w-7xl mx-auto px-4 md:px-8">
+        {/* Main Footer Links */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-2 md:gap-y-12 mb-8 md:mb-16">
+          {Object.entries(footerLinks).map(([title, items]) => (
+            <div key={title} className="border-b md:border-none border-gray-700">
+              <button 
+                onClick={() => toggleSection(title)}
+                className="w-full flex justify-between items-center py-4 md:py-0 md:mb-4"
+              >
+                <h2 className="text-white font-medium text-base">{title}</h2>
+                <ChevronDown 
+                  className={`w-5 h-5 transition-transform md:hidden ${
+                    expandedSection === title ? 'rotate-180' : ''
+                  }`}
+                />
+              </button>
+              <ul className={`space-y-3 overflow-hidden transition-all duration-300 md:h-auto ${
+                expandedSection === title ? 'h-auto pb-4' : 'h-0 md:h-auto'
+              }`}>
+                {items.map((item) => (
+                  <motion.li 
+                    key={item}
+                    whileHover={{ x: 2 }}
+                    transition={{ duration: 0.2 }}
+                  >
+                    <a 
+                      href="#" 
+                      className="text-sm hover:text-white transition-colors duration-200 block py-1"
+                    >
+                      {item}
+                    </a>
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {/* Social Media Section */}
+        <div className="flex items-center justify-center space-x-6 md:space-x-12 mb-8 md:mb-12">
+          <div className="h-px bg-gray-700 flex-1 hidden md:block" />
+          <div className="flex space-x-4 md:space-x-6">
+            {socialIcons.map((Icon, index) => (
+              <motion.a
+                key={index}
+                href="#"
+                className="text-gray-400 hover:text-white transition-colors duration-200"
+                whileHover={{ scale: 1.1 }}
+                whileTap={{ scale: 0.95 }}
+              >
+                <Icon className="w-5 h-5 md:w-6 md:h-6" />
+              </motion.a>
+            ))}
+          </div>
+          <div className="h-px bg-gray-700 flex-1 hidden md:block" />
+        </div>
+
+        {/* Bottom Section */}
+        <div className="text-center space-y-4 md:space-y-6">
+          <div className="flex justify-center mb-4 md:mb-6">
+            <img 
+              src="/placeholder.svg?height=40&width=120" 
+              alt="Company Logo" 
+              className="h-6 md:h-8"
+            />
+          </div>
+          
+          <p className="text-xs md:text-sm text-gray-400">
+            Copyright © {new Date().getFullYear()} Company Name, Inc.
+          </p>
+
+          <div className="flex flex-wrap justify-center gap-x-4 gap-y-2 text-xs md:text-sm md:gap-x-6">
+            {legalLinks.map((item) => (
+              <motion.a
+                key={item}
+                href="#"
+                className="text-gray-400 hover:text-white transition-colors duration-200"
+                whileHover={{ scale: 1.05 }}
+              >
+                {item}
+              </motion.a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </motion.footer>
+  )
+} 
\ No newline at end of file
diff --git a/src/components/footer/config/footerConfig.js b/src/components/footer/config/footerConfig.js
new file mode 100644
index 0000000..bc7cb52
--- /dev/null
+++ b/src/components/footer/config/footerConfig.js
@@ -0,0 +1,76 @@
+import { Facebook, Instagram, Youtube, Twitter, Linkedin, Share2 } from 'lucide-react'
+
+export const containerVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.6,
+      staggerChildren: 0.1
+    }
+  }
+}
+
+export const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0
+  }
+}
+
+export const footerLinks = {
+  'Solutions': [
+    'Cloud Infrastructure',
+    'PCBA & PCB Manufacturing',
+    '3D Designing and Printing',
+    'Software Development',
+    'Hardware Design',
+    'VLSI Design',
+    'IoT Solutions',
+    'AI Integration',
+    'Cloud Optimization',
+    'Circuit Design'
+  ],
+  'Resources': [
+    'Case Studies',
+    'Technical Blog',
+    'Documentation',
+    'API Reference',
+    'Knowledge Base',
+    'Community Forum',
+    'Video Tutorials',
+    'Whitepapers',
+    'Research Papers',
+    'Industry Reports'
+  ],
+  'Company': [
+    'About Us',
+    'Careers',
+    'Contact',
+    'Partners',
+    'News & Press',
+    'Events',
+    'Customer Stories',
+    'Sustainability',
+    'Investor Relations',
+    'Legal Information'
+  ],
+  'Support': [
+    'Help Center',
+    'Technical Support',
+    'Customer Service',
+    'Training',
+    'Consulting',
+    'System Status',
+    'Security',
+    'Compliance',
+    'Developer Tools',
+    'Service Level Agreements'
+  ]
+}
+
+export const socialIcons = [Facebook, Instagram, Youtube, Twitter, Linkedin, Share2]
+
+export const legalLinks = ['Legal Stuff', 'Privacy Policy', 'Security', 'Website Accessibility', 'Manage Cookies'] 
\ No newline at end of file
diff --git a/src/components/serviceSlider/CardSlider.jsx b/src/components/serviceSlider/CardSlider.jsx
new file mode 100644
index 0000000..c6e38c2
--- /dev/null
+++ b/src/components/serviceSlider/CardSlider.jsx
@@ -0,0 +1,103 @@
+import { memo, lazy, Suspense, useEffect, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Helmet } from 'react-helmet-async';
+import { slides } from './config/sliderData';
+import { sliderSchema, metaTags } from './config/schema';
+import useSlider from './hooks/useSlider';
+import styles from './styles/slider.module.css';
+
+// Importing utility for debouncing
+const debounce = (func, delay) => {
+  let timeoutId;
+  return (...args) => {
+    if (timeoutId) clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, delay);
+  };
+};
+
+const Controls = lazy(() => import('./components/Controls'));
+const MobileLayout = lazy(() => import('./components/MobileLayout'));
+const DesktopLayout = lazy(() => import('./components/DesktopLayout'));
+
+const CardSlider = memo(() => {
+  const { currentSlide, isPlaying, nextSlide, prevSlide, togglePlayPause } = useSlider(slides.length);
+
+  // Debounced resize handler
+  const handleResize = useCallback(
+    debounce(() => {
+      // Add any resize-related logic here if needed
+    }, 300),
+    []
+  );
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    // Cleanup on unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+
+  // Virtualization: Render only current, previous, and next slides
+  const getVisibleSlides = () => {
+    const visible = [];
+    if (currentSlide > 0) visible.push(currentSlide - 1);
+    visible.push(currentSlide);
+    if (currentSlide < slides.length - 1) visible.push(currentSlide + 1);
+    return visible;
+  };
+
+  const visibleSlides = getVisibleSlides();
+
+  return (
+    <>
+      <Helmet>
+        <title>{metaTags.title}</title>
+        <meta name="description" content={metaTags.description} />
+        <meta name="keywords" content={metaTags.keywords} />
+        <script type="application/ld+json">
+          {JSON.stringify(sliderSchema)}
+        </script>
+      </Helmet>
+      
+      <div className={styles['slider-container']}>
+        <AnimatePresence mode="sync">
+          {visibleSlides.map((slideIndex) => (
+            <motion.div
+              key={slideIndex}
+              initial={{ opacity: 0, x: slideIndex > currentSlide ? 100 : -100 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: slideIndex > currentSlide ? -100 : 100 }}
+              transition={{ duration: 0.5 }}
+              className="w-full h-full"
+            >
+              <Suspense fallback={<div>Loading Mobile Layout...</div>}>
+                <MobileLayout slide={slides[slideIndex]} />
+              </Suspense>
+              <Suspense fallback={<div>Loading Desktop Layout...</div>}>
+                <DesktopLayout slide={slides[slideIndex]} />
+              </Suspense>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+
+        <Suspense fallback={<div>Loading Controls...</div>}>
+          <Controls
+            isPlaying={isPlaying}
+            currentSlide={currentSlide}
+            totalSlides={slides.length}
+            onPrevClick={prevSlide}
+            onNextClick={nextSlide}
+            onPlayPauseClick={togglePlayPause}
+          />
+        </Suspense>
+      </div>
+    </>
+  );
+});
+
+CardSlider.displayName = 'CardSlider';
+
+export default CardSlider;
\ No newline at end of file
diff --git a/src/components/serviceSlider/components/Controls.jsx b/src/components/serviceSlider/components/Controls.jsx
new file mode 100644
index 0000000..2700159
--- /dev/null
+++ b/src/components/serviceSlider/components/Controls.jsx
@@ -0,0 +1,55 @@
+import { memo } from 'react';
+import { ChevronLeft, ChevronRight, Pause, Play } from 'lucide-react';
+import styles from '../styles/slider.module.css';
+import { ARIA_LABELS } from '../utils/constants';
+
+const Controls = memo(({ 
+  isPlaying, 
+  currentSlide, 
+  totalSlides, 
+  onPrevClick, 
+  onNextClick, 
+  onPlayPauseClick 
+}) => {
+  return (
+    <>
+      <div className="absolute bottom-8 left-8 z-10">
+        <button
+          onClick={onPlayPauseClick}
+          className={styles['slider-controls']}
+          aria-label={isPlaying ? ARIA_LABELS.PAUSE : ARIA_LABELS.PLAY}
+        >
+          {isPlaying ? (
+            <Pause className="w-6 h-6 text-white" />
+          ) : (
+            <Play className="w-6 h-6 text-white" />
+          )}
+        </button>
+      </div>
+
+      <div className="absolute bottom-8 right-8 flex items-center space-x-4 z-10">
+        <button
+          onClick={onPrevClick}
+          className={styles['slider-controls']}
+          aria-label={ARIA_LABELS.PREV}
+        >
+          <ChevronLeft className="w-6 h-6 text-white" />
+        </button>
+        <div className="text-white text-lg font-medium">
+          {currentSlide + 1}/{totalSlides}
+        </div>
+        <button
+          onClick={onNextClick}
+          className={styles['slider-controls']}
+          aria-label={ARIA_LABELS.NEXT}
+        >
+          <ChevronRight className="w-6 h-6 text-white" />
+        </button>
+      </div>
+    </>
+  );
+});
+
+Controls.displayName = 'Controls';
+
+export default Controls;
\ No newline at end of file
diff --git a/src/components/serviceSlider/components/DesktopLayout.jsx b/src/components/serviceSlider/components/DesktopLayout.jsx
new file mode 100644
index 0000000..a19cf20
--- /dev/null
+++ b/src/components/serviceSlider/components/DesktopLayout.jsx
@@ -0,0 +1,60 @@
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import OptimizedImage from '@/components/common/OptimizedImage';
+import styles from '../styles/slider.module.css';
+
+const DesktopLayout = memo(({ slide }) => {
+  return (
+    <div className="hidden lg:grid grid-cols-2 h-full items-center">
+      <motion.div
+        initial={{ scale: 1.1 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.7 }}
+        className="relative w-full h-[400px] self-center"
+      >
+        <OptimizedImage 
+          src={slide.image}
+          alt={slide.title}
+          width={1920}
+          height={500}
+          className="w-full h-[500px] object-cover"
+          sizes="50vw"
+          priority={true}
+        />
+        <div className={styles['image-gradient-desktop']} />
+      </motion.div>
+      <div className="flex flex-col justify-center pl-32 pr-16 bg-gray-900 text-white">
+        <motion.h1
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.3 }}
+          className="text-5xl font-bold mb-8"
+        >
+          {slide.title}
+        </motion.h1>
+        <motion.p
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.4 }}
+          className="text-xl text-gray-300 mb-12 max-w-xl"
+        >
+          {slide.description}
+        </motion.p>
+        <motion.button
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.5 }}
+          className={`${styles['slider-button']} ${styles['desktop-button']}`}
+        >
+          <span>Read more</span>
+          <ChevronRight className="w-5 h-5" />
+        </motion.button>
+      </div>
+    </div>
+  );
+});
+
+DesktopLayout.displayName = 'DesktopLayout';
+
+export default DesktopLayout;
\ No newline at end of file
diff --git a/src/components/serviceSlider/components/MobileLayout.jsx b/src/components/serviceSlider/components/MobileLayout.jsx
new file mode 100644
index 0000000..45dde59
--- /dev/null
+++ b/src/components/serviceSlider/components/MobileLayout.jsx
@@ -0,0 +1,59 @@
+import { memo } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import OptimizedImage from '@/components/common/OptimizedImage';
+import styles from '../styles/slider.module.css';
+
+const MobileLayout = memo(({ slide }) => {
+  return (
+    <div className="lg:hidden flex flex-col h-full">
+      <motion.div
+        initial={{ scale: 1.1 }}
+        animate={{ scale: 1 }}
+        transition={{ duration: 0.7 }}
+        className="relative w-full h-[300px]"
+      >
+        <OptimizedImage 
+          src={slide.image}
+          alt={slide.title}
+          width={1920}
+          height={300}
+          className="w-full h-[300px] object-cover"
+          sizes="(max-width: 768px) 100vw"
+        />
+        <div className={styles['image-gradient-mobile']} />
+      </motion.div>
+      <div className="flex flex-col justify-center px-6 py-8 h-1/2 bg-gray-900 text-white">
+        <motion.h2
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.3 }}
+          className="text-2xl font-bold mb-4"
+        >
+          {slide.title}
+        </motion.h2>
+        <motion.p
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.4 }}
+          className="text-base text-gray-300 mb-6"
+        >
+          {slide.description}
+        </motion.p>
+        <motion.button
+          initial={{ y: 20, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: 0.5 }}
+          className={`${styles['slider-button']} ${styles['mobile-button']}`}
+        >
+          <span>Read more</span>
+          <ChevronRight className="w-4 h-4" />
+        </motion.button>
+      </div>
+    </div>
+  );
+});
+
+MobileLayout.displayName = 'MobileLayout';
+
+export default MobileLayout;
\ No newline at end of file
diff --git a/src/components/serviceSlider/config/schema.js b/src/components/serviceSlider/config/schema.js
new file mode 100644
index 0000000..2b3831d
--- /dev/null
+++ b/src/components/serviceSlider/config/schema.js
@@ -0,0 +1,18 @@
+export const sliderSchema = {
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    "itemListElement": [
+      {
+        "@type": "ListItem",
+        "position": 1,
+        "name": "Case Studies Slider",
+        "description": "Interactive showcase of technical case studies and projects"
+      }
+    ]
+  };
+  
+  export const metaTags = {
+    title: "Case Studies & Projects | Interactive Showcase",
+    description: "Explore our technical case studies showcasing innovative solutions in technology, blockchain, IoT, and more.",
+    keywords: "case studies, technical projects, innovation, technology solutions",
+  };
\ No newline at end of file
diff --git a/src/components/serviceSlider/config/sliderData.js b/src/components/serviceSlider/config/sliderData.js
new file mode 100644
index 0000000..0fd83e8
--- /dev/null
+++ b/src/components/serviceSlider/config/sliderData.js
@@ -0,0 +1,59 @@
+import urbanConnectivity from '@/assets/Case Studies Slider/urban-connectivity.webp';
+import transformingBlockchain from '@/assets/Case Studies Slider/transforming-blockchain.webp';
+import iotConnectivity from '@/assets/Case Studies Slider/iotconnecctivity.webp';
+import fitness from '@/assets/Case Studies Slider/fitness.webp';
+import empower from '@/assets/Case Studies Slider/empower.webp';
+import decentralizedBanner from '@/assets/Case Studies Slider/decentralized-banner.webp';
+import automating from '@/assets/Case Studies Slider/automating.webp';
+import visualImg from '@/assets/Case Studies Slider/3D-Visual-Img.webp';
+
+export const slides = [
+  {
+    id: 1,
+    image: urbanConnectivity,
+    title: 'Transforming Urban Connectivity with 5G Technology',
+    description: 'A Technical Case Study on Revolutionizing Urban Infrastructure and Services.',
+  },
+  {
+    id: 2,
+    image: transformingBlockchain,
+    title: 'Transforming with Blockchain Technology',
+    description: 'A Case Study on Building an EVM-Compatible Smart Contract Platform',
+  },
+  {
+    id: 3,
+    image: iotConnectivity,
+    title: 'Revamping IoT Connectivity with Redesigned BLE Board',
+    description: 'A Case Study on Revamping BLE Board Technology for Enhanced Efficiency and Reliability.',
+  },
+  {
+    id: 4,
+    image: fitness,
+    title: 'Transforming Fitness Training with AR & VR Simulations',
+    description: 'Leveraging Cutting-Edge Technologies for Enhanced Instructor Training and Immersive Learning.',
+  },
+  {
+    id: 5,
+    image: empower,
+    title: 'Empowering Healthcare Data Management',
+    description: 'Transforming Healthcare Infrastructure for Scalability and Security with AWS Cloud Services.',
+  },
+  {
+    id: 6,
+    image: decentralizedBanner,
+    title: 'Decentralized Processing with Edge Computing in Manufacturing',
+    description: 'A Comprehensive Case Study on Implementing Decentralized Processing with Edge Computing in Manufacturing.',
+  },
+  {
+    id: 7,
+    image: automating,
+    title: 'Automating Manufacturing Excellence Revolutionizing Operations with RPA',
+    description: 'Empowering Efficiency, Accuracy and Customer Satisfaction through Robotic Process Automation.',
+  },
+  {
+    id: 8,
+    image: visualImg,
+    title: '3D Visualization',
+    description: 'A 3d Visual world like no other for world-class movies and storytelling with compact metaphysics libraries, making characters real.',
+  }
+]; 
\ No newline at end of file
diff --git a/src/components/serviceSlider/hooks/useSlider.js b/src/components/serviceSlider/hooks/useSlider.js
new file mode 100644
index 0000000..7b756d6
--- /dev/null
+++ b/src/components/serviceSlider/hooks/useSlider.js
@@ -0,0 +1,37 @@
+import { useState, useEffect, useCallback } from 'react';
+import { SLIDE_INTERVAL } from '../utils/constants';
+
+const useSlider = (totalSlides) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(true);
+
+  const nextSlide = useCallback(() => {
+    setCurrentSlide((prev) => (prev + 1) % totalSlides);
+  }, [totalSlides]);
+
+  const prevSlide = useCallback(() => {
+    setCurrentSlide((prev) => (prev - 1 + totalSlides) % totalSlides);
+  }, [totalSlides]);
+
+  const togglePlayPause = useCallback(() => {
+    setIsPlaying(prev => !prev);
+  }, []);
+
+  useEffect(() => {
+    let interval;
+    if (isPlaying) {
+      interval = setInterval(nextSlide, SLIDE_INTERVAL);
+    }
+    return () => clearInterval(interval);
+  }, [isPlaying, nextSlide]);
+
+  return {
+    currentSlide,
+    isPlaying,
+    nextSlide,
+    prevSlide,
+    togglePlayPause
+  };
+};
+
+export default useSlider;
\ No newline at end of file
diff --git a/src/components/serviceSlider/index.js b/src/components/serviceSlider/index.js
new file mode 100644
index 0000000..afc6329
--- /dev/null
+++ b/src/components/serviceSlider/index.js
@@ -0,0 +1,16 @@
+import { lazy, Suspense } from 'react';
+import ErrorBoundary from '@/components/common/ErrorBoundary';
+
+const CardSlider = lazy(() => import('./CardSlider'));
+
+const ServiceSlider = () => {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<div className="w-full h-[800px] bg-gray-900 animate-pulse" />}>
+        <CardSlider />
+      </Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default ServiceSlider;
\ No newline at end of file
diff --git a/src/components/serviceSlider/styles/slider.module.css b/src/components/serviceSlider/styles/slider.module.css
new file mode 100644
index 0000000..682a631
--- /dev/null
+++ b/src/components/serviceSlider/styles/slider.module.css
@@ -0,0 +1,27 @@
+.slider-container {
+  @apply relative w-full h-[800px] bg-gray-900 overflow-hidden;
+}
+
+.slider-controls {
+  @apply bg-gray-800/50 p-4 hover:bg-gray-700/50 transition-colors;
+}
+
+.slider-button {
+  @apply flex items-center space-x-2 bg-blue-600 text-white rounded-sm w-fit hover:bg-blue-700 transition-colors;
+}
+
+.mobile-button {
+  @apply px-4 py-2;
+}
+
+.desktop-button {
+  @apply px-6 py-3;
+}
+
+.image-gradient-mobile {
+  @apply absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30;
+}
+
+.image-gradient-desktop {
+  @apply absolute inset-0 bg-gradient-to-r from-transparent to-black opacity-30;
+}
diff --git a/src/components/serviceSlider/utils/constants.js b/src/components/serviceSlider/utils/constants.js
new file mode 100644
index 0000000..c402448
--- /dev/null
+++ b/src/components/serviceSlider/utils/constants.js
@@ -0,0 +1,18 @@
+export const SLIDE_INTERVAL = 5000;
+export const ANIMATION_DURATION = 0.7;
+export const ANIMATION_DELAY = {
+  TITLE: 0.3,
+  DESCRIPTION: 0.4,
+  BUTTON: 0.5
+};
+
+export const BREAKPOINTS = {
+  MOBILE: 'lg'
+};
+
+export const ARIA_LABELS = {
+  PLAY: 'Play slideshow',
+  PAUSE: 'Pause slideshow',
+  PREV: 'Previous slide',
+  NEXT: 'Next slide'
+};
diff --git a/src/components/utils/AsyncComponent.jsx b/src/components/utils/AsyncComponent.jsx
new file mode 100644
index 0000000..ecf39ad
--- /dev/null
+++ b/src/components/utils/AsyncComponent.jsx
@@ -0,0 +1,11 @@
+import React, { Suspense } from 'react';
+
+const AsyncComponent = ({ component: Component, fallback }) => {
+  return (
+    <Suspense fallback={fallback}>
+      <Component />
+    </Suspense>
+  );
+};
+
+export default AsyncComponent;
\ No newline at end of file
diff --git a/src/constants/images.js b/src/constants/images.js
new file mode 100644
index 0000000..c44c52d
--- /dev/null
+++ b/src/constants/images.js
@@ -0,0 +1,88 @@
+import awsLogo from '@/assets/Logo/AWS-Partner-Netwrok-tech4biz.webp'
+import tech4bizLogo from '@/assets/Logo/Tech4biz-logo.webp'
+import openaiLogo from '@/assets/Logo/OPENAI-Partner-Tech4biz.webp'
+import isoLogo from '@/assets/Logo/ISO-Partner-Tech4biz.webp'
+import ibmLogo from '@/assets/Logo/IBM-Tech4biz-partner.webp'
+import cloudtopiaLogo from '@/assets/Logo/Cloudtopiaa-Tech4biz.webp'
+import azureLogo from '@/assets/Logo/AZURE-Partner-Tech4biz.webp'
+import heroVideo from '@/assets/Tech4biz.mp4'
+
+// Import hero slide images
+import heroSlide1 from '@/assets/Header-slide/Img-1.webp'
+import heroSlide2 from '@/assets/Header-slide/Img-2.webp'
+import heroSlide3 from '@/assets/Header-slide/Img-3.webp'
+import heroSlide4 from '@/assets/Header-slide/Img-4.webp'
+
+// Import product card images
+import cloudDriveImage from '@/assets/Header/Product-Card/cloud-drive-storage-platform.webp';
+import codenukImage from '@/assets/Header/Product-Card/codenuk-coding-solution-platform.webp';
+import learningManagementSystemImage from '@/assets/Header/Product-Card/learning-management-system.webp';
+import cloudtopiaaImage from '@/assets/Header/Product-Card/cloudtopiaa-enterprise-solutions.webp';
+
+// Our Product Images
+import securityPlatformImage from '@/assets/Our-Product-Img/enterprise-security-defense-platform-dashboard-ai-threat-detection.webp';
+import riskAnalyticsImage from '@/assets/Our-Product-Img/advanced-risk-analytics-trading-platform-ml-investment-dashboard.webp';
+import commerceIntelligenceImage from '@/assets/Our-Product-Img/digital-commerce-intelligence-platform-pricing-analytics-dashboard.webp';
+import retailManagementImage from '@/assets/Our-Product-Img/connected-retail-management-iot-customer-experience-platform.webp';
+import speechRecognitionImage from '@/assets/Our-Product-Img/enterprise-speech-recognition-ai-voice-analysis-platform.webp';
+import learningPlatformImage from '@/assets/Our-Product-Img/digital-learning-experience-mixed-reality-education-platform.webp';
+import retailAutomationImage from '@/assets/Our-Product-Img/smart-retail-automation-inventory-management-platform.webp';
+import cloudCommerceImage from '@/assets/Our-Product-Img/enterprise-cloud-commerce-scalable-business-platform.webp';
+
+// Service Section Images
+import serviceMainImage from '@/assets/Service-Section/Software Engineering Solutions.webp';
+import serviceCloudImage from '@/assets/Service-Section/VLSI Design Services.webp';
+import servicePlaceholder from '@/assets/Service-Section/placeholder.jpg';
+
+export const imagePaths = {
+  carouselLogos: [
+    awsLogo,
+    tech4bizLogo,
+    openaiLogo,
+    isoLogo,
+    ibmLogo,
+    cloudtopiaLogo,
+    azureLogo
+  ],
+  companyLogo: {
+    tech4bizLogo
+  },
+  heroSlides: [
+    heroSlide1,
+    heroSlide2,
+    heroSlide3,
+    heroSlide4
+  ],
+  cards: {
+    clouddrive: cloudDriveImage,
+    codenuk: codenukImage,
+    learningManagementSystem: learningManagementSystemImage,
+    cloudtopiaa: cloudtopiaaImage
+  },
+  video: {
+    hero: heroVideo,
+    heroMobile: heroVideo,
+    poster: 'https://example.com/path-to-poster.jpg'
+  },
+  mobileCards: {
+    clouddrive: cloudDriveImage,
+    codenuk: codenukImage,
+    learningManagementSystem: learningManagementSystemImage,
+    cloudtopiaa: cloudtopiaaImage
+  },
+  productCards: {
+    securityPlatform: securityPlatformImage,
+    riskAnalytics: riskAnalyticsImage,
+    commerceIntelligence: commerceIntelligenceImage,
+    retailManagement: retailManagementImage,
+    speechRecognition: speechRecognitionImage,
+    learningPlatform: learningPlatformImage,
+    retailAutomation: retailAutomationImage,
+    cloudCommerce: cloudCommerceImage
+  },
+  serviceSection: {
+    main: serviceMainImage,
+    cloud: serviceCloudImage,
+    placeholder: servicePlaceholder
+  }
+};
\ No newline at end of file
diff --git a/src/css/App.css b/src/css/App.css
new file mode 100644
index 0000000..87108b2
--- /dev/null
+++ b/src/css/App.css
@@ -0,0 +1,33 @@
+/* Add to your global CSS file */
+.scrollbar-hide {
+  -ms-overflow-style: none !important;
+  scrollbar-width: none !important;
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+/* Add new class for the container */
+.carousel-container {
+  overflow: hidden !important;
+  -webkit-mask-image: -webkit-linear-gradient(left, transparent 0%, black 5%, black 95%, transparent 100%);
+  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
+}
+/* src/index.css */
+@keyframes scroll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.animate-scroll {
+  display: flex;
+  animation: scroll linear infinite;
+}
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
diff --git a/src/hooks/useCountAnimation.js b/src/hooks/useCountAnimation.js
new file mode 100644
index 0000000..b714ec3
--- /dev/null
+++ b/src/hooks/useCountAnimation.js
@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react';
+
+export const useCountAnimation = (end, duration = 2000, startOnView = false) => {
+  const [count, setCount] = useState(0);
+  const [hasAnimated, setHasAnimated] = useState(!startOnView);
+
+  useEffect(() => {
+    if (!hasAnimated) return;
+
+    const startNumber = 0;
+    const endNumber = parseInt(end);
+    const steps = 30; // Number of steps in the animation
+    const stepDuration = duration / steps;
+
+    let current = startNumber;
+    const increment = (endNumber - startNumber) / steps;
+    
+    const timer = setInterval(() => {
+      current += increment;
+      if (current >= endNumber) {
+        setCount(endNumber);
+        clearInterval(timer);
+      } else {
+        setCount(Math.floor(current));
+      }
+    }, stepDuration);
+
+    return () => clearInterval(timer);
+  }, [end, duration, hasAnimated]);
+
+  return [count, setHasAnimated];
+};
\ No newline at end of file
diff --git a/src/hooks/useDebounce.js b/src/hooks/useDebounce.js
new file mode 100644
index 0000000..fdc3ea3
--- /dev/null
+++ b/src/hooks/useDebounce.js
@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+import debounce from 'lodash/debounce';
+
+export const useDebounce = (callback, delay = 150) => {
+  return useCallback(
+    debounce((...args) => callback(...args), delay),
+    [callback, delay]
+  );
+};
diff --git a/src/hooks/useLazyLoad.js b/src/hooks/useLazyLoad.js
new file mode 100644
index 0000000..5cc0dc8
--- /dev/null
+++ b/src/hooks/useLazyLoad.js
@@ -0,0 +1,30 @@
+import { useEffect, useRef } from 'react';
+
+export const useLazyLoad = (options = {}) => {
+  const elementRef = useRef(null);
+  const observerRef = useRef(null);
+
+  useEffect(() => {
+    observerRef.current = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && elementRef.current) {
+          elementRef.current.src = elementRef.current.dataset.src;
+          elementRef.current.classList.add('lazy-loaded');
+          observerRef.current.unobserve(entry.target);
+        }
+      });
+    }, options);
+
+    if (elementRef.current) {
+      observerRef.current.observe(elementRef.current);
+    }
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [options]);
+
+  return elementRef;
+};
\ No newline at end of file
diff --git a/src/hooks/useScrollPosition.js b/src/hooks/useScrollPosition.js
new file mode 100644
index 0000000..4c58441
--- /dev/null
+++ b/src/hooks/useScrollPosition.js
@@ -0,0 +1,24 @@
+import { useState, useEffect, useCallback } from 'react';
+import { debounce } from 'lodash';
+
+export const useScrollPosition = () => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  const handleScroll = useCallback(
+    debounce(() => {
+      setIsScrolled(window.scrollY > 0);
+    }, 100), // Adjust the debounce delay as needed
+    []
+  );
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+    
+    return () => {
+      handleScroll.cancel(); // Cancel any pending debounced calls on cleanup
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+
+  return isScrolled;
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..bd6213e
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..b9a1a6d
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
new file mode 100644
index 0000000..6afee94
--- /dev/null
+++ b/src/pages/Home.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Header from '../components/Header/Navbar';
+import Hero from '../components/Hero';
+import ProductGrid from '../components/ProductCards/ProductGrid';
+import ServiceSection from '../components/ServiceSection/ServiceSection';
+import CloudCTA from '../components/CloudCTA/CloudCTA';
+import CloudSlider from '../components/CloudSlider/CloudSlider';
+import CardSlider from '../components/serviceSlider/CardSlider';
+import ExperienceService from '../components/ExperienceSection/ExperienceService';
+import ProjectShowcase from '../components/ProjectShowcase/ProjectShowcase';
+import ServiceCards from '../components/ServiceCards/ServiceCards';
+import Footer from '../components/footer/Footer';
+
+const Home = () => {
+  return (
+    <>
+      <Header />
+      <Hero />
+      <ProductGrid />
+      <ServiceSection />
+      <CloudCTA />
+      <CloudSlider />
+      <CardSlider />
+      <ExperienceService />
+      <ProjectShowcase /> 
+      <ServiceCards />
+      <Footer />
+    </>
+  );
+};
+
+export default Home;
diff --git a/src/pages/ServicePage/components/ServiceContent.jsx b/src/pages/ServicePage/components/ServiceContent.jsx
new file mode 100644
index 0000000..edffd25
--- /dev/null
+++ b/src/pages/ServicePage/components/ServiceContent.jsx
@@ -0,0 +1,76 @@
+import React, { useState, useCallback, memo, useRef } from 'react';
+import { motion } from 'framer-motion';
+import { services } from '../config/services';
+import { useKeyboardNav } from '../hooks/useKeyboardNav';
+import { useMediaQuery } from '../hooks/useMediaQuery';
+import { useIntersectionObserver } from '../hooks/useIntersectionObserver';
+import { ANIMATION_VARIANTS } from '../config/animation';
+import { BREAKPOINTS } from '../utils/constants';
+import ServiceItem from './ServiceItem';
+import ServiceDetails from './ServiceDetails';
+import styles from '../styles/Service.module.css';
+
+const ServiceContent = () => {
+  const isMobile = useMediaQuery(BREAKPOINTS.MOBILE);
+  const [activeService, setActiveService] = useState(services[0]);
+  const activeIndex = services.findIndex(s => s.title === activeService.title);
+  const containerRef = useRef(null);
+  const [intersectionRef, isVisible] = useIntersectionObserver();
+
+  useKeyboardNav({
+    itemsLength: services.length,
+    currentIndex: activeIndex,
+    onSelect: useCallback((index) => setActiveService(services[index]), [services])
+  });
+
+  const handleProgressComplete = useCallback(() => {
+    const nextIndex = (activeIndex + 1) % services.length;
+    setActiveService(services[nextIndex]);
+  }, [activeIndex, services]);
+
+  const handleServiceSelect = useCallback((service) => {
+    setActiveService(service);
+  }, []);
+
+  return (
+    <div className={styles.container} ref={containerRef}>
+      <div className={styles.sidebar} ref={intersectionRef}>
+        <motion.div
+          variants={ANIMATION_VARIANTS.container}
+          initial="hidden"
+          animate={isVisible ? "visible" : "hidden"}
+        >
+          <h1 className={styles.heroTitle}>
+            Transforming Ideas into Digital Excellence
+          </h1>
+        </motion.div>
+
+        <ul 
+          className={styles.serviceList}
+          role="listbox"
+          aria-label="Services list"
+        >
+          {services.map((service) => (
+            <ServiceItem
+              key={service.title}
+              service={service}
+              isActive={activeService.title === service.title}
+              onSelect={() => handleServiceSelect(service)}
+              isMobile={isMobile}
+              onProgressComplete={handleProgressComplete}
+            />
+          ))}
+        </ul>
+      </div>
+      
+      {!isMobile && (
+        <ServiceDetails 
+          service={activeService}
+          variants={ANIMATION_VARIANTS.item}
+        />
+      )}
+    </div>
+  );
+};
+
+export default memo(ServiceContent);
\ No newline at end of file
diff --git a/src/pages/ServicePage/components/ServiceDetails.jsx b/src/pages/ServicePage/components/ServiceDetails.jsx
new file mode 100644
index 0000000..f5c596e
--- /dev/null
+++ b/src/pages/ServicePage/components/ServiceDetails.jsx
@@ -0,0 +1,46 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import OptimizedImage from '../../../components/common/OptimizedImage';
+import styles from '../styles/Service.module.css';
+
+const ServiceDetails = memo(({ service, variants }) => {
+  return (
+    <div className={styles.content}>
+      <motion.div
+        key={service.title}
+        variants={variants}
+        initial="hidden"
+        animate="visible"
+        className={styles.serviceContent}
+      >
+        <h2 className={styles.serviceTitle}>{service.title}</h2>
+        <p className={styles.serviceDescription}>{service.description}</p>
+        <button 
+          className={styles.readMoreButton}
+          aria-label={`Read more about ${service.title}`}
+        >
+          <span>Read more</span>
+          <ChevronRight 
+            className={styles.buttonIcon} 
+            size={16} 
+            aria-hidden="true"
+          />
+        </button>
+        <OptimizedImage
+          src={service.image}
+          alt={`Illustration for ${service.title}`}
+          className={styles.serviceImage}
+          width={800}
+          height={600}
+          loading="lazy"
+          srcSet={`${service.image}?w=400 400w, ${service.image}?w=800 800w`}
+          sizes="(max-width: 768px) 100vw, 800px"
+        />
+      </motion.div>
+    </div>
+  );
+});
+
+ServiceDetails.displayName = 'ServiceDetails';
+export default ServiceDetails;
diff --git a/src/pages/ServicePage/components/ServiceItem.jsx b/src/pages/ServicePage/components/ServiceItem.jsx
new file mode 100644
index 0000000..310919c
--- /dev/null
+++ b/src/pages/ServicePage/components/ServiceItem.jsx
@@ -0,0 +1,83 @@
+import React, { useState, useEffect, memo } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronRight } from 'lucide-react';
+import { ANIMATION_TIMING } from '../utils/constants';
+import styles from '../styles/Service.module.css';
+
+const ServiceItem = memo(({ 
+  service, 
+  isActive, 
+  onSelect, 
+  isMobile, 
+  onProgressComplete 
+}) => {
+  const [progress, setProgress] = useState(false);
+
+  useEffect(() => {
+    if (!isActive || !isMobile) return;
+
+    const timers = {
+      start: setTimeout(() => setProgress(true), ANIMATION_TIMING.PROGRESS_START),
+      complete: setTimeout(onProgressComplete, ANIMATION_TIMING.PROGRESS_COMPLETE)
+    };
+
+    return () => {
+      Object.values(timers).forEach(clearTimeout);
+      setProgress(false);
+    };
+  }, [isActive, isMobile, onProgressComplete]);
+
+  return (
+    <li 
+      className={styles.serviceItemContainer}
+      role="option"
+      aria-selected={isActive}
+    >
+      <button
+        className={`${styles.serviceItem} ${isActive ? styles.activeItem : ''}`}
+        onClick={() => onSelect(service)}
+        onKeyDown={(e) => e.key === 'Enter' && onSelect(service)}
+        aria-label={`Select ${service.title} service`}
+      >
+        <span className={styles.serviceDot} aria-hidden="true" />
+        <span>{service.title}</span>
+      </button>
+      
+      <AnimatePresence>
+        {isMobile && isActive && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: 'auto', opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.3 }}
+            className={styles.mobileServiceContent}
+          >
+            <p className={styles.serviceDescription}>{service.description}</p>
+            <button 
+              className={styles.readMoreButton}
+              aria-label={`Read more about ${service.title}`}
+            >
+              <span>Read more</span>
+              <ChevronRight className={styles.buttonIcon} size={16} />
+            </button>
+            <div 
+              className={styles.progressBar}
+              role="progressbar"
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-valuenow={progress ? 100 : 0}
+            >
+              <div 
+                className={`${styles.progressFill} ${progress ? styles.progressComplete : ''}`}
+                key={service.title}
+              />
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </li>
+  );
+});
+
+ServiceItem.displayName = 'ServiceItem';
+export default ServiceItem;
diff --git a/src/pages/ServicePage/config/animation.js b/src/pages/ServicePage/config/animation.js
new file mode 100644
index 0000000..53f3284
--- /dev/null
+++ b/src/pages/ServicePage/config/animation.js
@@ -0,0 +1,22 @@
+export const ANIMATION_VARIANTS = {
+    container: {
+      hidden: { opacity: 0 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: 0.1
+        }
+      }
+    },
+    item: {
+      hidden: { opacity: 0, y: 20 },
+      visible: {
+        opacity: 1,
+        y: 0,
+        transition: {
+          duration: 0.5,
+          ease: "easeOut"
+        }
+      }
+    }
+  };
\ No newline at end of file
diff --git a/src/pages/ServicePage/config/services.js b/src/pages/ServicePage/config/services.js
new file mode 100644
index 0000000..c5def03
--- /dev/null
+++ b/src/pages/ServicePage/config/services.js
@@ -0,0 +1,90 @@
+export const services = [
+      { 
+        title: '3D Animation & Character Designing', 
+        description: 'Tech4Biz Services provides excellent 3D animation and character design, including different animations, advanced modeling, rigging, and rendering to bring your idea to life.',
+        image: 'https://placehold.co/600x400'
+      },
+      { 
+        title: '3D Designing & Printing', 
+        description: 'Tech4Biz Services offers 3D design and printing services to help you transform your ideas. We focus on rapid prototyping, specialized manufacturing, and high-precision 3D printing.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Brand Building & Marketing Services',
+        description: 'Tech4Biz Services creates bespoke brand strategy, executes digital marketing campaigns, and uses content marketing to generate engagement and business success.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Cloud Infrastructure Deployments',
+        description: 'Tech4Biz Services offers experienced cloud infrastructure setups using AWS, Azure, and Google Cloud. We provide public, hybrid, and private cloud solutions that are scalable, secure, and efficient.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Cloud Computing Solutions',
+        description: 'Tech4Biz Services offers experienced cloud infrastructure setups using AWS, Azure, and Google Cloud. We provide public, hybrid, and private cloud solutions that are scalable, secure, and efficient.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Cyber security solutions',
+        description: 'Tech4Biz Services provides tailored cybersecurity solutions including network security, cloud protection, and penetration testing. Safeguard your business against evolving cyber threats.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Distributed Ledger Technologies (DLT)',
+        description: 'Tech4Biz Services specializes in Distributed Ledger Technologies (DLT), providing blockchain development, smart contract integration, and safe, transparent solutions for enterprises.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Hardware Design Development',
+        description: 'Tech4Biz provides expert custom hardware solutions, including PCB, embedded systems, FPGA, and ASIC design, with a focus on performance, reliability, and efficiency.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Immersive Technology',
+        description: 'Tech4biz\'s created immersive technology solutions can help you realize the full potential of AR, VR, and XR for more efficient and engaging business interactions.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Internet of things (IoT)',
+        description: 'Transform your organization with IoT solutions from Tech4biz Services, which offers expertise in device integration, data analytics, and cloud-based services.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'PCBA & PCB manufacturing',
+        description: 'Tech4biz Services provides high-quality PCB design, fabrication, and assembly services to meet your electronic manufacturing needs.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Quantum computing',
+        description: 'Transform your business with customized quantum computing solutions, such as algorithm creation, quantum hardware optimization, and quantum machine learning.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'R&D Solutions',
+        description: 'Tech4biz Services provides customized R&D solutions, such as AI, IoT, machine learning, and blockchain, to promote innovation and corporate growth.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Software Development',
+        description: 'Tech4biz Services provides custom software development with an emphasis on machine learning, IoT, blockchain, and agile methodologies to solve challenging industry challenges.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Software Designing Services',
+        description: 'Improve your business with Tech4biz\'s software design services, which include online and mobile app development, UX/UI design, and cloud-based solutions for seamless expansion.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'Social Media Designing Services',
+        description: 'Improve your social media presence with Tech4biz\'s design services, which include amazing visuals, animations, and specialized content strategies to captivate your target audience.',
+        image: 'https://placehold.co/600x400'
+      },
+      {
+        title: 'VLSI Design',
+        description: 'Tech4Biz provides end-to-end VLSI and FPGA design solutions, from RTL design to tape-out, ensuring high-performance and cost-effective results.',
+        image: 'https://placehold.co/600x400'
+      }
+  ].map(service => ({
+    ...service,
+    image: service.image || 'https://placehold.co/600x400'
+  }));
diff --git a/src/pages/ServicePage/hooks/useIntersectionObserver.js b/src/pages/ServicePage/hooks/useIntersectionObserver.js
new file mode 100644
index 0000000..4847260
--- /dev/null
+++ b/src/pages/ServicePage/hooks/useIntersectionObserver.js
@@ -0,0 +1,28 @@
+import { useEffect, useRef, useState } from 'react';
+
+export const useIntersectionObserver = (options = {}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const elementRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(([entry]) => {
+      setIsVisible(entry.isIntersecting);
+    }, {
+      threshold: 0.1,
+      ...options
+    });
+
+    const currentElement = elementRef.current;
+    if (currentElement) {
+      observer.observe(currentElement);
+    }
+
+    return () => {
+      if (currentElement) {
+        observer.unobserve(currentElement);
+      }
+    };
+  }, [options]);
+
+  return [elementRef, isVisible];
+};
diff --git a/src/pages/ServicePage/hooks/useKeyboardNav.js b/src/pages/ServicePage/hooks/useKeyboardNav.js
new file mode 100644
index 0000000..d10c8aa
--- /dev/null
+++ b/src/pages/ServicePage/hooks/useKeyboardNav.js
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+export const useKeyboardNav = ({ itemsLength, currentIndex, onSelect }) => {
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          onSelect((currentIndex + 1) % itemsLength);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          onSelect(currentIndex === 0 ? itemsLength - 1 : currentIndex - 1);
+          break;
+        default:
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [itemsLength, currentIndex, onSelect]);
+};
\ No newline at end of file
diff --git a/src/pages/ServicePage/hooks/useMediaQuery.js b/src/pages/ServicePage/hooks/useMediaQuery.js
new file mode 100644
index 0000000..eb71eef
--- /dev/null
+++ b/src/pages/ServicePage/hooks/useMediaQuery.js
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react';
+
+export const useMediaQuery = (query) => {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    setMatches(media.matches);
+
+    const listener = (e) => setMatches(e.matches);
+    media.addEventListener('change', listener);
+    
+    return () => media.removeEventListener('change', listener);
+  }, [query]);
+
+  return matches;
+};
diff --git a/src/pages/ServicePage/index.jsx b/src/pages/ServicePage/index.jsx
new file mode 100644
index 0000000..d45c402
--- /dev/null
+++ b/src/pages/ServicePage/index.jsx
@@ -0,0 +1,42 @@
+import React, { Suspense } from 'react';
+import ErrorBoundary from '../../components/common/ErrorBoundary';
+import { Helmet } from 'react-helmet-async';
+import { servicePageSchema, getServiceMetaTags } from './utils/schema';
+import styles from './styles/Service.module.css';
+import Header from "../../components/Header/Navbar";
+import Footer from '../../components/footer/Footer';
+
+const ServiceContent = React.lazy(() => import('./components/ServiceContent'));
+
+const LoadingFallback = () => (
+  <div className={styles.loadingContainer} role="alert" aria-busy="true">
+    <div className={styles.loadingSpinner}>Loading...</div>
+  </div>
+);
+
+const ServicePage = () => {
+  return (
+    <>
+      <Header />
+      <main>
+        <ErrorBoundary>
+          <Helmet>
+            <title>Our Services - Tech4biz</title>
+            <script type="application/ld+json">
+              {JSON.stringify(servicePageSchema)}
+            </script>
+            {getServiceMetaTags().map((meta, index) => (
+              <meta key={index} {...meta} />
+            ))}
+          </Helmet>
+          <Suspense fallback={<LoadingFallback />}>
+            <ServiceContent />
+          </Suspense>
+        </ErrorBoundary>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default ServicePage;
diff --git a/src/pages/ServicePage/styles/Service.module.css b/src/pages/ServicePage/styles/Service.module.css
new file mode 100644
index 0000000..72232ab
--- /dev/null
+++ b/src/pages/ServicePage/styles/Service.module.css
@@ -0,0 +1,136 @@
+.container {
+    @apply flex flex-col md:flex-row min-h-[calc(100vh-var(--header-height))] bg-black text-white;
+    font-family: 'Poppins', sans-serif;
+  }
+  
+  .sidebar {
+    @apply w-full md:w-1/3 p-8 flex flex-col;
+  }
+  
+  .heroTitle {
+    @apply text-[28px] md:text-[36px] font-bold mb-3 text-white;
+    font-family: 'Syne', sans-serif;
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+  
+  .serviceList {
+    @apply flex-grow flex flex-col;
+    @apply mt-8;
+    gap: 0.75rem;
+  }
+  
+  .serviceItem {
+    @apply cursor-pointer flex items-center relative;
+    @apply py-2 pl-10 pr-4;
+    @apply transition-all duration-300;
+    font-family: 'Poppins', sans-serif;
+  }
+  
+  .serviceItem span {
+    @apply text-[18px] text-start md:text-[22px] font-medium;
+    @apply transition-all duration-300;
+    color: #828282;
+  }
+  
+  .serviceItem:hover span {
+    @apply translate-x-4 text-white;
+  }
+  
+  .activeItem {
+    @apply border-[#2563EB];
+    @apply bg-[#2563EB] bg-opacity-5;
+  }
+  
+  .activeItem span {
+    color: #2563EB;
+  }
+  
+  .content {
+    @apply hidden md:flex md:w-2/3 p-8 flex-col items-center justify-center;
+  }
+  
+  .serviceContent {
+    @apply max-w-3xl w-full;
+    @apply flex flex-col items-start;
+  }
+  
+  .serviceDot {
+    @apply w-0 h-0 absolute left-4 opacity-0;
+    @apply bg-[#2563EB];
+    @apply transition-all duration-300;
+    @apply rounded-sm;
+  }
+  
+  .serviceItem:hover .serviceDot {
+    @apply w-2 h-2;
+    @apply opacity-100;
+  }
+  
+  .serviceTitle {
+    @apply text-[18px] md:text-[32px] font-bold mb-4 text-left w-full;
+    font-family: 'Poppins', sans-serif;
+  }
+  
+  .serviceDescription {
+    @apply text-[14px] md:text-[16px] mb-6 max-w-2xl;
+    @apply text-start md:text-left;
+    font-family: 'Poppins', sans-serif;
+  }
+  
+  .readMoreButton {
+    @apply mb-4 text-[16px] md:text-[18px] font-medium self-start;
+    @apply flex items-center gap-1;
+    @apply transition-all duration-300;
+    @apply hover:text-[#2563EB];
+    font-family: 'Poppins', sans-serif;
+  }
+  
+  .buttonIcon {
+    @apply transition-transform duration-300;
+    @apply text-white;
+    transform: translateX(0);
+  }
+  
+  .readMoreButton:hover .buttonIcon {
+    @apply text-[#2563EB];
+    transform: translateX(8px);
+  }
+  
+  .serviceImage {
+    @apply w-full h-auto rounded-lg shadow-lg;
+  }
+  
+  .serviceItemContainer {
+    @apply w-full flex flex-col;
+  }
+  
+  .mobileServiceContent {
+    @apply md:hidden px-10 py-4 overflow-hidden;
+    background: rgba(37, 99, 235, 0.03);
+  }
+  
+  .progressBar {
+    @apply w-full h-1 bg-white/10 mt-1 rounded-full;
+    @apply relative overflow-hidden;
+  }
+  
+  .progressFill {
+    @apply absolute left-0 top-0 h-full bg-[#2563EB];
+    @apply transition-[width] duration-[5000ms] ease-linear;
+    @apply transform-gpu;
+    width: 0%;
+  }
+  
+  .progressComplete {
+    width: 100%;
+  }
+  
+  .loadingContainer {
+    @apply flex items-center justify-center min-h-screen bg-black;
+  }
+  
+  .loadingSpinner {
+    @apply text-white text-xl font-medium;
+    @apply animate-pulse;
+  }
\ No newline at end of file
diff --git a/src/pages/ServicePage/utils/constants.js b/src/pages/ServicePage/utils/constants.js
new file mode 100644
index 0000000..77ecc68
--- /dev/null
+++ b/src/pages/ServicePage/utils/constants.js
@@ -0,0 +1,15 @@
+export const BREAKPOINTS = {
+  MOBILE: '(max-width: 768px)',
+  TABLET: '(max-width: 1024px)'
+};
+
+// export const VIRTUALIZATION_CONFIG = {
+//   CONTAINER_HEIGHT: 800,
+//   ITEM_HEIGHT: 60,
+//   OVERSCAN: 2
+// };
+
+export const ANIMATION_TIMING = {
+  PROGRESS_START: 300,
+  PROGRESS_COMPLETE: 5300
+};
diff --git a/src/pages/ServicePage/utils/schema.js b/src/pages/ServicePage/utils/schema.js
new file mode 100644
index 0000000..6f8c4d5
--- /dev/null
+++ b/src/pages/ServicePage/utils/schema.js
@@ -0,0 +1,59 @@
+import { services } from '../config/services';
+
+export const servicePageSchema = {
+    "@context": "https://schema.org",
+    "@type": "Service",
+    "name": "Tech4biz Professional Services",
+    "description": "Comprehensive technology services including 3D Animation, Web Development, Cloud Computing, and more",
+    "provider": {
+      "@type": "Organization",
+      "name": "Tech4biz",
+      "url": "https://tech4biz.com"
+    },
+    "serviceType": services.map(service => service.title),
+    "areaServed": "Worldwide",
+    "hasOfferCatalog": {
+      "@type": "OfferCatalog",
+      "name": "Tech Services Catalog",
+      "itemListElement": services.map(service => ({
+        "@type": "Offer",
+        "itemOffered": {
+          "@type": "Service",
+          "name": service.title,
+          "description": service.description,
+          "image": service.image
+        }
+      }))
+    }
+  };
+  
+  export const getServiceMetaTags = () => {
+    const serviceTypes = services.map(service => service.title).join(', ');
+    
+    return [
+      {
+        name: "description",
+        content: `Explore Tech4biz's comprehensive technology services including ${serviceTypes}`
+      },
+      {
+        name: "keywords",
+        content: serviceTypes
+      },
+      {
+        property: "og:title",
+        content: "Our Services - Tech4biz"
+      },
+      {
+        property: "og:type",
+        content: "website"
+      },
+      {
+        property: "og:description",
+        content: "Comprehensive technology services by Tech4biz"
+      },
+      {
+        property: "og:image",
+        content: "https://tech4biz.com/og-image.jpg"
+      }
+    ];
+  };
\ No newline at end of file
diff --git a/src/utils/debounce.js b/src/utils/debounce.js
new file mode 100644
index 0000000..865fd05
--- /dev/null
+++ b/src/utils/debounce.js
@@ -0,0 +1,11 @@
+export const debounce = (func, wait) => {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  };
\ No newline at end of file
diff --git a/src/utils/helpers.js b/src/utils/helpers.js
new file mode 100644
index 0000000..865fd05
--- /dev/null
+++ b/src/utils/helpers.js
@@ -0,0 +1,11 @@
+export const debounce = (func, wait) => {
+    let timeout;
+    return function executedFunction(...args) {
+      const later = () => {
+        clearTimeout(timeout);
+        func(...args);
+      };
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  };
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..73893ee
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,129 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(100%)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-10px)' },
+        },
+      },
+      animation: {
+        fadeIn: 'fadeIn 0.3s ease-in-out forwards',
+        slideUp: 'slideUp 0.5s ease-out forwards',
+        float: 'float 3s ease-in-out infinite',
+      },
+      colors: {
+        tech4biz: {
+          50: '#f5f7ff',
+          100: '#ebf0fe',
+          200: '#dde5fd',
+          300: '#c4d1fb',
+          400: '#9ab3f8',
+          500: '#6690f4',
+          600: '#4b6eeb',
+          700: '#3d59d4',
+          800: '#3447ad',
+          900: '#2d3c8a',
+        },
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        },
+        secondary: {
+          50: '#fdf2f8',
+          100: '#fce7f3',
+          200: '#fbcfe8',
+          300: '#f9a8d4',
+          400: '#f472b6',
+          500: '#ec4899',
+          600: '#db2777',
+          700: '#be185d',
+          800: '#9d174d',
+          900: '#831843',
+        },
+      },
+      screens: {
+        'xs': '480px',
+        '3xl': '1600px',
+        // Add more custom breakpoints if needed
+      },
+      spacing: {
+        '128': '32rem',
+        '144': '36rem',
+        // Extend spacing as needed
+      },
+      borderRadius: {
+        'xl': '1rem',
+        '2xl': '1.5rem',
+        // Extend border-radius as needed
+      },
+      boxShadow: {
+        '4xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
+        // Extend box-shadow as needed
+      },
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+      fontFamily: {
+        syne: ['Syne', 'sans-serif'],
+        poppins: ['Poppins', 'sans-serif'],
+      },
+    },
+  },
+  safelist: [
+    'bg-green-500',
+    'bg-blue-500',
+    'bg-red-500',
+    'bg-purple-500',
+    'hover:bg-green-600',
+    'hover:bg-blue-600',
+    'hover:bg-red-600',
+    'hover:bg-purple-600',
+    // Add more classes as needed
+  ],
+  plugins: [
+    // Add error handling for plugin loading
+    function({ addBase, theme }) {
+      try {
+        require('@tailwindcss/forms');
+        require('@tailwindcss/typography');
+      } catch (error) {
+        console.warn('Warning: @tailwindcss plugins not found. Some styles may be missing.');
+        return {};
+      }
+    },
+    // Only add plugins if they exist
+    ...(() => {
+      const plugins = [];
+      try {
+        plugins.push(require('@tailwindcss/forms'));
+        plugins.push(require('@tailwindcss/typography'));
+      } catch (error) {
+        // Silently fail if plugins are not installed
+      }
+      return plugins;
+    })(),
+  ],
+}
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..439a380
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,57 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import compression from 'vite-plugin-compression'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    compression({
+      algorithm: 'gzip',
+      ext: '.gz',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+    },
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    open: true,
+    cors: {
+      origin: '*',
+      credentials: true,
+    }
+  },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          vendor: [/node_modules/],
+          'service-page': [
+            './src/components/ServicePage/components/ServiceButton',
+            './src/components/ServicePage/components/ContentArea',
+            './src/components/ServicePage/components/MobileMenu',
+            './src/components/ServicePage/services-data'
+          ],
+          'main': [/src\/(?!components\/ServicePage)/]
+        },
+      },
+    },
+    sourcemap: process.env.NODE_ENV === 'development',
+    minify: 'esbuild',
+    modulePreload: {
+      polyfill: true,
+      resolveDependencies: (filename, deps) => {
+        if (filename.includes('ServicePage')) {
+          return [...deps]
+        }
+        return deps
+      }
+    }
+  },
+})
\ No newline at end of file