Initial Commit

.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": "react-app",
+  "rules": {
+    "react/style-prop-object": "off",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/heading-has-content": "off",
+    "jsx-a11y/iframe-has-title": "off"
+  }
+}

gatsby-config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  siteMetadata: {
+    title: 'Iteck',
+    description: 'Iteck - Multi-Purpose React.js Gatsby Template',
+    author: 'ThemesCamp',
+  },
+  plugins: ['gatsby-plugin-resolve-src', 'gatsby-plugin-eslint'],
+  trailingSlash: 'always',
+};

gatsby-node.js

@@ -0,0 +1,37 @@
+exports.onCreateWebpackConfig = ({
+  stage,
+  actions,
+  getConfig,
+  loaders,
+  plugins,
+}) => {
+  const config = getConfig();
+  const miniCssExtractPluginIndex = config.plugins.findIndex(
+    (plugin) => plugin.constructor.name === 'MiniCssExtractPlugin'
+  );
+
+  if (miniCssExtractPluginIndex > -1) {
+    // remove miniCssExtractPlugin from plugins list
+    config.plugins.splice(miniCssExtractPluginIndex, 1);
+
+    // re-add mini-css-extract-plugin
+    if (stage === 'build-javascript') {
+      config.plugins.push(
+        plugins.extractText({
+          filename: `[name].[contenthash].css`,
+          chunkFilename: `[name].[contenthash].css`,
+          ignoreOrder: true,
+        })
+      );
+    } else {
+      config.plugins.push(
+        plugins.extractText({
+          filename: `[name].css`,
+          chunkFilename: `[id].css`,
+          ignoreOrder: true,
+        })
+      );
+    }
+  }
+  actions.replaceWebpackConfig(config);
+};

gatsby-ssr.js

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

jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+      "paths": {
+        "components/*": ["components/*"],
+        "common/*": ["common/*"],
+        "data/*": ["data/*"],
+        "layouts/*": ["layouts/*"],
+      }
+  }
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "iteck-gatsby",
+  "version": "1.0.0",
+  "private": true,
+  "description": "iteck-gatsby",
+  "author": "Hassan Ali",
+  "keywords": [
+    "gatsby"
+  ],
+  "scripts": {
+    "develop": "gatsby develop",
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean"
+  },
+  "dependencies": {
+    "axios": "^0.27.2",
+    "gatsby": "^4.24.1",
+    "gatsby-plugin-resolve-src": "^2.1.0",
+    "lightgallery": "^2.5.0",
+    "mini-css-extract-plugin": "^2.7.7",
+    "rc-slider": "^10.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-modal-video": "^1.2.9",
+    "swiper": "^8.3.2"
+  },
+  "devDependencies": {
+    "eslint": "^7.32.0",
+    "eslint-webpack-plugin": "^3.2.0",
+    "gatsby-plugin-eslint": "^4.0.2"
+  }
+}

src/common/countdown.js

@@ -0,0 +1,43 @@
+export default function Countdown() {
+
+  document.addEventListener('readystatechange', event => {
+    if (event.target.readyState === "complete") {
+      var clockdiv = document.getElementsByClassName("clockdiv");
+      var countDownDate = new Array();
+      for (var i = 0; i < clockdiv.length; i++) {
+        countDownDate[i] = new Array();
+        countDownDate[i]['el'] = clockdiv[i];
+        countDownDate[i]['time'] = new Date(clockdiv[i].getAttribute('data-date')).getTime();
+        countDownDate[i]['days'] = 0;
+        countDownDate[i]['hours'] = 0;
+        countDownDate[i]['seconds'] = 0;
+        countDownDate[i]['minutes'] = 0;
+      }
+
+      var countdownfunction = setInterval(function () {
+        for (var i = 0; i < countDownDate.length; i++) {
+          var now = new Date().getTime();
+          var distance = countDownDate[i]['time'] - now;
+          countDownDate[i]['days'] = Math.floor(distance / (1000 * 60 * 60 * 24));
+          countDownDate[i]['hours'] = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+          countDownDate[i]['minutes'] = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+          countDownDate[i]['seconds'] = Math.floor((distance % (1000 * 60)) / 1000);
+
+          if (distance < 0) {
+            countDownDate[i]['el'].querySelector('.days').innerHTML = 0;
+            countDownDate[i]['el'].querySelector('.hours').innerHTML = 0;
+            countDownDate[i]['el'].querySelector('.minutes').innerHTML = 0;
+            countDownDate[i]['el'].querySelector('.seconds').innerHTML = 0;
+          } else {
+            countDownDate[i]['el'].querySelector('.days').innerHTML = countDownDate[i]['days'];
+            countDownDate[i]['el'].querySelector('.hours').innerHTML = countDownDate[i]['hours'];
+            countDownDate[i]['el'].querySelector('.minutes').innerHTML = countDownDate[i]['minutes'];
+            countDownDate[i]['el'].querySelector('.seconds').innerHTML = countDownDate[i]['seconds'];
+          }
+
+        }
+      }, 1000);
+    }
+  });
+
+}

src/common/fixStylesheetsOrder.js

@@ -0,0 +1,17 @@
+export function fixRtlStylesheetsOrder() {
+  const bootstrap_rtl = document.head.querySelector('link[href="/assets/css/lib/bootstrap.rtl.min.css"]');
+  const style_css = document.head.querySelector('link[href="/assets/css/style.css"]');
+  const style_rtl_css = document.head.querySelector('link[href="/assets/css/rtl_style.css"]');
+  bootstrap_rtl && document.head.append(bootstrap_rtl);
+  style_css && document.head.append(style_css);
+  style_rtl_css && document.head.append(style_rtl_css);
+}
+
+export function fixPreviewStylesheetOrder() {
+  const bootstrap_css = document.head.querySelector('link[href="/assets/css/lib/bootstrap.min.css"]');
+  const style_css = document.head.querySelector('link[href="/assets/css/style.css"]');
+  const preview_css = document.head.querySelector('link[href="/landing-preview/css/preview-style.css"]');
+  bootstrap_css && document.head.append(bootstrap_css);
+  style_css && document.head.append(style_css);
+  preview_css && document.head.append(preview_css);
+}

src/common/loadingPace.js

@@ -0,0 +1,43 @@
+
+const loadGoogleTagManager = () => {
+  // Inject the script tag into the <head>
+  const headScript = document.createElement("script");
+  headScript.text = `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-P8Q2DWL');`;
+  document.head.appendChild(headScript);
+
+  // Inject the noscript tag into the <body>
+  const bodyNoScript = document.createElement("noscript");
+  const iframe = document.createElement("iframe");
+  iframe.src = "https://www.googletagmanager.com/ns.html?id=GTM-P8Q2DWL";
+  iframe.height = "0";
+  iframe.width = "0";
+  iframe.style.display = "none";
+  iframe.style.visibility = "hidden";
+  bodyNoScript.appendChild(iframe);
+  document.body.insertBefore(bodyNoScript, document.body.firstChild);
+};
+
+const loadingPace = () => {
+    let preloader = document.querySelector("#preloader");
+
+    if (!preloader) return;
+
+    if (document.body.classList.contains("pace-done")) preloader.classList.add("isdone");
+
+    window.addEventListener("load", () => {
+        preloader.classList.add("isdone")
+    });
+
+    if (typeof window.Pace === 'undefined') return;
+
+    window.Pace.on("start", () => preloader.classList.remove("isdone"));
+
+    window.Pace.on("done", () => preloader.classList.add("isdone"));
+    loadGoogleTagManager(); // Call the function to load GTM
+}
+
+export default loadingPace

src/common/navbarScrollEffect.js

@@ -0,0 +1,21 @@
+export default function navbarScroll(navbar, isTransparent, isFaqPage) {
+  if (!navbar) return;
+
+  if (window.pageYOffset > 300) {
+    navbar.classList.add("nav-scroll");
+    if (isTransparent) navbar.classList.remove("bg-transparent");
+  } else {
+    navbar.classList.remove("nav-scroll");
+    if (isTransparent) navbar.classList.add("bg-transparent");
+  }
+
+  window.addEventListener("scroll", () => {
+    if (window.pageYOffset > 300) {
+      navbar.classList.add("nav-scroll");
+      if (isTransparent) navbar.classList.remove("bg-transparent");
+    } else {
+      navbar.classList.remove("nav-scroll");
+      if (isTransparent) navbar.classList.add("bg-transparent");
+    }
+  });
+}

src/common/parallaxie.js

@@ -0,0 +1,16 @@
+export default function parallaxie(selector) {
+  let elementBg = document.querySelector(selector);
+  let image = elementBg.getAttribute("data-background");
+  let position = elementBg.getBoundingClientRect().top * 0.55;
+
+  elementBg.style.backgroundImage = `url("${image}")`;
+  elementBg.style.backgroundSize = 'cover';
+  elementBg.style.backgroundRepeat = 'no-repeat';
+  elementBg.style.backgroundAttachment = 'fixed';
+  elementBg.style.backgroundPosition = `center ${position}px`;
+
+  window.addEventListener("scorll", () => {
+    position = elementBg.getBoundingClientRect().top * 0.55;
+    elementBg.style.backgroundPosition = `center ${position}px`;
+  });
+}

src/common/removeSlashFromPagination.js

@@ -0,0 +1,8 @@
+const removeSlashFromPagination = () => {
+  let swiperPagination = document.querySelector(".swiper-pagination");
+  if (swiperPagination) {
+    swiperPagination.innerHTML = swiperPagination.innerHTML.replace(" / ", "");
+  }
+};
+
+export default removeSlashFromPagination;

src/common/scrollToSection.js

@@ -0,0 +1,11 @@
+export default function scrollToSection(event) {
+  event.preventDefault();
+
+  const section = document.querySelector('[data-scroll-index="' + event.target.dataset.scrollNav + '"]');
+
+  if (section) {
+    setTimeout(() => {
+      section.scrollIntoView({ behavior: 'smooth' });
+    }, 300);
+  }
+}

src/common/scrollToTop.js

@@ -0,0 +1,20 @@
+export default function scrollToTop() {
+  const toTop = document.querySelector(".to_top");
+
+  if (!toTop) return;
+
+  window.addEventListener("scroll", function() {
+    var bodyScroll = window.scrollY;
+  
+    if (bodyScroll > 700) {
+      toTop.classList.add("show");
+    } else {
+      toTop.classList.remove("show");
+    }
+  });
+
+  toTop.addEventListener("click", function(event) {
+    event.preventDefault();
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+}

src/common/timer.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-unused-expressions */
+export default function timer(date) {
+  const second = 1000;
+  const minute = second * 60;
+  const hour = minute * 60;
+  const day = hour * 24;
+  // const week = hour * 24 * 7;
+
+  let countDown = new Date(date).getTime();
+
+  let x = setInterval(function () {
+    let now = new Date().getTime()
+    let distance = countDown - now;
+
+    document.getElementById('days').innerText = Math.floor(distance / (day));
+    document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
+    document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
+    document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
+  }, second)
+}

src/components/404/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+const NotFound = () => {
+  return (
+    <section className="erorr-page style-5">
+      <div className="container">
+        <div className="content">
+          <div className="row align-items-center">
+            <div className="col-lg-4">
+              <div className="info">
+                <div className="icon">
+                  <img src="/assets/img/icons/rocket.png" alt="" />
+                </div>
+                <h2 className="mb-30"> Opps! Looks Like Here is Nothing. </h2>
+                <p className="color-777"> The page you’re looking for isn’t found. We suggest you back to home. It’s easy... </p>
+                <a href="#" className="btn rounded-pill blue5-3Dbutn hover-blue2 sm-butn fw-bold mt-40">
+                  <span> <i className="fas fa-long-arrow-left me-2"></i> Back To Home </span>
+                </a>
+              </div>
+            </div>
+            <div className="col-lg-8 text-lg-end">
+              <div className="img">
+                <img src="/assets/img/404_1.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default NotFound

src/components/App/About/FirstContent.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const FirstContent = ({ features, rtl }) => {
+  return (
+    <div className="content frs-content"  id="about" data-scroll-index="2">
+      <div className="container">
+        <div className="row align-items-center justify-content-between">
+          <div className="col-lg-6">
+            <div className="img mb-30 mb-lg-0">
+              <img src="/assets/img/about/ipad.png" alt="" />
+            </div>
+          </div>
+          <div className="col-lg-5">
+            <div className="info">
+              <div className="section-head style-4">
+                <small className="title_small">{ rtl ? 'نوتيرو - تطبيق مذكرة سهل الاستخدام' : 'Notero - Easy Notes App' }</small>
+                <h2 className="mb-30">{ rtl ? 'تطبيق لاصحاب' : 'The Notero For' } <span> { rtl ? 'الابداع' : 'Creatives' } </span> </h2>
+              </div>
+              <p className="text mb-40">
+                {
+                  rtl && 'حافظ على تركيزك وإنتاجيتك مع مساحة  خالية من الفوضى. الطرق المرنة لتنظيم ملاحظاتك: علامات التجزئة ، دفاتر الملاحظات المتداخلة ، تثبيت الملاحظات في أعلى قائمة الملاحظات ، إلخ.'
+                }
+                { 
+                  !rtl && 
+                    <>
+                      Stay focused and productive with a clean and clutter-free note <br /> space. The flexible ways to organize your notes: hashtags, nested notebooks, pinning notes to the top of the note list, etc
+                    </> 
+                }
+              </p>
+              <ul>
+                {
+                  features.map((item, index) => (
+                    <li className="d-flex align-items-center mb-3" key={index}>
+                      <small className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-3">
+                        <i className={item.icon}></i>
+                      </small>
+                      <h6 className="fw-bold">{item.title}</h6>
+                    </li>
+                  ))
+                }
+              </ul>
+              <a href="page-contact-5.html" className="btn rounded-pill bg-blue4 fw-bold text-white mt-50">
+                <small> Free Register </small>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/about/about_s4_lines.png" alt="" className="lines" />
+      <img src="/assets/img/about/about_s4_bubble.png" alt="" className="bubble" />
+    </div>
+  )
+}
+
+export default FirstContent;

src/components/App/About/Integration.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Integration = ({ integrations, rtl }) => {
+  return (
+    <div className="integration pt-60" data-scroll-index="3">
+      <div className="section-head text-center style-4">
+        <small className="title_small">{ rtl ? 'دفعة لمرة واحدة' : 'One-Time Payment' }</small>
+        <h2 className="mb-20">{ rtl ? 'متوافق مع' : 'Integration With' } <span>{ rtl ? 'التطبيقات الشعبية' : 'Popular Apps' }</span> </h2>
+        <p>{ rtl ? 'نوتيرو يتكامل مع التطبيقات الشعبية. تساعدك على التواصل والتعاون بسهولة' : 'Notero intergrate with popular apps. Help you easy to connect and collaboration' }</p>
+      </div>
+      <div className="container">
+        <div className="content">
+          {
+            integrations.map((integration, index) => (
+              <div className="img" key={index}>
+                <img src={integration} alt="" className="mt-30" />
+              </div>
+            ))
+          }
+        </div>
+      </div>
+      <img src="/assets/img/about/intg_back.png" alt="" className="intg-back" />
+    </div>
+  )
+}
+
+export default Integration

src/components/App/About/SecondContent.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+
+const SecondContent = ({ accordions, rtl }) => {
+  return (
+    <div className="content sec-content">
+      <div className="container">
+        <div className="row align-items-center justify-content-between">
+          <div className="col-lg-5 order-2 order-lg-0">
+            <div className="info">
+              <div className="section-head style-4">
+                <small className="title_small">{ rtl ? 'إدارة أفضل للملاحظات' : 'Better Note Management' }</small>
+                <h2 className="mb-30">{ rtl ? 'ملاحظاتك' : 'Your Notes' } <span> { rtl ? 'في امان' : 'Security' } </span></h2>
+              </div>
+              <p className="text mb-40">
+                {
+                 rtl ? 
+                 'يتزامن تلقائيًا عبر جميع أجهزتك. يمكنك أيضًا الوصول إلى الملاحظات وكتابتها بدون اتصال بالإنترنت'
+                 :
+                 'Automatically syncs across all your devices. You can also access and write notes without internet connection.' 
+                }
+              </p>
+              <div className="faq style-3 style-4">
+                <div className="accordion" id="accordionExample">
+                  {
+                    accordions.map((accordion, index) => (
+                      <div className="accordion-item" key={index}>
+                        <h2 className="accordion-header" id={`heading${accordion.id}`}>
+                          <button className={`accordion-button ${index !== 0 ?'collapsed':''}`} type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${accordion.id}`} aria-expanded="true" aria-controls={`collapse${accordion.id}`}>
+                            { accordion.title }
+                          </button>
+                        </h2>
+                        <div id={`collapse${accordion.id}`} className={`accordion-collapse collapse ${index === 0 ?'show':''}`} aria-labelledby={`heading${accordion.id}`} data-bs-parent="#accordionExample">
+                          <div className="accordion-body">
+                            { accordion.content }
+                          </div>
+                        </div>
+                      </div>
+                    ))
+                  }
+                </div>
+              </div>
+              <a href="https://chrome.google.com/webstore/category/extensions" rel="noreferrer" className="btn btn-img mt-40 rounded-pill" target="_blank">
+                <div className="icon img-contain">
+                  <img src="/assets/img/icons/chrome_icon.png" alt="" />
+                </div>
+                <div className="inf">
+                  <small>{ rtl ? 'متاح في' : 'Available in the' }</small>
+                  <h6>{ rtl ? 'متجر كروم الالكتروني' : 'Chrome Web Store' }</h6>
+                </div>
+              </a>
+            </div>
+          </div>
+          <div className="col-lg-6 order-0 order-lg-2">
+            <div className="img mb-30 mb-lg-0">
+              <img src="/assets/img/about/2mobiles.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/about/about_s4_bubble2.png" alt="" className="bubble2" />
+    </div>
+  )
+}
+
+export default SecondContent

src/components/App/About/ThirdContent.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const ThirdContent = ({ features, rtl }) => {
+  return (
+    <div className="content trd-content">
+      <div className="container">
+        <div className="row align-items-center justify-content-between">
+          <div className="col-lg-6">
+            <div className="img mb-30 mb-lg-0">
+              <img src="/assets/img/about/about_s4_img3.png" alt="" />
+            </div>
+          </div>
+          <div className="col-lg-5">
+            <div className="info">
+              <div className="section-head style-4">
+                <small className="title_small">{ rtl ? 'ثيمات جميلة' : 'Beautiful Themes' }</small>
+                <h2 className="mb-30">{ rtl ? 'ركز أكثر مع' : 'Focus More With' } <span>{ rtl ? 'المظهر الداكن' : 'Dark Theme' }</span> </h2>
+              </div>
+              <p className="text mb-40">
+                { rtl ? 'قم بتطبيق سمات نوتيرو الأنيقة حسب ذوقك. تعمل السمات المظلمة بشكل ممتاز لأولئك الذين يفضلون الوضع الخالي من الإلهاء.' : 'Apply Notero’s elegant themes to your taste. Dark themes work excellently for those who prefer distraction-free mode.' }
+              </p>
+              <ul>
+                {
+                  features.map((feature, index) => (
+                    <li className={`d-flex align-items-center ${feature.active ? '':'op-4'}`} key={index}>
+                      <i className="bi bi-dot fs-2 me-2 lh-1 color-blue4"></i>
+                      <h6 className="fw-bold">{ feature.title }</h6>
+                    </li>
+                  ))
+                }
+              </ul>
+              <Link to="/page-services-5" className="btn rounded-pill bg-blue4 fw-bold text-white mt-50">
+                <small>{ rtl ? 'اكتشف الآن' : 'Discovery Now' }</small>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/about/about_s4_bubble.png" alt="" className="bubble" />
+    </div>
+  )
+}
+
+export default ThirdContent

src/components/App/About/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import aboutData from 'data/App/about.json';
+import aboutDataRTL from 'data/App/about-rtl.json';
+import FirstContent from './FirstContent';
+import SecondContent from './SecondContent';
+import ThirdContent from './ThirdContent';
+import Integration from './Integration';
+
+const About = ({ noFirstContent, noIntegration, noWave, rtl }) => {
+  const data = rtl ? aboutDataRTL : aboutData;
+
+  return (
+    <section className={`about ${noWave ? '':'section-padding'} style-4`}>
+      {
+        !noFirstContent && (<FirstContent features={data.features} rtl={rtl} />)
+      }
+      <SecondContent accordions={data.accordions} rtl={rtl} />
+      <ThirdContent features={data.thirdFeatures} rtl={rtl} />
+      {
+        !noIntegration && (<Integration integrations={data.integrations} rtl={rtl} />)
+      }
+      {
+        !noWave && (
+          <>
+            <img src="/assets/img/about/about_s4_wave.png" alt="" className="top-wave" />
+            <img src="/assets/img/about/about_s4_wave.png" alt="" className="bottom-wave" />
+          </>
+        )
+      }
+    </section>
+  )
+}
+
+export default About

src/components/App/About2.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import aboutData from 'data/App/about.json';
+
+const About = () => {
+  return (
+    <section className="about section-padding style-4">
+      <div className="integration">
+        <div className="row justify-content-center">
+          <div className="col-lg-6">
+            <div className="section-head text-center style-4">
+              <small className="title_small">About Our Company</small>
+              <h2 className="mb-20">We are the perfect <br /> Integration and IT solutions <span> Agency of Popular Apps </span> </h2>
+              <p>Notero intergrate with popular apps. Help you easy to connect and collaboration</p>
+            </div>
+          </div>
+        </div>
+        <div className="container">
+          <div className="content mb-100 pb-100 border-1 border-bottom brd-gray">
+            {
+              aboutData.integrations.map((item, index) => (
+                <div className="img" key={index}>
+                  <img src={item} alt="" className="mt-30" />
+                </div>
+              ))
+            }
+          </div>
+        </div>
+        <img src="/assets/img/about/intg_back.png" alt="" className="intg-back" />
+      </div>
+      <div className="content frs-content">
+        <div className="container">
+          <div className="row align-items-center justify-content-between">
+            <div className="col-lg-6">
+              <div className="img mb-30 mb-lg-0">
+                <img src="/assets/img/about/ipad.png" alt="" />
+              </div>
+            </div>
+            <div className="col-lg-5">
+              <div className="info">
+                <div className="section-head style-4">
+                  <small className="title_small">Notero - Easy Notes App</small>
+                  <h2 className="mb-30">The Notero For <span>Creatives</span> </h2>
+                </div>
+                <p className="text mb-40">
+                  Stay focused and productive with a clean and clutter-free note <br /> 
+                  space. The flexible ways to organize your notes: hashtags, nested notebooks, pinning notes to the top of the note list, etc
+                </p>
+                <ul>
+                  {
+                    aboutData.features.map((feature, index) => (
+                      <li className={`d-flex align-items-center ${index !== aboutData.features.length - 1 ? 'mb-3':''}`} key={index}>
+                        <small className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-3">
+                          <i className={feature.icon}></i>
+                        </small>
+                        <h6 className="fw-bold">{ feature.title }</h6>
+                      </li>
+                    ))
+                  }
+                </ul>
+                <Link to="/page-contact-5" className="btn rounded-pill bg-blue4 fw-bold text-white mt-50">
+                  <small>Free Register</small>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </div>
+        <img src="/assets/img/about/about_s4_lines.png" alt="" className="lines" />
+        <img src="/assets/img/about/about_s4_bubble.png" alt="" className="bubble" />
+      </div>
+    </section>
+  )
+}
+
+export default About

src/components/App/Clients.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clients from 'data/App/clients.json';
+
+const Clients = ({ rtl }) => {
+  return (
+    <section className="clients style-4">
+      <div className="container">
+        <div className="text-center">
+          <h5 className="fw-bold mb-60"><span className="color-blue4">{ rtl ? '25K+ تحميل' : '25K+ Installation' }</span> { rtl ? 'واستخدام الخدمات' : 'and Featured on' }</h5>
+        </div>
+        <div className="client-logos pb-70">
+          <div className="row align-items-center">
+            {
+              clients.map((client, index) => (
+                <div className="col-6 col-lg-2" key={index}>
+                  <a href="#" className="img d-block">
+                    <img src={client} alt="" />
+                  </a>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Clients

src/components/App/Community.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import communityCards from 'data/App/community.json';
+import communityCardsrRTL from 'data/App/community-rtl.json';
+
+const Community = ({ rtl }) => {
+  const data = rtl ? communityCardsrRTL : communityCards;
+
+  return (
+    <section className="community section-padding pt-0 style-4">
+      <div className="container">
+        <div className="section-head text-center style-4">
+          <small className="title_small">{ rtl ? 'مجتمع نوتيرو' : 'Notero Community' }</small>
+          <h2 className="mb-30">{ rtl ? 'انضم إلى' : 'Join Into' } <span>{ rtl ? 'مركزنا' : 'Our Hub' }</span> </h2>
+        </div>
+        <div className="content">
+          {
+            data.map((item, index) => (
+              <a href="#" className="commun-card" key={index}>
+                <div className="icon">
+                  <i className={item.icon}></i>
+                </div>
+                <div className="inf">
+                  <h5>{ item.title }</h5>
+                  <p>{ item.description }</p>
+                </div>
+              </a>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Community

src/components/App/Culture.jsx

@@ -0,0 +1,97 @@
+import React, { useMemo } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Pagination, Autoplay } from 'swiper';
+import slides from 'data/App/culture.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/pagination';
+
+import LightGallery from 'lightgallery/react';
+
+// import styles
+import 'lightgallery/css/lightgallery.css';
+
+SwiperCore.use([Pagination, Autoplay]);
+
+const Culture = () => {
+  let lgGallery = useMemo(() => null, []);
+
+  const showFancybox = (e, index) => {
+    e.preventDefault();
+    lgGallery.instance.el.children[index].click()
+  }
+
+  return (
+    <section className="culture section-padding style-5">
+      <div className="section-head text-center style-4 mb-60">
+        <small className="title_small">Our Philosophy</small>
+        <h2 className="mb-20">Discover our <span>Culture</span> </h2>
+        <p>More 15,000 Companies & partners trusted & choice Iteck</p>
+      </div>
+      <div className="content">
+        <div className="culture-slider position-relative pb-80 style-5">
+          <Swiper
+            className="swiper-container"
+            slidesPerView={4}
+            spaceBetween={30}
+            centeredSlides={true}
+            speed={1000}
+            pagination={{
+              el: ".swiper-pagination",
+              clickable: "true"
+            }}
+            navigation={false}
+            mousewheel={false}
+            keyboard={true}
+            autoplay={{
+              delay: 4000
+            }}
+            loop={true}
+            breakpoints={{
+              0: {
+                slidesPerView: 1
+              },
+              480: {
+                slidesPerView: 1
+              },
+              787: {
+                slidesPerView: 2
+              },
+              991: {
+                slidesPerView: 3
+              },
+              1200: {
+                slidesPerView: 4
+              }
+            }}
+          >
+            {
+              slides.map((slide, index) => (
+                <SwiperSlide key={index}>
+                  <a href={slide} className="culture-card d-block" onClick={(e) => showFancybox(e, index)}>
+                    <img src={slide} alt="" />
+                    <span className="overlay"></span>
+                  </a>
+                </SwiperSlide>
+              ))
+            }
+          </Swiper>
+          <div className="swiper-pagination"></div>
+        </div>
+        <LightGallery speed={500} backdropDuration={500} onInit={(lg) => lgGallery = lg}>
+          {
+            slides.map((slide, index) => (
+              <a href={slide} className="culture-card d-block" onClick={(e) => e.preventDefault()} key={index}>
+                <img src={slide} alt="" />
+                <span className="overlay"></span>
+              </a>
+            ))
+          }
+        </LightGallery>
+      </div>
+    </section>
+  )
+}
+
+export default Culture

src/components/App/FAQ.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import faq from 'data/App/faq.json';
+import faqRTL from 'data/App/faq-rtl.json';
+
+const FAQ = ({ rtl }) => {
+  const data = rtl ? faqRTL : faq;
+
+  return (
+    <section className="faq section-padding style-4 pt-50" data-scroll-index="7">
+      <div className="container">
+        <div className="section-head text-center style-4">
+          <small className="title_small">{ rtl ? 'أسئلة شائعة' : 'Frequently Asked Question' }</small>
+          <h2 className="mb-30">{ rtl ? 'بحاجة إلى' : 'Need A' } <span>{ rtl ? 'دعم ؟' : 'Support?' }</span> </h2>
+        </div>
+        <div className="content">
+          <div className="faq style-3 style-4">
+            <div className="accordion" id="accordionSt4">
+              <div className="row gx-5">
+                <div className="col-lg-6">
+                  {
+                    data.map((item, index) => (
+                      index <= 3 && (
+                        <div className={`accordion-item ${index === 3 ? '':'border-bottom'} rounded-0`} key={index}>
+                          <h2 className="accordion-header" id={`heading${item.id + 10}`}>
+                            <button className="accordion-button collapsed rounded-0 py-4" type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${item.id + 10}`} aria-expanded="true" aria-controls={`collapse${item.id + 10}`}>
+                              { item.question }
+                            </button>
+                          </h2>
+                          <div id={`collapse${item.id + 10}`} className="accordion-collapse collapse rounded-0" aria-labelledby={`heading${item.id + 10}`} data-bs-parent="#accordionSt4">
+                            <div className="accordion-body">
+                              {
+                                rtl ? item.answer : <>{ item.answer.part1 } <br /> { item.answer.part2 }</>
+                              }
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    ))
+                  }
+                </div>
+                <div className="col-lg-6">
+                  {
+                    data.map((item, index) => (
+                      index > 3 && (
+                        <div className={`accordion-item ${index === faq.length - 1 ? '':'border-bottom'} rounded-0`} key={index}>
+                          <h2 className="accordion-header" id={`heading${item.id + 10}`}>
+                            <button className={`accordion-button ${index !== 4 ? 'collapsed':''} rounded-0 py-4`} type="button" data-bs-toggle="collapse" data-bs-target={`#collapse${item.id + 10}`} aria-expanded="true" aria-controls={`collapse${item.id + 10}`}>
+                              { item.question }
+                            </button>
+                          </h2>
+                          <div id={`collapse${item.id + 10}`} className={`accordion-collapse collapse rounded-0 ${index !== 4 ? '':'show'}`} aria-labelledby={`heading${item.id + 10}`} data-bs-parent="#accordionSt4">
+                            <div className="accordion-body">
+                              {
+                                rtl ? item.answer : <>{ item.answer.part1 } <br /> { item.answer.part2 }</>
+                              }
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    ))
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default FAQ

src/components/App/Features.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import features from 'data/App/features.json';
+import featuresRTL from 'data/App/features-rtl.json';
+
+const Features = ({ rtl }) => {
+  const featuresData = rtl ? featuresRTL : features;
+
+  return (
+    <section className="features pt-70 pb-70 style-4" data-scroll-index="1">
+      <div className="container">
+        <div className="section-head text-center style-4">
+          <small className="title_small bg-white">{ rtl ? 'نوتيرو - تطبيق مذكرة سهل الاستخدام' : 'Notero - Easy Notes App' }</small>
+          <h2 className="mb-70">{ rtl ? 'خدمات' : 'Awesome' } <span> { rtl ? 'رائعة' : 'Features' } </span> </h2>
+        </div>
+        <div className="content">
+          {
+            featuresData.map((feature, index) => (
+              <div className="features-card" key={index}>
+                <div className="icon img-contain">
+                  <img src={feature.image} alt="" />
+                  { feature.new && <span className="label icon-40 alert-success text-success rounded-circle small text-uppercase fw-bold">{ rtl ? 'جديد' : 'new' }</span> }
+                </div>
+                <h6>{ feature.title.text1 } <br /> { feature.title.text2 }</h6>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+      <img src="/assets/img/feat_circle.png" alt="" className="img-circle" />
+    </section>
+  )
+}
+
+export default Features

src/components/App/Footer.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const Footer = ({ noWave, rtl }) => {
+  const handleMouseMove = (event) => {
+    const dropDownToggler = event.target.classList.contains('dropdown-toggle') ? event.target : event.target.querySelector('.dropdown-toggle');
+    const dropDownMenu = dropDownToggler?.nextElementSibling;
+
+    dropDownToggler?.classList?.add('show');
+    dropDownMenu?.classList?.add('show');
+  }
+
+  const handleMouseLeave = (event) => {
+    const dropdown = event.target.classList.contains('dropdown') ? event.target : event.target.closest('.dropdown');
+    const dropDownToggler = dropdown.querySelector('.dropdown-toggle');
+    const dropDownMenu = dropdown.querySelector('.dropdown-menu');
+
+    dropDownToggler?.classList?.remove('show');
+    dropDownMenu?.classList?.remove('show');
+  }
+
+  return (
+    <footer className={`style-4 ${noWave ? 'mt-0 pt-100':''}`} data-scroll-index="8">
+      <div className="container">
+        <div className="section-head text-center style-4">
+          <h2 className="mb-10">{ rtl ? 'جاهز' : 'Ready To' } <span>{ rtl ? 'للتنزيل' : 'Download' }</span> </h2>
+          <p>{ rtl ? 'اكتشف مساحاتك المفضلة الجديدة ، من ساو باولو إلى سيول. قم بالتنزيل من App Store أو Google Play.' : 'Discover your new favorite spaces, from Sao Paulo to Seoul. Download from App Store or Google Play.' }</p>
+          <div className="d-flex align-items-center justify-content-center mt-50">
+            <a href="https://www.apple.com/app-store" rel="noreferrer" className="btn rounded-pill bg-blue4 fw-bold text-white me-4" target="_blank">
+              <small> <i className="fab fa-apple me-2 pe-2 border-end"></i> { rtl ? 'تنزيل من متجر التطبيقات' : 'Download On App Store' }</small>
+            </a>
+            <a href="https://play.google.com/store/apps" rel="noreferrer" className="btn rounded-pill hover-blue4 fw-bold border-blue4" target="_blank">
+              <small> <i className="fab fa-google-play me-2 pe-2 border-end"></i> { rtl ? 'تنزيل من متجر ابل' : 'Download On Google Play' }</small>
+            </a>
+          </div>
+        </div>
+        <div className="foot mt-80">
+          <div className="row align-items-center">
+            <div className="col-lg-2">
+              <div className="logo">
+                <img src="/assets/img/logo_lgr.png" alt="" />
+              </div>
+            </div>
+            <div className="col-lg-8">
+              <ul className="links">
+                <li>
+                  <Link to="/home-app-landing" className="active">{ rtl ? 'الرئيسية' : 'Home' }</Link>
+                </li>
+                <li>
+                  <Link to="/page-about-5">{ rtl ? 'من نحن' : 'about' }</Link>
+                </li>
+                <li>
+                  <Link to="/page-product-5">{ rtl ? 'المنتجات' : 'product' }</Link>
+                </li>
+                <li>
+                  <Link to="/page-portfolio-5">{ rtl ? 'المشاريع' : 'portfolio' }</Link>
+                </li>
+                <li>
+                  <Link to="/page-services-5">{ rtl ? 'الخدمات' : 'services' }</Link>
+                </li>
+                <li>
+                  <Link to="/page-shop-5">{ rtl ? 'المتجر' : 'shop' }</Link>
+                </li>
+                <li>
+                  <Link to="/page-blog-5">{ rtl ? 'الاخبار' : 'blog' }</Link>
+                </li>
+                <li>
+                  <Link to="/page-contact-5">{ rtl ? 'اتصل بنا' : 'contact' }</Link>
+                </li>
+              </ul>
+            </div>
+            <div className="col-lg-2">
+              {
+                rtl ?
+                (
+                  <div className="dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                    <button className="icon-25 dropdown-toggle p-0 border-0 bg-transparent rounded-circle img-cover" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+                      <img src="/assets/img/lang.png" alt="" className="me-2" />
+                        <small>العربية</small>
+                    </button>
+                    <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                      <li><a className="dropdown-item" href="#">English</a></li>
+                    </ul>
+                  </div>
+                )
+                :
+                (
+                  <div className="dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                    <button className="icon-25 dropdown-toggle p-0 border-0 bg-transparent rounded-circle img-cover" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+                      <img src="/assets/img/lang.png" alt="" className="me-2" />
+                        <small>English</small>
+                    </button>
+                    <ul className="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+                      <li><a className="dropdown-item" href="#">English</a></li>
+                      <li><a className="dropdown-item" href="#">Arabic</a></li>
+                    </ul>
+                  </div>
+                )
+              }
+            </div>
+          </div>
+        </div>
+        <div className="copywrite text-center">
+          <small className="small">
+            { rtl ? '© 2022 حقوق التأليف والنشر' : '© 2022 Copyrights by' } <a href="#" className="fw-bold text-decoration-underline">Iteck Co.</a> { rtl ? 'كل الحقوق محفوظة. صمم بواسطة' : 'All Rights Reserved. Designed by' } <a href="https://themeforest.net/user/themescamp" className="fw-bold text-decoration-underline">ThemesCamp</a>
+          </small>
+        </div>
+      </div>
+      { !noWave && <img src="/assets/img/footer/footer_4_wave.png" alt="" className="wave" /> }
+    </footer>
+  )
+}
+
+export default Footer

src/components/App/Header.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import ModalVideo from "react-modal-video";
+import "react-modal-video/css/modal-video.css";
+
+const Header = ({ rtl }) => {
+  const [isOpen, setOpen] = useState(false);
+
+  const openVideo = (e) => {
+    e.preventDefault();
+    setOpen(true);
+  }
+
+  return (
+    <header className="style-4" data-scroll-index="0">
+      <div className="content">
+        <div className="container">
+          <div className="row gx-0">
+            <div className="col-lg-6">
+              <div className="info">
+                <small className="mb-50 title_small">{ rtl ? 'نوتيرو - تطبيق مذكرة سهل الاستخدام' : 'Notero - Easy Notes App' }</small>
+                <h1 className="mb-30">{ rtl ? 'احفظ' : 'Note' } <span>{ rtl ? 'كل شئ' : 'Your Everything' }</span> { rtl ? 'على التطبيق' : 'In One App' }</h1>
+                <p className="text">{ rtl ? 'لا يلزم الترميز لإجراء التخصيصات. يحتوي المُخصص المباشر' : 'No coding required to make customizations. The live customizer' }<br />{ rtl ? 'على كل ما تحتاجه.' : 'has everything you need.' }</p>
+                <div className="d-flex align-items-center mt-50">
+                  <a href="https://www.apple.com/app-store" rel="noreferrer" className="btn rounded-pill bg-blue4 fw-bold text-white me-4" target="_blank">
+                    <small> <i className="fab fa-apple me-2 pe-2 border-end"></i>{ rtl ? 'تحميل التطبيق' : 'Download App' }</small>
+                  </a>
+                  <a href="https://youtu.be/pGbIOC83-So?t=21" data-lity className="play-btn" onClick={openVideo}>
+                    <span className="icon me-2">
+                      <i className="fas fa-play ms-1"></i>
+                    </span>
+                    <strong className="small">{ rtl ? 'مشاهدة' : 'View' } <br />{ rtl ? 'البرومو' : 'Promotion' }</strong>
+                  </a>
+                </div>
+                <span className="mt-100 me-5">
+                  <small
+                    className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-2">
+                    <i className="fas fa-sync"></i>
+                  </small>
+                  <small className="text-uppercase">{ rtl ? 'مجانى لمده 14 يوم' : 'Free 14 Days Trial' }</small>
+                </span>
+                <span className="mt-100">
+                  <small
+                    className="icon-30 bg-gray rounded-circle color-blue4 d-inline-flex align-items-center justify-content-center me-2">
+                    <i className="fas fa-credit-card"></i>
+                  </small>
+                  <small className="text-uppercase">{ rtl ? 'دفعة لمرة واحدة' : 'One time payment' }</small>
+                </span>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="img">
+                <img src="/assets/img/header/header_4.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <img src="/assets/img/header/header_4_bubble.png" alt="" className="bubble" />
+      </div>
+      <img src="/assets/img/header/header_4_wave.png" alt="" className="wave" />
+      {
+        typeof window !== "undefined" && 
+          (
+            <ModalVideo
+              channel="youtube"
+              autoplay
+              isOpen={isOpen}
+              videoId="pGbIOC83-So"
+              onClose={() => setOpen(false)}
+            />
+          )
+      }
+    </header>
+  )
+}
+
+export default Header

src/components/App/Pricing.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import plans from 'data/App/plans.json';
+import plansRTL from 'data/App/plans-rtl.json';
+
+const Pricing = ({ rtl }) => {
+  const data = rtl ? plansRTL : plans;
+
+  return (
+    <section className="pricing section-padding style-4 pb-50" data-scroll-index="6">
+      <div className="container">
+        <div className="section-head text-center style-4">
+          <small className="title_small">{ rtl ? 'خطة الاسعار' : 'Pricing Plan' }</small>
+          <h2 className="mb-30">{ rtl ? 'ابدأ بـ' : 'Start With' } <span> { rtl ? 'سعر مناسب' : 'Affordable Price' } </span> </h2>
+        </div>
+        <div className="content">
+          <div className="toggle_switch d-flex align-items-center justify-content-center mb-40">
+            <div className="form-check form-switch p-0">
+              <label className="form-check-label" htmlFor="flexSwitchCheckDefault"><small>{ rtl ? 'تدفع شهريا' : 'Billed monthly' }</small></label>
+              <input className="form-check-input float-none bg-blue4" type="checkbox" id="flexSwitchCheckDefault" defaultChecked />
+              <label className="form-check-label" htmlFor="flexSwitchCheckDefault"><small>{ rtl ? 'دفع سنوى' : 'Billed annually' }</small></label>
+            </div>
+          </div>
+          <div className="row gx-0">
+            {
+              data.map((plan, index) => (
+                <div className="col-lg-6" key={index}>
+                  <div className="price-card">
+                    <div className="price-header pb-4">
+                      <h6> <img src={plan.image} alt="" className="icon" /> { plan.title } </h6>
+                      <h2>{ plan.price } <small> / { rtl ? 'شهري' : 'month' }</small></h2>
+                      <p>{ plan.description }</p>
+                    </div>
+                    <div className="price-body py-4">
+                      <ul>
+                        {
+                          plan.features.map((feature, i) => (
+                            <li className={`d-flex align-items-center mb-3 ${feature.active ? '':' op-3'}`} key={i}>
+                              <small className="icon-30 bg-blue4 rounded-circle text-white d-inline-flex align-items-center justify-content-center me-3 flex-shrink-0">
+                                <i className={feature.icon}></i>
+                              </small>
+                              <p className="fw-bold">{ feature.title }</p>
+                            </li>
+                          ))
+                        }
+                      </ul>
+                      <Link to="/page-contact-5" className={`btn rounded-pill ${index === 0 ? 'border-blue4':'bg-blue4'} hover-blue4 fw-bold mt-50 px-5 ${index === 0 ? 'border-blue4':'text-white'}`}>
+                        <small>{ rtl ? 'سجل الان' : 'Register Now' }</small>
+                      </Link>
+                    </div>
+                    {
+                      plan.off &&
+                        <div className="off">
+                          <span>
+                            { plan.off } <br /> { rtl ? 'خصم' : 'off' }
+                          </span>
+                        </div>
+                    }
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Pricing

src/components/App/Screenshots.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import screenshots from 'data/App/screenshots.json';
+
+import "swiper/css";
+
+const Screenshots = ({ rtl }) => {
+  const [loadSwiper, setLoadSwiper] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoadSwiper(true);
+    }, 0);
+  }, []);
+
+  return (
+    <div className="screenshots style-4" data-scroll-index="4">
+      <div className="screenshots-slider style-4">
+        {
+          loadSwiper && (
+            <Swiper
+              dir={rtl ? 'rtl' : 'ltr'}
+              className="swiper-container"
+              spaceBetween={0}
+              slidesPerView={5}
+              pagination={false}
+              navigation={false}
+              mousewheel={false}
+              keyboard={true}
+              loop={true}
+              autoplay={{
+                delay: 4000
+              }}
+              speed={1000}
+              centeredSlides={true}
+              breakpoints={{
+                0: {
+                    slidesPerView: 2,
+                },
+                480: {
+                    slidesPerView: 2,
+                },
+                787: {
+                    slidesPerView: 3,
+                },
+                991: {
+                    slidesPerView: 3,
+                },
+                1200: {
+                    slidesPerView: 5,
+                }
+              }}
+            >
+              {
+                screenshots.map((screenshot, index) => (
+                  <SwiperSlide key={index}>
+                    <div className="img">
+                      <img src={screenshot} alt="" />
+                    </div>
+                  </SwiperSlide>
+                ))
+              }
+            </Swiper>
+          )
+        }
+      </div>
+      <img src="/assets/img/screenshots/hand.png" alt="" className="mob-hand" />
+    </div>
+  )
+}
+
+export default Screenshots

src/components/App/Services.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import services from 'data/App/services.json';
+
+import "swiper/css";
+
+const Services = () => {
+  return (
+    <section className="services section-padding bg-white pb-50 style-6">
+      <div className="container">
+        <div className="section-head text-center style-4 mb-60">
+          <small className="title_small"> Software Apps </small>
+          <h2 className="mb-20"> Our Top <span> Services </span> </h2>
+          <p> Notero intergrate with popular apps. Help you easy to connect and collaboration </p>
+        </div>
+      </div>
+      <div className="content">
+        <div className="services-slider position-relative style-6">
+          <Swiper
+            className="swiper-container"
+            slidesPerView={6}
+            centeredSlides={true}
+            spaceBetween={0}
+            speed={1000}
+            pagination={false}
+            navigation={false}
+            mousewheel={false}
+            keyboard={true}
+            autoplay={{
+              delay: 4000
+            }}
+            loop={true}
+            breakpoints={{
+              0: {
+                slidesPerView: 1
+              },
+              480: {
+                slidesPerView: 1
+              },
+              787: {
+                slidesPerView: 2
+              },
+              991: {
+                slidesPerView: 4
+              },
+              1200: {
+                slidesPerView: 6
+              }
+            }}
+          >
+            {
+              services.map((service, index) => (
+                <SwiperSlide key={index}>
+                  <Link to="/page-services-5" className="service-card style-6">
+                    <div className="icon">
+                      <img src={service.img} alt="" />
+                    </div>
+                    <div className="info">
+                      <h5>{ service.info }</h5>
+                      <div className="text">
+                        { service.text }
+                      </div>
+                    </div>
+                  </Link>
+                </SwiperSlide>
+              ))
+            }
+          </Swiper>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Services

src/components/App/Team.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import teamMembers from 'data/App/team.json'
+
+const Team = () => {
+  return (
+    <section className="team section-padding style-6">
+      <div className="content">
+        <div className="container">
+          <div className="section-head text-center style-4 mb-60">
+            <small className="title_small">The Team Work</small>
+            <h2 className="mb-20">Our <span>Leaders</span> </h2>
+            <p>The Professional Creative Team for Growth-up Works</p>
+          </div>
+          <div className="row">
+            {
+              teamMembers.map((member, index) => (
+                <div className="col-lg-3 col-sm-6" key={index}>
+                  <div className={`team-card ${index !== teamMembers.length - 1 ? 'mb-30 mb-lg-0':''} style-6`}>
+                    <div className="img img-cover">
+                      <img src={member.picture} alt="" />
+                      <div className="social-icons">
+                        <a href="#" className="me-1">
+                          <i className="fab fa-twitter"></i>
+                        </a>
+                        <a href="#" className="me-1">
+                          <i className="fab fa-facebook-f"></i>
+                        </a>
+                        <a href="#" className="me-1">
+                          <i className="fab fa-linkedin-in"></i>
+                        </a>
+                        <a href="#">
+                          <i className="fab fa-github"></i>
+                        </a>
+                      </div>
+                    </div>
+                    <div className="info">
+                      <a className="d-block" href="#"><h6>{ member.name }</h6></a>
+                      <small>{ member.position }</small>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Team

src/components/App/Testimonials.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import ModalVideo from "react-modal-video";
+import testimonialsData from 'data/App/testimonials.json';
+import testimonialsDataRTL from 'data/App/testimonials-rtl.json';
+import "react-modal-video/css/modal-video.css";
+
+const Testimonials = ({ rtl }) => {
+  const [isOpen, setOpen] = useState(false);
+  const data = rtl ? testimonialsDataRTL : testimonialsData;
+
+  const openVideo = (e) => {
+    e.preventDefault();
+    setOpen(true);
+  }
+
+  return (
+    <section className="testimonials style-4 pt-70" data-scroll-index="5">
+      <div className="container">
+        <div className="content">
+          <div className="row">
+            <div className="col-lg-5">
+              <div className="section-head style-4">
+                <small className="title_small">{ rtl ? 'اراء العملاء' : 'Testimonials' }</small>
+                <h2 className="mb-30">{ rtl ? 'محبوب من' : 'Loved From' } <span>{ rtl ? 'العملاء' : 'Customers' }</span></h2>
+              </div>
+              <p className="text mb-40">
+                { rtl ? 'أحب نوتيرو من آلاف العملاء في جميع أنحاء العالم وحصل على الثقة من الشركات الكبرى.' : 'Notero loved from thoudsands customer worldwide and get trusted from big companies.' }
+              </p>
+              <div className="numbs">
+                {
+                  data.numCards.map((card, index) => (
+                    <div className="num-card" key={index}>
+                      <div className="icon img-contain">
+                        <img src={card.image} alt="" />
+                      </div>
+                      <h2>{ card.value }</h2>
+                      {
+                        card.stars &&
+                        <div className="stars">
+                          { Array(card.stars).fill().map((_,i) => <i className="fas fa-star" key={i}></i>) }
+                        </div>
+                      }
+                      <p>{ typeof card.type === 'string' ? card.type : (<>{card.type.text1} <br /> {card.type.text2}</>) }</p>
+                    </div>
+                  ))
+                }
+              </div>
+              <div className="d-flex align-items-center mt-70">
+                <a href="https://www.apple.com/app-store" rel="noreferrer" className="btn rounded-pill bg-blue4 fw-bold text-white me-4" target="_blank">
+                  <small> { rtl ? 'انظر التعليقات على متجر التطبيقات' : 'See Reviews On App Store' }</small>
+                </a>
+                <a href="https://youtu.be/pGbIOC83-So?t=21" className="play-btn" onClick={openVideo}>
+                  <span className="icon me-2">
+                    <i className="fas fa-play ms-1"></i>
+                  </span>
+                  <strong className="small">{ rtl ? 'مشاهده' : 'View' } <br />{ rtl ? 'البرومو' : 'Promotion' }</strong>
+                </a>
+              </div>
+            </div>
+            <div className="col-lg-7">
+              <div className="testi-cards">
+                {
+                  data.testiCards.map((card, index) => (
+                    <div className="client_card" key={index}>
+                      <div className="user_img">
+                        <img src={card.userImg} alt="" />
+                      </div>
+                      <div className="inf_content">
+                        <div className="stars mb-2">
+                          { Array(card.stars).fill().map((_,i) => <i className="fas fa-star" key={i}></i>) }
+                        </div>
+                        <h6>
+                          { typeof card.title === 'string' ? card.title : (<>{card.title.text1} <br /> {card.title.text2}</>) }
+                        </h6>
+                        <p>{ card.author.name } <span className="text-muted"> /  { card.author.position } { rtl ? 'في' : 'at' } <span>{ card.author.company }</span> </span></p>
+                      </div>
+                    </div>
+                  ))
+                }
+                <img src="/assets/img/contact_globe.svg" alt="" className="testi-globe" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {
+        typeof window !== "undefined" && 
+          (
+            <ModalVideo
+              channel="youtube"
+              autoplay
+              isOpen={isOpen}
+              videoId="pGbIOC83-So"
+              onClose={() => setOpen(false)}
+            />
+          )
+      }
+    </section>
+  )
+}
+
+export default Testimonials

src/components/Blog/AllNews/Blogs.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const Blogs = ({ blogs, isWide, style, rtl }) => {
+  return (
+    <div className={isWide ? 'col-lg-10':'col-lg-8'}>
+      {
+        blogs.map((blog, index) => (
+          <div className={`card border-0 bg-transparent rounded-0 ${index !== blogs.length - 1 ? 'border-bottom brd-gray':'mb-lg-0 pb-lg-0'} pb-30 mb-30`} key={index}>
+            <div className="row">
+              <div className="col-lg-5">
+                <div className="img img-cover">
+                  <img src={blog.cover} className="radius-7" alt="..." />
+                </div>
+              </div>
+              <div className="col-lg-7">
+                <div className="card-body p-0">
+                  <small className="d-block date text">
+                    <a href="#" className={`text-uppercase border-end brd-gray pe-3 me-3 color-blue${style} fw-bold`}>{ blog.type }</a>
+                    <i className="bi bi-clock me-1"></i>
+                    <a href="#" className="op-8">{ blog.time }</a>
+                  </small>
+                  <Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5" } className="card-title mb-10">
+                    { blog.title }
+                  </Link>
+                  <p className="fs-13px color-666">{ blog.desc } [...]</p>
+                  <div className="auther-comments d-flex small align-items-center justify-content-between op-9">
+                    <div className="l_side d-flex align-items-center">
+                      <span className={`icon-10 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-blue${style} p-2 me-2 text-white`}>
+                        { blog.userImgLetter }
+                      </span>
+                      <a href="#">
+                        <small className="text-muted">{ rtl ? 'بواسطة' : 'By' }</small> { blog.username }
+                      </a>
+                    </div>
+                    <div className="r-side mt-1">
+                      <i className="bi bi-chat-left-text me-1"></i>
+                      <a href="#">{ blog.comments }</a>
+                      <i className="bi bi-eye ms-4 me-1"></i>
+                      <a href="#">{ blog.views }</a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        ))
+      }
+
+      <div className={`pagination style-5 color-${style} justify-content-center mt-60`}>
+        <a href="#" className="active">
+          <span>1</span>
+        </a>
+        <a href="#">
+          <span>2</span>
+        </a>
+        <a href="#">
+          <span>3</span>
+        </a>
+        <a href="#">
+          <span>4</span>
+        </a>
+        <a href="#">
+          <span>...</span>
+        </a>
+        <a href="#">
+          <span>20</span>
+        </a>
+        <a href="#">
+          <span className="text">{ rtl ? "التالي" : "next" } <i className="fas fa-chevron-right"></i> </span>
+        </a>
+      </div>
+    </div>
+  )
+}
+
+export default Blogs

src/components/Blog/AllNews/Sidebar.jsx

@@ -0,0 +1,130 @@
+import React, { useEffect } from 'react';
+import { Link } from 'gatsby';
+import LightGallery from 'lightgallery/react';
+import 'lightgallery/css/lightgallery.css';
+
+const Sidebar = ({ data, style, rtl }) => {
+  useEffect(() => {
+    const lg = document.querySelector('.lg-react-element');
+    if (lg) lg.className = 'd-flex justify-content-between flex-wrap';
+  }, []);
+
+  return (
+    <div className="col-lg-4">
+      <div className="side-blog style-5 ps-lg-5 mt-5 mt-lg-0">
+        <form action="contact.php" className="search-form mb-50" method="post">
+          <h6 className="title mb-20 text-uppercase fw-normal">
+            { rtl ? 'بحث' : 'search' }
+          </h6>
+          <div className="form-group position-relative">
+            <input type="text" className="form-control rounded-pill" placeholder={ rtl ? "اكتب وارسل" : "Type and hit enter" } />
+            <button className="search-btn border-0 bg-transparent"> <i className="fas fa-search"></i> </button>
+          </div>
+        </form>
+
+        <div className="side-recent-post mb-50">
+          <h6 className="title mb-20 text-uppercase fw-normal">
+            { rtl ? 'المنشورات الاخيرة' : 'recent post' }
+          </h6>
+          {
+            data.recentPosts.map((post, index) => (
+              <Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5" } key={index} className={`post-card ${index !== data.recentPosts.length - 1 ? 'pb-3 mb-3 border-bottom brd-gray':''}`}>
+                <div className="img me-3">
+                  <img src={post.image} alt="" />
+                </div>
+                <div className="inf">
+                  <h6>{ post.title }</h6>
+                  <p>{ rtl ? 'إذا كانت هناك طريقة واحدة تعمل بها التكنولوجيا اللاسلكية' : 'If there’s one way that wireless technology has' } [...]</p>
+                </div>
+              </Link>
+            ))
+          }
+        </div>
+
+        <div className="side-categories mb-50">
+          <h6 className="title mb-20 text-uppercase fw-normal">
+            { rtl ? 'التصنيفات' : 'categories' }
+          </h6>
+          {
+            data.categories.map((category, index) => (
+              <a href="#" className="cat-item" key={index}>
+                <span>{ category.title }</span>
+                <span>{ category.count }</span>
+              </a>
+            ))
+          }
+        </div>
+
+        <div className="side-newsletter mb-50">
+          <h6 className="title mb-10 text-uppercase fw-normal">
+            { rtl ? 'نشرة الاخبار' : 'newsletter' }
+          </h6>
+          <div className="text">
+            { rtl ? 'سجل الآن للحصول على آخر التحديثات الخاصة بالعروض الترويجية والقسائم.' : 'Register now to get latest updates on promotions & coupons.' }
+          </div>
+          <form action="contact.php" className="form-subscribe" method="post">
+            <div className="email-input d-flex align-items-center py-3 px-3 bg-white mt-3 radius-5">
+              <span className="icon me-2 flex-shrink-0">
+                <i className="far fa-envelope"></i>
+              </span>
+              <input type="text" placeholder="Email Address" className="border-0 bg-transparent fs-12px" />
+            </div>
+            <button className={`btn bg-blue${style} sm-butn text-white hover-darkBlue w-100 mt-3 radius-5 py-3`}>
+              <span>{ rtl ? 'أشترك' : 'Subscribe' }</span>
+            </button>
+          </form>
+        </div>
+
+        <div className="side-share mb-50">
+          <h6 className="title mb-20 text-uppercase fw-normal">
+            { rtl ? 'اجتماعي' : 'social' }
+          </h6>
+          <a href="#" className="social-icon">
+            <i className="fab fa-twitter"></i>
+          </a>
+          <a href="#" className="social-icon">
+            <i className="fab fa-facebook-f"></i>
+          </a>
+          <a href="#" className="social-icon">
+            <i className="fab fa-pinterest"></i>
+          </a>
+          <a href="#" className="social-icon">
+            <i className="fab fa-goodreads-g"></i>
+          </a>
+          <a href="#" className="social-icon">
+            <i className="fab fa-linkedin-in"></i>
+          </a>
+        </div>
+
+        <div className="side-insta mb-50">
+          <h6 className="title mb-20 text-uppercase fw-normal">
+            { rtl ? 'انستجرام' : 'our instagram' }
+          </h6>
+          <LightGallery speed={500} backdropDuration={500}>
+            {
+              data.instagram.map((image, index) => (
+                <a href={image} className="insta-img img-cover" data-fancybox="gallery" key={index}>
+                  <img src={image} alt="" />
+                  <i className="fab fa-instagram icon"></i>
+                </a>
+              ))
+            }
+          </LightGallery>
+        </div>
+
+        <div className="side-tags">
+          <h6 className="title mb-20 text-uppercase fw-normal">
+            { rtl ? 'الكلمات الاكثر بحثا' : 'popular tags' }
+          </h6>
+          <div className="content">
+            {
+              data.tags.map((tag, index) => (<a href="#" key={index} className="me-1">{ tag }</a>))
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sidebar

src/components/Blog/AllNews/index.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Blogs from './Blogs';
+import Sidebar from './Sidebar';
+
+import allNewsData from 'data/Blog/all-news.json';
+import allNewsDataRTL from 'data/Blog/all-news-rtl.json';
+
+const AllNews = ({ isWide, leftSidebar, style = "4", rtl }) => {
+  const data = rtl ? allNewsDataRTL : allNewsData;
+
+  return (
+    <section className="all-news section-padding blog bg-transparent style-3">
+      <div className="container">
+        <div className={`row ${isWide ? 'justify-content-center': leftSidebar ? 'gx-5':'gx-4 gx-lg-5'}`}>
+          { !isWide && leftSidebar && <Sidebar data={data.sidebar} style={style} rtl={rtl} /> }
+          <Blogs blogs={data.blogs} isWide={isWide} style={style} rtl={rtl} />
+          { !isWide && !leftSidebar && <Sidebar data={data.sidebar} style={style} rtl={rtl} /> }
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default AllNews

src/components/Blog/BlogSlider.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Navigation, Pagination, Autoplay, EffectFade } from 'swiper';
+import slides from 'data/Blog/slides.json';
+import slidesRTL from 'data/Blog/slides-rtl.json';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/effect-fade';
+
+SwiperCore.use([Navigation, Pagination, Autoplay, EffectFade]);
+
+const BlogSlider = ({ style = "4", rtl }) => {
+  const data = rtl ? slidesRTL : slides;
+
+  return (
+    <section className="blog-slider pt-50 pb-50 style-1">
+      <div className="container">
+        <div className={`section-head text-center mb-60 style-${style}`}>
+          <h2 className="mb-20">{ rtl ? 'أخر' : 'Our' } <span>{ rtl ? 'الأخبار' : 'Journal' }</span></h2>
+          <div className="text color-666">{ rtl ? 'احصل على اخر الاخبار من خلال المدونه ناقش وشارك الخبر مع الاصدقاء' : 'Get the latest articles from our journal, writing, discuss and share' }</div>
+        </div>
+        <div className="blog-details-slider">
+          <Swiper
+            className="swiper-container"
+            slidesPerView={1}
+            spaceBetween={0}
+            effect="fade"
+            speed={1000}
+            pagination={{
+              el: ".blog-details-slider .swiper-pagination",
+              clickable: "true"
+            }}
+            navigation={{
+              nextEl: '.blog-details-slider .swiper-button-next',
+              prevEl: '.blog-details-slider .swiper-button-prev'
+            }}
+            mousewheel={false}
+            keyboard={true}
+            autoplay={{
+              delay: 4000
+            }}
+            loop={true}
+          >
+            {
+              data.map((slide, index) => (
+                <SwiperSlide key={index}>
+                  <div className="content-card">
+                    <div className="img overlay">
+                      <img src={slide.image} alt="" />
+                    </div>
+                    <div className="info">
+                      <div className="row">
+                        <div className="col-lg-6">
+                          <div className="cont">
+                            <small className="date small mb-20"> 
+                              <a href="#" className="text-uppercase border-end brd-gray pe-3 me-3">{ slide.type }</a>
+                              <i className="far fa-clock me-2"></i>{ rtl ? 'موعد النشر' : 'Posted on' } <a href="#">{ slide.time }</a> 
+                            </small>
+                            <h2 className="title">
+                              <Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5"}>
+                                { slide.title }
+                              </Link>
+                            </h2>
+                            <p className="fs-13px mt-10 text-light text-info">
+                              { slide.desc } [...]
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+              ))
+            }
+          </Swiper>
+
+          <div className="swiper-pagination"></div>
+
+          <div className="swiper-button-next"></div>
+          <div className="swiper-button-prev"></div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default BlogSlider

src/components/Blog/PopularPosts.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import posts from 'data/Blog/popular-posts.json';
+import postsRTL from 'data/Blog/popular-posts-rtl.json';
+
+const PopularPosts = ({ style = "4", rtl }) => {
+  const postsData = rtl ? postsRTL : posts;
+
+  return (
+    <section className="popular-posts pt-50 pb-100 border-bottom brd-gray">
+      <div className="container">
+        <h5 className="post-sc-title text-center text-uppercase mb-70">{ rtl ? 'أخبار شائعة' : 'Popular Posts' }</h5>
+        <div className="row gx-5">
+          {
+            postsData.map((post, index) => (
+              <div className={`col-lg-4 ${index !== posts.length - 1 ? 'border-end brd-gray':''}`} key={index}>
+                <div className="card border-0 bg-transparent rounded-0 mb-30 mb-lg-0 d-block">
+                  <div className="img radius-7 overflow-hidden img-cover">
+                    <img src={post.cover} className="card-img-top" alt="..." />
+                  </div>
+                  <div className="card-body px-0">
+                    <small className="d-block date mt-10 fs-10px fw-bold">
+                      <a href="#" className={`text-uppercase border-end brd-gray pe-3 me-3 color-blue${style}`}>{ rtl ? 'أخبار' : 'News' }</a>
+                      <i className="bi bi-clock me-1"></i>
+                      <a href="#" className="op-8">{ rtl ? 'موعد النشر' : 'Posted on' } { post.time }</a>
+                    </small>
+                    <h5 className="fw-bold mt-10 title">
+                      <Link to={ rtl ? "/rtl-page-single-post" : "/page-single-post-5" }> 
+                        { post.title }
+                      </Link>
+                    </h5>
+                    <p className="small mt-2 op-8 fs-10px">{ post.desc } [...]
+                    </p>
+                    <div className="d-flex small mt-20 align-items-center justify-content-between op-9">
+                      <div className="l_side d-flex align-items-center">
+                        <span className="icon-20 rounded-circle d-inline-flex justify-content-center align-items-center text-uppercase bg-main p-1 me-2 text-white">
+                          { post.userImgLetter }
+                        </span>
+                        <a href="#" className="mt-1">
+                          { rtl ? 'بواسطة' : 'By' } { post.username }
+                        </a>
+                      </div>
+                      <div className="r-side mt-1">
+                        <i className="bi bi-chat-left-text me-1"></i>
+                        <a href="#">{ post.comments }</a>
+                        <i className="bi bi-eye ms-4 me-1"></i>
+                        <a href="#">{ post.views }</a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default PopularPosts

src/components/CloudHosting/About.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+const About = () => {
+  return (
+    <section className="about style-9 section-padding">
+      <div className="container">
+        <div className="row align-items-center">
+          <div className="col-lg-6">
+            <div className="img wow fadeIn">
+              <img src="/assets/img/about/about9.svg" alt="" />
+            </div>
+          </div>
+          <div className="col-lg-6">
+            <div className="info">
+              <div className="section-head style-9 mb-40">
+                <h6 className=" wow fadeInUp"> about company </h6>
+                <h2 className=" wow fadeInUp"> Safeguard Sites With Staging & Backups </h2>
+              </div>
+              <ul>
+                <li className=" wow fadeInUp">
+                  <span className="icon">
+                    <img src="/assets/img/icons/ab9_1.png" alt="" />
+                  </span>
+                  <p> <strong className="color-darkBlue2"> Safely test changes: </strong> Test site updates, code modifications & content change. </p>
+                </li>
+                <li className=" wow fadeInUp">
+                  <span className="icon">
+                    <img src="/assets/img/icons/ab9_2.png" alt="" />
+                  </span>
+                  <p> <strong className="color-darkBlue2"> Easy development: </strong> Deploy files and database changes from your site. </p>
+                </li>
+              </ul>
+              <div className="call-info pt-40 mt-40 wow fadeInUp">
+                <h5> Call 000-111-2220 or Chat Now </h5>
+                <p> International calling fees may apply </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default About

src/components/CloudHosting/ChatBanner.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const ChatBanner = () => {
+  return (
+    <section className="chat-banner style-9">
+      <div className="container">
+        <div className="content text-center wow zoomIn">
+          <div className="section-head text-center style-9">
+            <h6 className="text-white"> sync by app </h6>
+            <h2 className="text-white"> Your Favorite Hosting App Is <br /> One Click Away </h2>
+            <div className="btns mt-40">
+              <a href="#" className="butn bg-darkBlue2 border-darkBlue2 border-2 border  text-white rounded-3">
+                <span> Get In Touch </span>
+              </a>
+              <a href="#" className="butn text-white border-2 border-white border rounded-3 ms-3">
+                <span> Learn More </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/chat_back9_icons.png" alt="" className="img_back slide_up_down" />
+    </section>
+  )
+}
+
+export default ChatBanner

src/components/CloudHosting/ChooseUs.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+const ChooseUs = () => {
+  return (
+    <section className="choose-us style-9 section-padding bg-gray2">
+      <div className="container">
+        <div className="section-head text-center style-9 mb-80 wow fadeInUp">
+          <h6> why choose us </h6>
+          <h2> This Website Needs from <br /> Startup to Success </h2>
+        </div>
+        <div className="content">
+          <ul className="nav nav-pills mb-3 wow fadeInUp" id="pills-tab" role="tablist">
+            <li className="nav-item" role="presentation">
+              <button className="nav-link active" id="choose1-tab" data-bs-toggle="pill" data-bs-target="#choose1" type="button" role="tab" aria-controls="pills-home" aria-selected="true">
+                <img src="/assets/img/icons/features/9.svg" alt="" /> 1 Click Acesss
+              </button>
+            </li>
+            <li className="nav-item" role="presentation">
+              <button className="nav-link" id="choose2-tab" data-bs-toggle="pill" data-bs-target="#choose2" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
+                <img src="/assets/img/icons/features/10.svg" alt="" /> Update Management
+              </button>
+            </li>
+            <li className="nav-item" role="presentation">
+              <button className="nav-link" id="choose3-tab" data-bs-toggle="pill" data-bs-target="#choose1" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
+                <img src="/assets/img/icons/features/11.svg" alt="" /> Site Monitoring
+              </button>
+            </li>
+            <li className="nav-item" role="presentation">
+              <button className="nav-link" id="choose4-tab" data-bs-toggle="pill" data-bs-target="#choose2" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
+                <img src="/assets/img/icons/features/12.svg" alt="" /> Staging Site
+              </button>
+            </li>
+            <li className="nav-item" role="presentation">
+              <button className="nav-link" id="choose5-tab" data-bs-toggle="pill" data-bs-target="#choose1" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
+                <img src="/assets/img/icons/features/13.svg" alt="" /> Backup & Restore
+              </button>
+            </li>
+          </ul>
+          <div className="tab-content pt-2 wow fadeInUp" id="pills-tabContent">
+            <div className="tab-pane fade show active" id="choose1" role="tabpanel">
+              <p className="text-center fs-6 color-darkBlue2"> Cost-effective hosting that delivers secure, reliable performance. </p>
+              <div className="feat-content">
+                <div className="row align-items-center gx-0">
+                  <div className="col-lg-6">
+                    <div className="img img-cover">
+                      <img src="/assets/img/choose_us/choose9.png" alt="" />
+                    </div>
+                  </div>
+                  <div className="col-lg-5 offset-lg-1">
+                    <div className="info mt-4 mt-lg-0">
+                      <div className="icon">
+                        <img src="/assets/img/choose_us/icon3.png" alt="" />
+                      </div>
+                      <h2> This Website Needs from <br /> Startup to Success. </h2>
+                      <p> Websites are stored or “hosted” on a publicly accessible computer (a server). Some websites require an entire server to themselves. </p>
+                    </div>
+                  </div>
+                </div>
+                <a href="https://www.youtube.com/watch?v=pGbIOC83-So&t=21s" className="play_icon" data-lity>
+                  <i className="fas fa-play"></i>
+                </a>
+              </div>
+            </div>
+            <div className="tab-pane fade" id="choose2" role="tabpanel">
+              <p className="text-center fs-6 color-darkBlue2"> Cost-effective hosting that delivers secure, reliable performance. </p>
+              <div className="feat-content">
+                <div className="row align-items-center gx-0">
+                  <div className="col-lg-6">
+                    <div className="img img-cover">
+                      <img src="/assets/img/choose_us/choose9.png" alt="" />
+                    </div>
+                  </div>
+                  <div className="col-lg-5 offset-lg-1">
+                    <div className="info mt-4 mt-lg-0">
+                      <div className="icon">
+                        <img src="/assets/img/icons/ab9_2.png" alt="" />
+                      </div>
+                      <h2> This Website Needs from <br /> Startup to Success. </h2>
+                      <p> Websites are stored or “hosted” on a publicly accessible computer (a server). Some websites require an entire server to themselves. </p>
+                    </div>
+                  </div>
+                </div>
+                <a href="https://www.youtube.com/watch?v=pGbIOC83-So&t=21s" className="play_icon" data-lity>
+                  <i className="fas fa-play"></i>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ChooseUs

src/components/CloudHosting/Domain.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+
+const Domain = () => {
+  return (
+    <section className="domain-search style-9 section-padding bg-gray2">
+      <div className="container">
+        <div className="section-head text-center style-9 mb-80 wow fadeInUp">
+          <h6> domain search </h6>
+          <h2> It’s All Starts With A Good Domain </h2>
+          <p> Free to focus on growing your business, let us handle your site </p>
+        </div>
+        <div className="content">
+          <div className="row justify-content-center">
+            <div className="col-lg-7">
+              <div className="domain-choose wow fadeInUp">
+                <div className="form-group">
+                  <span className="icon"> <i className="far fa-search"></i> </span>
+                  <input type="text" placeholder="Search with any name" />
+                  <select name="" id="" className="form-select">
+                    <option value="">.com</option>
+                    <option value="">.tech</option>
+                    <option value="">.net</option>
+                    <option value="">.co</option>
+                    <option value="">.info</option>
+                    <option value="">.org</option>
+                  </select>
+                </div>
+                <button className="butn bg-darkBlue2 border-0 rounded-3 text-white">
+                  <span> Search Now </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div className="domain-names">
+            <div className="row justify-content-center wow fadeInUp">
+              <div className="col-lg-10">
+                <div className="row">
+                  <div className="col-lg-2 col-6">
+                    <div className="item dom-tech">
+                      <p> <i className="far fa-square-full"></i> .tech<span>/$8.00</span> </p>
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-6">
+                    <div className="item dom-net">
+                      <p> <i className="far fa-square-full"></i> .net<span>/$8.00</span> </p>
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-6">
+                    <div className="item dom-co">
+                      <p> <i className="far fa-square-full"></i> .co/<span>$5.00</span> </p>
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-6">
+                    <div className="item dom-com">
+                      <p> <i className="far fa-square-full"></i> .com<span>/$10.00</span> </p>
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-6">
+                    <div className="item dom-info">
+                      <p> <i className="far fa-square-full"></i> .info<span>/$10.00</span> </p>
+                    </div>
+                  </div>
+                  <div className="col-lg-2 col-6">
+                    <div className="item dom-org">
+                      <p> <i className="far fa-square-full"></i> .org<span>/$3.00</span> </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <h5 className=" wow fadeInUp"> Which domain is right for you? </h5>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Domain

src/components/CloudHosting/Footer.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import footerLinks from 'data/CloudHosting/footerLinks.json';
+
+const Footer = () => {
+  return (
+    <footer className="style-9">
+      <div className="container">
+        <div className="content">
+          <div className="row gx-0 justify-content-between">
+            <div className="col-lg-3 col-sm-6">
+              <h5 className="foot-title"> About Iteck </h5>
+              <div className="links">
+                <ul className="d-flex flex-wrap">
+                  {
+                    footerLinks.links.map((link, index) => (
+                      <li className="w-50" key={index}>
+                        <a href={link.href}> { link.text } {link.badge && <small className="text-uppercase bg-blue7 text-white py-1 px-3 rounded-pill ms-1 lh-1"> { link.badge } </small>} </a>
+                      </li>
+                    ))
+                  }
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-2">
+              <h5 className="foot-title"> Resources </h5>
+              <div className="links">
+                <ul className="">
+                  {
+                    footerLinks.resources.map((link, index) => (
+                      <li key={index}>
+                        <a href={link.href}> { link.text } </a>
+                      </li>
+                    ))
+                  }
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-2">
+              <h5 className="foot-title"> Shopping </h5>
+              <div className="links">
+                <ul>
+                  {
+                    footerLinks.shopping.map((link, index) => (
+                      <li key={index}>
+                        <a href={link.href}> { link.text } </a>
+                      </li>
+                    ))
+                  }
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-3 col-sm-6">
+              <h5 className="foot-title"> Partner Programs </h5>
+              <div className="links">
+                <ul>
+                  {
+                    footerLinks.programs.map((link, index) => (
+                      <li key={index}>
+                        <a href={link.href}> { link.text } </a>
+                      </li>
+                    ))
+                  }
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="foot">
+          <div className="row align-items-center">
+            <div className="col-lg-2 border-1 border-end brd-light">
+              <a className="navbar-brand pe-4" href="#">
+                <img src="/assets/img/logo_9.png" alt="" />
+              </a>
+            </div>
+            <div className="col-lg-7">
+              <div className="info ps-4">
+                <p className="mb-1"> Copyright © 1999 - 2022 <a href="#" className="fw-bold text-white"> ThemesCamp </a>, LLC. All Rights Reserved. </p>
+                <p> The ThemeCamp word mark is a registered trademark of ThemeForest Operating Company. </p>
+              </div>
+            </div>
+            <div className="col-lg-3 text-lg-end">
+              <div className="social-icons">
+                <a href="#" className="me-1"> <i className="fab fa-facebook-f"></i> </a>
+                <a href="#" className="me-1"> <i className="fab fa-twitter"></i> </a>
+                <a href="#" className="me-1"> <i className="fab fa-behance"></i> </a>
+                <a href="#"> <i className="fab fa-youtube"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/CloudHosting/Header.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Navbar from 'components/Navbars/CloudNav';
+import TopNav from 'components/Navbars/CloudNav/TopNav';
+
+const Header = () => {
+  return (
+    <header className="style-9">
+      <TopNav />
+      <Navbar />
+      <div className="navs-container">
+        <div className="hosting-links py-4 text-white text-center">
+          <div className="container">
+            <div className="links">
+              <a href="#" className="fw-bold pe-3 me-3 border-end border-1 brd-light hover-darkBlue"> Cloud Hosting </a>
+              <a href="#" className="me-4 hover-darkBlue"> Web Hosting </a>
+              <a href="#" className="me-4 hover-darkBlue"> Windows Hosting </a>
+              <a href="#" className="me-4 hover-darkBlue"> Dedicated Server </a>
+              <a href="#" className="me-4 hover-darkBlue"> VPS Hosting </a>
+              <a href="#" className="hover-darkBlue"> Reseller Hosting </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container">
+        <div className="content section-padding">
+          <div className="row align-items-center">
+            <div className="col-lg-5">
+              <div className="info">
+                <h6> cloud hosting </h6>
+                <h1> High Performance Secured <span> Hosting </span> </h1>
+                <ul>
+                  <li> Improved page loads and SEO </li>
+                  <li> Fee domain, email & support included </li>
+                  <li> 30-day money back guarantee </li>
+                </ul>
+                <a href="#" className="butn border-2 border-white border rounded-3 text-white mt-40">
+                  <span> Get Started Now </span>
+                </a>
+              </div>
+            </div>
+            <div className="col-lg-7">
+              <div className="img">
+                <img src="/assets/img/header/header9.svg" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/CloudHosting/Partners.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+const Partners = () => {
+  return (
+    <section className="clients style-9 section-padding bg-gray2">
+      <div className="container">
+        <div className="section-head text-center style-9 mb-80 wow fadeInUp">
+          <h6> All in one place </h6>
+          <h2> Partner Programs </h2>
+        </div>
+        <div className="content">
+          <div className="row">
+            <div className="col-lg-6">
+              <div className="client-card wow fadeInUp">
+                <div className="row">
+                  <div className="col-md-3">
+                    <div className="img">
+                      <img src="/assets/img/icons/prt1.png" alt="" />
+                    </div>
+                  </div>
+                  <div className="col-md-9">
+                    <div className="info">
+                      <h5> Reseller Hosting </h5>
+                      <p> Get everything you need to start and run your web hosting and domain business.  </p>
+                      <a href="#" className="mt-30"> <i className="far fa-long-arrow-right l-arrow me-2"></i> Read More <i className="far fa-long-arrow-right r-arrow ms-2"></i> </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="client-card mt-4 mt-md-0 wow fadeInUp" data-wow-delay="0.2s">
+                <div className="row">
+                  <div className="col-md-3">
+                    <div className="img">
+                      <img src="/assets/img/icons/prt2.png" alt="" />
+                    </div>
+                  </div>
+                  <div className="col-md-9">
+                    <div className="info">
+                      <h5> Iteck <span> Pro </span> Version </h5>
+                      <p> Spend less time managing client sites, and free up your day to create more and manage less. </p>
+                      <a href="#" className="mt-30"> <i className="far fa-long-arrow-right l-arrow me-2"></i> Read More <i className="far fa-long-arrow-right r-arrow ms-2"></i> </a>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="logos-content">
+            <h4 className=" wow fadeInUp"> <span> 25K+ </span> Installation & Featured On </h4>
+            <div className="logos">
+              <a href="#" className=" wow fadeInUp"> <img src="/assets/img/logos/23.png" alt="" /> </a>
+              <a href="#" className=" wow fadeInUp" data-wow-delay="0.2s"> <img src="/assets/img/logos/24.png" alt="" /> </a>
+              <a href="#" className=" wow fadeInUp" data-wow-delay="0.4s"> <img src="/assets/img/logos/25.png" alt="" /> </a>
+              <a href="#" className=" wow fadeInUp" data-wow-delay="0.6s"> <img src="/assets/img/logos/26.png" alt="" /> </a>
+              <a href="#" className=" wow fadeInUp" data-wow-delay="0.8s"> <img src="/assets/img/logos/27.png" alt="" /> </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Partners

src/components/CloudHosting/Pricing.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import plans from 'data/CloudHosting/plans.json';
+
+const Pricing = () => {
+  return (
+    <section className="pricing style-9 section-padding bg-gray2">
+      <div className="container">
+        <div className="section-head text-center style-9 mb-80 wow fadeInUp">
+          <h6> best plans </h6>
+          <h2> Hosting Plans Include </h2>
+          <p> Free to focus on growing your business, let us handle your site </p>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              plans.map((plan, index) => (
+                <div className="col-lg-4" key={index}>
+                  <div className="pricing-card wow fadeInUp">
+                    <div className="card-head">
+                      <h5> { plan.title } </h5>
+                      <p> { plan.description } </p>
+                    </div>
+                    <div className="pricing-cont">
+                      <h2 className="price"> ${plan.price} <small> /mo </small> </h2>
+                      <p className="hightLight"> { plan.highlight } </p>
+                      <p className="color-999"> { plan.text } </p>
+                      <a href="#" className="butn border-2 border-darkBlue2 border rounded-3 color-darkBlue2 fw-bold mt-30 w-100 mb-20">
+                        <span> Purchase Plan </span>
+                      </a>
+                      <ul>
+                        {
+                          plan.features.map((feature, i) => (
+                            <li key={i}> 
+                              <p><strong className="color-darkBlue2"> { feature.value } </strong> { feature.title } </p> 
+                              <span className="icon"> <i className="fal fa-check"></i> </span> 
+                            </li>
+                          ))
+                        }
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+          <h5 className="offer-text wow fadeInDown"> In addition to Windows Web Hosting plans, we offer <a href="#"> Linux Plans </a> </h5>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Pricing

src/components/CloudHosting/Services.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import services from 'data/CloudHosting/services.json';
+
+const Services = () => {
+  return (
+    <section className="services style-9 bg-gray2">
+      <div className="services-content">
+        <div className="container">
+          <div className="row">
+            {
+              services.map((service, index) => (
+                <div className="col-lg-3 col-sm-6" key={index}>
+                  <div className="service-card wow fadeInUp" data-wow-delay={`${index * 0.2}s`}>
+                    <div className="img-icon">
+                      <img src={service.icon} alt="" />
+                    </div>
+                    <h3> { service.title.partOne } <br />  { service.title.partTwo } </h3>
+                    <p> {  service.description } </p>
+                    <a href="#" className="icon"> <i className="far fa-long-arrow-right"></i> </a>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+      <div className="container">
+        <div className="con-info wow fadeInDown">
+          <h5> Need help? Call our award-winning support team at <strong> 040-67607600 </strong> </h5>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Services

src/components/CloudHosting/SideMenu.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+const SideMenu = () => {
+  const toggleSideMenu = (e) => {
+    e.preventDefault();
+    const side_menu = document.getElementById('side_menu');
+    const side_overlay = document.querySelector('.side_overlay');
+
+    side_menu && side_menu.classList.remove('show');
+    side_overlay && side_overlay.classList.remove('show');
+  }
+
+  return (
+    <>
+      <div className="side_menu style-7 dark_theme" id="side_menu">
+        <a href="#0" className="side_menu_cls" onClick={toggleSideMenu}>
+          <img src="/assets/img/icons/4dots_light.png" alt="" />
+        </a>
+        <div className="content">
+          <div className="logo">
+            <a href="#" className="w-100">
+              <img src="/assets/img/logo_9.png" alt="" />
+            </a>
+          </div>
+          <div className="pages_links">
+            <ul>
+              <li><a href="#" className="active">Home</a></li>
+              <li><a href="#">about</a></li>
+              <li><a href="#">services</a></li>
+              <li><a href="#">portfolio</a></li>
+              <li><a href="#">blog</a></li>
+              <li><a href="#">contact</a></li>
+              <li><a href="#">shop</a></li>
+            </ul>
+          </div>
+          <div className="side_foot">
+            <h5> get in touch </h5>
+            <div className="row">
+              <div className="col-lg-6">
+                <a href="#"> <i className="fal fa-phone-alt me-2"></i> (+23) 5535 68 68 </a>
+              </div>
+              <div className="col-lg-6">
+                <a href="#"> <i className="fal fa-envelope me-2 mt-4 mt-lg-0"></i> contact@Iteck.co </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="side_overlay"></div>
+    </>
+  )
+}
+
+export default SideMenu

src/components/CloudHosting/Testimonials.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import testimonialsData from 'data/CloudHosting/testimonials.json';
+
+const Testimonials = () => {
+  return (
+    <section className="testimonials style-9 section-padding">
+      <div className="container">
+        <div className="testi-head mb-80 wow fadeInUp">
+          <div className="row justify-content-between">
+            <div className="col-lg-5">
+              <h3> Trusted by 20+ Million Users Around The World. </h3>
+            </div>
+            <div className="col-lg-4 text-lg-end">
+              <div className="reviews-numb">
+                <div className="img">
+                  <img src="/assets/img/testimonials/trust_logo.png" alt="" className="logo" />
+                  <div className="stars">
+                    <img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
+                    <img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
+                    <img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
+                    <img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
+                    <img src="/assets/img/testimonials/trust_star.png" alt="" className="star" />
+                  </div>
+                </div>
+                <div className="info text-start">
+                  <p className="color-666"> { testimonialsData.totalRating } out of 5 based on </p>
+                  <h6 className="color-darkBlue2 fw-bold"> { testimonialsData.totalReviews } reviews </h6>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="testi-body">
+          <div className="row gx-5">
+            {
+              testimonialsData.testimonials.map((testimonial, index) => (
+                <div className={`col-lg-4 ${index !== testimonialsData.testimonials.length - 1 ? 'border-1 border-end brd-gray wow fadeInUp':''}`} key={index}>
+                  <div className={`testi-card p${index === 0 ? 'e' : index === 1 ? 'x' : 's'}-lg-4`}>
+                    <div className="stars">
+                      {
+                        Array(testimonial.stars).fill().map((_,i) => <img key={i} src="/assets/img/testimonials/trust_star.png" alt="" className="star" />)
+                      }
+                    </div>
+                    <div className="text">
+                      “ { testimonial.content } ”
+                    </div>
+                    <div className="author">
+                      <div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
+                        <img src={testimonial.author.image} alt="" />
+                      </div>
+                      <div className="inf">
+                        <p> { testimonial.author.position } </p>
+                        <h6> { testimonial.author.name } </h6>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonials

src/components/Contact/Community.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import communityData from 'data/Contact/community.json';
+
+const Community = () => {
+  return (
+    <section className="community section-padding style-5">
+      <div className="container">
+        <div className="section-head text-center style-4 mb-40">
+          <small className="title_small">Contact us</small>
+          <h2 className="mb-20">Get In <span>Touch</span> </h2>
+          <p>We will contact again after receive your request in 24h</p>
+        </div>
+        <div className="content rounded-pill">
+          {
+            communityData.map((card, i) => (
+              <div className="commun-card" key={i}>
+                <div className="icon icon-45">
+                  <img src={card.icon} alt="" />
+                </div>
+                <div className="inf">
+                  <h5>{ card.info }</h5>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Community

src/components/Contact/Form.jsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import contactInfo from 'data/Contact/form.json';
+import contactInfoRTL from 'data/Contact/form-rtl.json';
+
+const Form = ({ style = "4", rtl }) => {
+  const [formData, setFormdata] = useState({
+    name: "",
+    email: "",
+    phone: "",
+    website: "",
+    option: "",
+    message: ""
+  });
+
+  const contactInfoData = rtl ? contactInfoRTL : contactInfo;
+
+  const handleFormChange = (e) => {
+    setFormdata(prev => ({
+      ...prev,
+      [e.target.name]: e.target.value
+    }))
+  }
+
+  const handleFormSubmit = async (e) => {
+    e.preventDefault();
+    const formValues = new FormData();
+
+    formValues.append('name', formData.name);
+    formValues.append('email', formData.email);
+    formValues.append('phone', formData.phone);
+    formValues.append('website', formData.website);
+    formValues.append('option', formData.option);
+    formValues.append('message', formData.message);
+    
+    const res = await axios.post('/contact.php', formValues)
+      .catch(err => alert(err.message));
+
+    if (!res) return;
+
+    alert('Form submitted successfully.')
+  }
+
+  return (
+    <section className={`contact section-padding pt-${style === '4' ? '0':'50'} style-6`}>
+      {
+        style === '5' && (
+          <>
+            <div className="section-head text-center mb-100 style-5">
+              <h2 className="mb-20">{ rtl ? 'يسعدنا' : 'Get In' } <span>{ rtl ? 'تواصلك' : 'Touch' }</span> { rtl && 'معنا' }</h2>
+              <p>{ rtl ? 'سنتواصل معك مرة أخرى بعد استلام طلبك خلال 24 ساعة' : 'We will contact again after receive your request in 24h' }</p>
+            </div>
+            <div className="text-center mb-100">
+              <h2 className="ltspc-20 text-uppercase fs-1 lh-1 mb-50 mt-30 color-blue5">{ contactInfoData.phone }</h2>
+              <h4 className="fw-normal mb-20 color-000">{ contactInfoData.email }</h4>
+              <h4 className="fw-normal mb-10 color-000">{ contactInfoData.address }</h4>
+            </div>
+          </>
+        )
+      }
+      <div className="container">
+        <div className="content">
+          <div className="row justify-content-center">
+            <div className="col-lg-8">
+              <form action="contact.php" className="form" method="post" onSubmit={handleFormSubmit}>
+                <p className="text-center text-danger fs-12px mb-30">{ rtl ? 'الحقل اللذى يحتوى على هذة العلامة اجبارى *' : 'The field is required mark as *' }</p>
+                <div className="row">
+                  <div className="col-lg-6">
+                    <div className="form-group mb-20">
+                      <input type="text" name="name" className="form-control" placeholder={ rtl ? 'الاسم' : "Name" } onChange={handleFormChange} />
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="form-group mb-20">
+                      <input type="text" name="email" className="form-control" placeholder={ rtl ? 'البريد الالكترونى *' : "Email Address *" } onChange={handleFormChange} />
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="form-group mb-20">
+                      <input type="text" name="phone" className="form-control" placeholder={ rtl ? 'رقم الهاتف (اختياري)' : "Phone Number (option)" } onChange={handleFormChange} />
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="form-group mb-20">
+                      <input type="text" name="website" className="form-control" placeholder={ rtl ? 'رابط موقعك (اختيارى)' : "Your Website (option)" } onChange={handleFormChange} />
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <div className="form-group mb-20">
+                      <select className="form-select" defaultValue={ rtl ? 'كيف يمكننا مساعدتك ؟' : "How can we help you?" } name="option" onChange={handleFormChange}>
+                        <option value="how can we help">{ rtl ? 'كيف يمكننا مساعدتك ؟' : 'How can we help you?' }</option>
+                        <option value="option 1">{ rtl ? 'الاختيار الاول' : 'option 1' }</option>
+                        <option value="option 2">{ rtl ? 'الاختيار الثاني' : 'option 2' }</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <div className="form-group">
+                      <textarea rows="10" name="message" className="form-control" placeholder={ rtl ? 'كيف يمكننا مساعدتك ؟' : "How can we help you?" } onChange={handleFormChange}></textarea>
+                    </div>
+                  </div>
+                  <div className="col-lg-12 text-center">
+                    <div className="form-check d-inline-flex mt-30 mb-30">
+                      <input className="form-check-input me-2 mt-0" type="checkbox" value="" id="flexCheckDefault" />
+                      <label className="form-check-label small" htmlFor="flexCheckDefault">
+                        { rtl ? 'من خلال الإرسال ، أوافق على' : 'By submitting, i’m agreed to the' } <a href="#" className="text-decoration-underline">{ rtl ? 'الشروط و الاحكام' : 'Terms & Conditons' }</a>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="col-lg-12 text-center">
+                    <input type="submit" value={ rtl ? 'ارسل طلبك' : 'Send Your Request' } className="btn rounded-pill blue5-3Dbutn hover-blue2 sm-butn fw-bold text-light" />
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+          <img src="/assets/img/icons/contact_a.png" alt="" className="contact_a" />
+          <img src="/assets/img/icons/contact_message.png" alt="" className="contact_message" />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Form

src/components/Contact/Map.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Map = () => {
+  return (
+    <div className="map">
+      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24219.60999175365!2d-73.9764341314902!3d40.64198229194528!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25b400c94a227%3A0x18e2a4d3fb21f0ec!2sFlatbush%2C%20Brooklyn%2C%20NY%2C%20USA!5e0!3m2!1sen!2seg!4v1651361759450!5m2!1sen!2seg" height="500" style={{ border: 0 }} allowFullScreen="" loading="lazy" referrerPolicy="no-referrer-when-downgrade"></iframe>
+    </div>
+  )
+}
+
+export default Map

src/components/CountTo/index.jsx

@@ -0,0 +1,136 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  from: PropTypes.number,
+  to: PropTypes.number.isRequired,
+  speed: PropTypes.number.isRequired,
+  delay: PropTypes.number,
+  onComplete: PropTypes.func,
+  digits: PropTypes.number,
+  className: PropTypes.string,
+  tagName: PropTypes.string,
+  children: PropTypes.func,
+  easing: PropTypes.func,
+  position: PropTypes.shape({
+    height: PropTypes.number,
+    startY: PropTypes.number,
+  }),
+};
+
+const defaultProps = {
+  from: 0,
+  delay: 100,
+  digits: 0,
+  tagName: 'span',
+  easing: t => t,
+};
+
+class CountTo extends PureComponent {
+  constructor(props) {
+    super(props);
+
+    const { from } = props;
+
+    this.state = {
+      counter: from,
+      restart: false
+    };
+
+    this.start = this.start.bind(this);
+    this.clear = this.clear.bind(this);
+    this.next = this.next.bind(this);
+    this.updateCounter = this.updateCounter.bind(this);
+  }
+
+  componentDidMount() {
+    this.start();
+    window.addEventListener('scroll', () => {
+      if (!this.props.position) return;
+
+      const { from, to } = this.props.position;
+
+      if (window.scrollY > from && window.scrollY < to && this.state.restart) {
+        this.start();
+        this.setState({ restart: false });
+      }
+
+      if (window.scrollY < from && !this.state.restart) {
+        this.setState({ restart: true });
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.clear();
+  }
+
+  start(props = this.props) {
+    this.clear();
+    const { from } = props;
+    this.setState({
+      counter: from,
+    }, () => {
+      const { speed, delay } = this.props;
+      const now = Date.now();
+      this.endDate = now + speed;
+      this.scheduleNextUpdate(now, delay);
+      this.raf = requestAnimationFrame(this.next);
+    });
+  }
+
+  next() {
+    const now = Date.now();
+    const { speed, onComplete, delay } = this.props;
+
+    if (now >= this.nextUpdate) {
+      const progress = Math.max(0, Math.min(1, 1 - (this.endDate - now) / speed));
+      this.updateCounter(progress);
+      this.scheduleNextUpdate(now, delay);
+    }
+
+    if (now < this.endDate) {
+      this.raf = requestAnimationFrame(this.next);
+    } else if (onComplete) {
+      onComplete();
+    }
+  }
+
+  scheduleNextUpdate(now, delay) {
+    this.nextUpdate = Math.min(now + delay, this.endDate);
+  }
+
+  updateCounter(progress) {
+    const { from, to, easing } = this.props;
+    const delta = to - from;
+    const counter = from + delta * easing(progress);
+    this.setState({
+      counter,
+    });
+  }
+
+  clear() {
+    cancelAnimationFrame(this.raf);
+  }
+
+  render() {
+    const { className, digits, tagName: Tag, children: fn } = this.props;
+    const { counter } = this.state;
+    const value = counter.toFixed(digits);
+
+    if (fn) {
+      return fn(value);
+    }
+
+    return (
+      <Tag className={className}>
+        {value}
+      </Tag>
+    );
+  }
+}
+
+CountTo.propTypes = propTypes;
+CountTo.defaultProps = defaultProps;
+
+export default CountTo;

src/components/Crypto/About.jsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <section className="about style-15 section-padding">
+      <div className="container">
+        <div className="row align-items-center justify-content-between">
+          <div className="col-lg-5">
+            <div className="info wow fadeInUp">
+              <div className="section-head mb-30">
+                <h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" />  <span> core features </span> </h6>
+                <h2 className="fs-1"> Most Trusted & Secure Crypto Platform </h2>
+              </div>
+              <p> When We Save this Money for Investors, They can be an Reinvest the Save Money </p>
+              <ul>
+                <li> <i className="fal fa-check me-3 color-red2"></i> <span> Start investing now, on Iteck crypto </span> </li>
+                <li> <i className="fal fa-check me-3 color-red2"></i> <span> To buy and sell cryptocurrency assets </span> </li>
+              </ul>
+              <a href="#0" className="btn rounded-pill bg-red2 fw-bold text-white mt-40" target="_blank">
+                <span> Compare With Other Crypto <i className="fal fa-angle-down ms-2"></i> </span>
+              </a>
+            </div>
+          </div>
+          <div className="col-lg-6">
+            <div className="img wow fadeInUp" data-wow-delay="0.2s">
+              <img src="/assets/img/about/about_15_img.svg" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default About

src/components/Crypto/Blog.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+const Blog = () => {
+  return (
+    <section className="blog section-padding style-15">
+      <div className="container">
+        <div className="row align-items-end mb-70 wow fadeInUp">
+          <div className="col-lg-6">
+            <div className="section-head">
+              <h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" />  <span> news </span> </h6>
+              <h2 className="fs-1"> Blog & Insights </h2>
+            </div>
+          </div>
+          <div className="col-lg-6 text-lg-end">
+            <a href="#" className="butn border-1 brd-light border rounded-pill text-white hover-red2 mb-2">
+              <span> More News <i className="fal fa-long-arrow-right ms-2"></i> </span>
+            </a>
+          </div>
+        </div>
+        <div className="content">
+          <div className="row">
+            <div className="col-lg-8">
+              <div className="main-card wow fadeInUp">
+                <div className="row gx-0">
+                  <div className="col-lg-6">
+                    <div className="img img-cover">
+                      <img src="/assets/img/blog/25.jpg" alt="" />
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="info">
+                      <div className="cont">
+                        <h6 className="color-red2 text-uppercase mb-3"> <a href="#"> crypto, </a> <a href="#"> bitcoin </a> </h6>
+                        <h4> <a href="#"> When it comes to magazine and news websites. </a> </h4>
+                        <p> It comes to magazine and news websites, WordPress is top of the bill. Well-known news sites like The New York Times </p>
+                        <a href="#" className="author mt-40">
+                          <div className="icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
+                            <img src="/assets/img/team/9.jpg" alt="" />
+                          </div>
+                          <div className="inf">
+                            <h6> Rosalina D. William </h6>
+                            <p> Posted: June 22, 2023 </p>
+                          </div>
+                        </a>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="center_icon img-contain">
+                  <img src="/assets/img/icons/blog_15_icon.png" alt="" />
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-4">
+              <div className="sub-card wow fadeInUp" data-wow-delay="0.2s">
+                <div className="img img-cover">
+                  <img src="/assets/img/blog/26.jpg" alt="" />
+                  <div className="center_icon img-contain">
+                    <img src="/assets/img/icons/blog_15_icon.png" alt="" />
+                  </div>
+                </div>
+                <div className="info">
+                  <div className="cont">
+                    <h6 className="color-red2 text-uppercase mb-3"> <a href="#"> crypto, </a> <a href="#"> bitcoin </a> </h6>
+                    <h4> <a href="#"> When it comes to magazine and news websites. </a> </h4>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Blog

src/components/Crypto/FAQ.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import FAQs from 'data/Crypto/faq.json'
+
+const FAQ = () => {
+  return (
+    <section className="faq pt-100 style-15">
+      <div className="container">
+        <div className="section-head text-center mb-50 wow fadeInUp">
+          <h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" />  <span> some faq </span>  <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 ms-2" /> </h6>
+          <h2 className="fs-1"> Freequently Asked Anything </h2>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              FAQs.map((question, idx) => (
+                <div className="col-lg-6" key={idx}>
+                  <div className="faq-card wow fadeInUp">
+                    <span className="numb">
+                      {question.numb}
+                    </span>
+                    <div className="info">
+                      <h6> {question.question} </h6>
+                      <p> {question.answer} </p>
+                    </div>
+                    <img src="/assets/img/icons/faq_15_icon.png" alt="" className="icon" />
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+        <div className="text-center mt-50 wow fadeInUp">
+          <a href="#" className="butn border-1 brd-light border rounded-pill text-white hover-red2">
+            <span> Ask More Question <i className="fal fa-long-arrow-right ms-2"></i> </span>
+          </a>
+        </div>
+        <div className="subscribe-content mt-100 wow fadeInUp">
+          <div className="row justify-content-center">
+            <div className="col-lg-10">
+              <div className="subscribe-card">
+                <div className="row justify-content-center">
+                  <div className="col-lg-9">
+                    <div className="icon">
+                      <img src="/assets/img/icons/ch10.png" alt="" />
+                    </div>
+                  </div>
+                  <h2 className="fs-1s"> Daily Update & Newsletter </h2>
+                  <div className="form-group">
+                    <span className="ico"> <i className="fas fa-envelope-open"></i> </span>
+                    <input type="text" placeholder="Business Email" />
+                    <button> Subscribe Now </button>
+                    <img src="/assets/img/subs_arrow.png" alt="" className="subs_arrow" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default FAQ

src/components/Crypto/Features.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import features from 'data/Crypto/features.json';
+
+const Features = () => {
+  return (
+    <section className="features style-15">
+      <div className="container">
+        <div className="section-head text-center mb-50 wow fadeInUp">
+          <h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" />  <span> core features </span>  <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 ms-2" /> </h6>
+          <h2 className="fs-1"> Features & Reveals </h2>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              features.map((feature, index) => (
+                <div className="col-lg-4" key={index}>
+                  <a href="#" className="features-card wow fadeInUp">
+                    <div className="icon">
+                      <img src={feature.icon} alt="" />
+                    </div>
+                    <h6> {feature.title} </h6>
+                    <p> {feature.details} </p>
+                  </a>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features

src/components/Crypto/Footer.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <footer className="style-15">
+      <div className="container">
+        <div className="content">
+          <div className="foot-logo-social mb-70">
+            <div className="row align-items-center">
+              <div className="col-lg-6">
+                <div className="foot-logo">
+                  <img src="/assets/img/logo_15.png" alt="" />
+                </div>
+              </div>
+              <div className="col-lg-6 text-lg-end">
+                <div className="social-icons">
+                  <a href="#"> <i className="fab fa-facebook-f"></i> </a>
+                  <a href="#"> <i className="fab fa-twitter"></i> </a>
+                  <a href="#"> <i className="fab fa-behance"></i> </a>
+                  <a href="#"> <i className="fab fa-youtube"></i> </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="links-content">
+            <div className="row justify-content-between gx-0">
+              <div className="col-lg-4">
+                <h6 className="sub-title"> our company </h6>
+                <div className="main-links">
+                  <ul>
+                    <li> <a href="#"> About us </a> </li>
+                    <li> <a href="#"> Price & Plans </a> </li>
+                    <li> <a href="#"> Blog </a> </li>
+                    <li> <a href="#"> Support </a> </li>
+                    <li> <a href="#"> Media Center </a> </li>
+                    <li> <a href="#"> Get In Touch </a> </li>
+                    <li> <a href="#"> Careers </a> </li>
+                    <li> <a href="#"> FAQ </a> </li>
+                    <li> <a href="#"> Licenses & Registration </a> </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="col-lg-3 col-sm-6">
+                <h6 className="sub-title"> get in touch </h6>
+                <div className="links">
+                  <ul>
+                    <li> <i className="fas fa-phone color-red2 me-2"></i> <a href="#"> +888 999 777 88 </a> </li>
+                    <li> <i className="fas fa-envelope-open color-red2 me-2"></i> <a href="#"> info@webmail.com </a> </li>
+                    <li> <i className="fas fa-globe color-red2 me-2"></i> <a href="#"> www.example-web.com </a> </li>
+                    <li> <i className="fas fa-map-marker-alt color-red2 me-2"></i> <a href="#"> 7/A, New Booston, NYC </a> </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="col-lg-2">
+                <h6 className="sub-title"> Mobile app </h6>
+                <div className="down-imgs">
+                  <a href="#" className="img mt-30">
+                    <img src="/assets/img/foot_15_down1.png" alt="" />
+                  </a>
+                  <a href="#" className="img mt-20">
+                    <img src="/assets/img/foot_15_down2.png" alt="" />
+                  </a>
+                </div>
+              </div>
+              <div className="col-lg-2">
+                <h6 className="sub-title"> our products </h6>
+                <div className="links">
+                  <ul>
+                    <li> <a href="#"> Buy Crypto </a> </li>
+                    <li> <a href="#"> Earn Crypto Interest </a> </li>
+                    <li> <a href="#"> Instant Crypto Credit Lines™ </a> </li>
+                    <li> <a href="#"> Crypto Exchange </a> </li>
+                    <li> <a href="#"> iTeck Crypto Card </a> </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="foot">
+          <p> Copyright & Design By <a href="#" className="text-white"> @ThemeCamp </a> - 2022 </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/Crypto/Header.jsx

@@ -0,0 +1,97 @@
+import React, { useEffect } from 'react';
+import TopNav from 'components/Navbars/TopNav-15';
+import Navbar from 'components/Navbars/CryptoNav';
+import timer from 'common/timer';
+
+const Header = () => {
+  useEffect(() => {
+    setTimeout(() => {
+      timer('nov 29, 2022 11:30');
+    }, 0);
+  }, []);
+
+  return (
+    <header className="style-15">
+      <div className="navs-container">
+        <TopNav />
+        <Navbar />
+      </div>
+      <div className="container">
+        <div className="content">
+          <div className="row align-items-center">
+            <div className="col-lg-5">
+              <div className="info">
+                <h6> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" /> We've got your #crypto back </h6>
+                <h1> Iteck is an innovative payment network & kind of money. </h1>
+                <a href="#" className="butn bg-yellowGreen text-dark fw-bold rounded-pill">
+                  <span> <i className="fas fa-wallet me-2"></i> Choose Wallet </span>
+                </a>
+                <a href="#" className="butn border-1 border-white border rounded-pill text-white ms-3 hover-red2">
+                  <span> Buy Bitcoin </span>
+                </a>
+              </div>
+            </div>
+            <div className="col-lg-7">
+              <div className="img mt-50">
+                <img src="/assets/img/header/head_15_img.svg" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="countdown-content wow fadeInUp">
+          <div className="countdown-card">
+            <div className="row align-items-center">
+              <div className="col-lg-3 col-sm-6">
+                <div className="inf">
+                  <h3> Token Sale is Live 5%  Bonus Ends In: </h3>
+                  <a href="#" className="color-red2 text-uppercase mt-15"> register & Buy Now <i className="fal fa-long-arrow-right ms-2"></i> </a>
+                </div>
+              </div>
+              <div className="col-lg-4">
+                <div className="countdown px-3">
+                  <div className="item">
+                    <h2 id="days"></h2>
+                    <small> days </small>
+                  </div>
+                  <div className="item">
+                    <h2 id="hours"></h2>
+                    <small> Hours </small>
+                  </div>
+                  <div className="item">
+                    <h2 id="minutes"></h2>
+                    <small> Minute </small>
+                  </div>
+                  <div className="item">
+                    <h2 id="seconds"></h2>
+                    <small> Seconds </small>
+                  </div>
+                </div>
+              </div>
+              <div className="col-lg-5">
+                <div className="progs-content ps-4">
+                  <p className="text-end mb-15"> Hard Cap </p>
+                  <div className="progress">
+                    <div className="progress-bar" role="progressbar" style={{ width: '25%' }} aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+                  </div>
+                  <div className="color-yellowGreen d-flex justify-content-between mt-20">
+                    <div className="l-side"> <span className="text-white-50"> Raisen: </span> <span className="counter"> <small> $ </small> 65,556.80 </span> </div>
+                    <div className="r-side"> <span className="counter">  <small> $ </small> 1,000,000 </span> </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="logos">
+            <span className="text-white-50 fw-bold"> We accept: </span>
+            <img src="/assets/img/logos/50.png" alt="" />
+            <img src="/assets/img/logos/51.png" alt="" />
+            <img src="/assets/img/logos/52.png" alt="" />
+            <img src="/assets/img/logos/53.png" alt="" />
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/Crypto/Markets.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import marketsData from 'data/Crypto/markets.json';
+
+const Markets = () => {
+  return (
+    <section className="markets section-padding style-15">
+      <div className="container">
+        <div className="section-head text-center mb-70 wow fadeInUp">
+          <h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" />  <span> exchnage </span>  <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 ms-2" /> </h6>
+          <h2 className="fs-1"> Interested You Today </h2>
+        </div>
+        <div className="content">
+          <div className="markets-table">
+            <div className="table-head wow fadeInUp">
+              <div className="item">
+                <p> Instrument </p>
+              </div>
+              <div className="item">
+                <p> Last Price </p>
+              </div>
+              <div className="item">
+                <p> 24H Change </p>
+              </div>
+              <div className="item">
+                <p> 24H Change </p>
+              </div>
+            </div>
+            <div className="table-body">
+              {
+                marketsData.map((row, idx) => (
+                  <div className="body-row wow fadeInUp" key={idx}>
+                    <div className="item">
+                      <div className="icon-40 me-3">
+                        <img src={row.paymentIcon} alt="" />
+                      </div>
+                      <p className="text-white-50"> <strong className="text-white text-uppercase"> {row.from} </strong> /{row.to} </p>
+                    </div>
+                    <div className="item">
+                      <p className="text-white-50"> <strong className="text-white me-1"> {row.price} </strong> ${row.price} </p>
+                    </div>
+                    <div className="item">
+                      <p className={row.lastDayChange.operator === '+' ? 'per-up' : 'color-red2'}> {row.lastDayChange.operator}{row.lastDayChange.change}% </p>
+                    </div>
+                    <div className="item">
+                      <p className="text-white w-100"> <strong> ${row.lastDayPrice.dollar}  </strong> </p>
+                      <p className="text-white-50 w-100"> <strong> {row.lastDayPrice.crypto}  </strong> </p>
+                    </div>
+                    <div className="item">
+                      <img src="/assets/img/icons/line_chart.png" alt="" className="line_chart" />
+                    </div>
+                    <div className="item">
+                      <a href="#" className="trad-btn"> Trade Now </a>
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+          <div className="text-center wow fadeInUp">
+            <a href="#0" className="btn rounded-pill bg-red2 fw-bold text-white mt-40" target="_blank">
+              <span> View More Market <i className="fal fa-long-arrow-right ms-2"></i> </span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Markets

src/components/Crypto/Team.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import teamMemebers from 'data/Crypto/team.json';
+
+const Team = () => {
+  return (
+    <section className="team style-15">
+      <div className="row gx-0">
+        {
+          teamMemebers.map((member, idx) => (
+            <div className="col-lg-3 col-sm-6" key={idx}>
+              <div className="team-card wow fadeInUp">
+                <div className="img">
+                  <img src={member.picture} alt="" />
+                </div>
+                <div className="info">
+                  <div className="social-icons">
+                    <a href="#"> <i className="fab fa-facebook-f"></i> </a>
+                    <a href="#"> <i className="fab fa-twitter"></i> </a>
+                    <a href="#"> <i className="fab fa-behance"></i> </a>
+                    <a href="#"> <i className="fab fa-youtube"></i> </a>
+                    <a href="#"> <i className="fab fa-linkedin"></i> </a>
+                  </div>
+                  <div className="inf">
+                    <p className="text-uppercase"> {member.position} </p>
+                    <h5> {member.name} </h5>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </section>
+  )
+}
+
+export default Team

src/components/Crypto/Timeline.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import timelineData from 'data/Crypto/timeline.json';
+
+const Timeline = () => {
+  return (
+    <section className="timeline style-15">
+      <div className="container">
+        <div className="section-head mb-70 wow fadeInUp">
+          <h6 className="text-uppercase fw-bold lh-8"> <img src="/assets/img/icons/home_15_icon.png" alt="" className="icon-30 me-2" />  <span> timeline </span> </h6>
+          <h2 className="fs-1"> The Timeline Of Our Journey </h2>
+        </div>
+        <div className="content">
+          <div className="timeline-cards">
+            <div className="row">
+              {
+                timelineData.map((item, idx) => (
+                  <div className="col-lg-3 col-sm-6" key={idx}>
+                    <div className="timeline-card wow fadeInUp">
+                      <div className="icon">
+                        <img src={item.image} alt="" />
+                      </div>
+                      <div className="info">
+                        <h6> {item.title.partOne} <br /> {item.title.partTwo} </h6>
+                      </div>
+                      <span className="year"> {item.year} </span>
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+            <div className="progress">
+              <div className="progress-bar wow" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Timeline

src/components/CyberSecurity/About.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <section className="about style-10 section-padding">
+      <div className="container">
+        <div className="row align-items-center">
+          <div className="col-lg-6">
+            <div className="imgs">
+              <div className="row gx-3">
+                <div className="col-lg-6 pt-60">
+                  <div className="img img-cover">
+                    <img src="/assets/img/about/about_10_1.jpg" alt="" />
+                  </div>
+                  <div className="img img-cover mt-3">
+                    <img src="/assets/img/about/about2_2.png" alt="" />
+                  </div>
+                </div>
+                <div className="col-lg-6">
+                  <div className="img img-cover">
+                    <img src="/assets/img/about/about_10_2.jpg" alt="" />
+                  </div>
+                  <div className="img img-cover mt-3">
+                    <img src="/assets/img/about/about_10_3.jpg" alt="" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="col-lg-6">
+            <div className="info">
+              <h6> Since From 2000 </h6>
+              <h2> We Provide Professional <br /> Security Solutions </h2>
+              <p> Cybersecurity is the practice of protecting systems, networks, <br /> and programs from digital attacks. </p>
+              <p> These cyberattacks are usually aimed at accessing, changing, <br /> or destroying sensitive information; extorting money from user <br /> or interrupting normal business processes. </p>
+              <a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white mt-50" target="_blank">
+                <small> Learn More <i className="fas fa-long-arrow-alt-right"></i> </small>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/about/about10_pattern.png" alt="" className="pattern" />
+    </section>
+  )
+}
+
+export default About

src/components/CyberSecurity/Blog.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+const Blog = () => {
+  return (
+    <section className="blog style-10 section-padding bg-light">
+      <div className="container">
+        <div className="mb-70">
+          <div className="row">
+            <div className="col-lg-8">
+              <p className="color-blue7 mb-10"> News Feeds </p>
+              <h2> Company Blog & Insights </h2>
+            </div>
+            <div className="col-lg-4 text-lg-end">
+              <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2 mt-4 mt-lg-0">
+                <small> show more <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="contact">
+          <div className="row">
+            <div className="col-lg-5">
+              <div className="blog-card">
+                <div className="img">
+                  <img src="/assets/img/blog/18.png" alt="" className="" />
+                </div>
+                <div className="info">
+                  <h5> <a href="#"> Best unlocked me an striking perceive. </a> </h5>
+                  <p> One of the most important WIP of a blog design is readability. An sure that the background and foreground colors. </p>
+                  <div className="date"> <a href="#"> Nov 21, 2022 </a> <span className="color-999 mx-3"> | </span> <a href="#"> <span className="color-999"> By </span> Admin </a> </div>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-7">
+              <div className="cards">
+                <div className="row">
+                  <div className="col-lg-6">
+                    <div className="blog-card mt-4 mt-lg-0">
+                      <div className="info w-100">
+                        <h5> <a href="#"> The practice of blog's look, feel, branding </a> </h5>
+                        <p> One of the most important WIP of a blog design is readability. An sure that the background and foreground colors. </p>
+                        <div className="date"> <a href="#"> Nov 21, 2022 </a> <span className="color-999 mx-3"> | </span> <a href="#"> <span className="color-999"> By </span> Admin </a> </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="blog-card mt-4 mt-lg-0">
+                      <div className="info w-100">
+                        <h5> <a href="#"> The readability & open functionality </a> </h5>
+                        <p> One of the most important WIP of a blog design is readability. An sure that the background and foreground colors. </p>
+                        <div className="date"> <a href="#"> Nov 21, 2022 </a> <span className="color-999 mx-3"> | </span> <a href="#"> <span className="color-999"> By </span> Admin </a> </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Blog

src/components/CyberSecurity/FAQ.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import IntegrationCard from './IntegrationCard';
+import faqs from 'data/CyberSecurity/faq.json';
+
+const FAQ = () => {
+  return (
+    <section className="faq style-10 bg-light pt-100">
+      <div className="container">
+        <div className="mb-70">
+          <div className="row">
+            <div className="col-lg-8">
+              <p className="color-blue7 mb-10"> FAQ </p>
+              <h2> Freequently Asked Question </h2>
+            </div>
+            <div className="col-lg-4 text-lg-end mt-4 mt-lg-0">
+              <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2">
+                <small> More Question <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="content overflow-hidden">
+          <div className="row gx-5">
+            <div className="col-lg-8">
+              <div className="accordion" id="accordionExample">
+                {
+                  faqs.map((faq, idx) => (
+                    <div className="accordion-item" key={idx}>
+                      <h2 className="accordion-header" id={`hd${idx}`}>
+                        <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target={`#cl${idx}`} aria-expanded="true" aria-controls="collapseOne">
+                          {faq.question}
+                        </button>
+                      </h2>
+                      <div id={`cl${idx}`} className="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                        <div className="accordion-body">
+                          <p>
+                            {faq.answer}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+            <div className="col-lg-4">
+              <div className="faq-form mt-5 mt-lg-0">
+                <h4> Ask More Question </h4>
+                <div className="form-group">
+                  <input type="text" className="form-control" placeholder="Your name" />
+                  <span className="icon"> <i className="fas fa-user"></i> </span>
+                </div>
+                <div className="form-group">
+                  <input type="text" className="form-control" placeholder="Email address" />
+                  <span className="icon"> <i className="fas fa-envelope"></i> </span>
+                </div>
+                <div className="form-group">
+                  <textarea name="" id="" rows="5" className="form-control" placeholder="message"></textarea>
+                  <span className="icon"> <i className="fas fa-pen"></i> </span>
+                </div>
+                <button className="butn w-100 bg-blue7 text-white border-0 rounded-3"> <span> send message </span> </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <IntegrationCard />
+    </section>
+  )
+}
+
+export default FAQ

src/components/CyberSecurity/Features.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import features from 'data/CyberSecurity/features.json';
+
+const Features = () => {
+  return (
+    <section className="features style-10">
+      <div className="content">
+        <div className="row gx-0">
+          {
+            features.map((feature, idx) => (
+              <div className="col-lg-3 col-sm-6" key={idx}>
+                <div className="feat-card">
+                  <div className="icon">
+                    <img src={feature.image} alt="" />
+                  </div>
+                  <div className="info">
+                    <a href="#"> {feature.sub_title} </a>
+                    <h4> {feature.title} </h4>
+                    <p> {feature.details} </p>
+                  </div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features

src/components/CyberSecurity/Footer.jsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+const Footer = () => {
+  return (
+    <footer className="style-10">
+      <div className="container">
+        <div className="content section-padding overflow-hidden">
+          <div className="row gx-5">
+            <div className="col-lg-4">
+              <div className="info-card border-blue7">
+                <h5 className="color-666 fw-normal text-capitalize mb-10"> Head Office </h5>
+                <h5> 12/A, New Booston, <br /> NYC info@webmail.com </h5>
+              </div>
+            </div>
+            <div className="col-lg-4">
+              <div className="info-card mt-5 mt-lg-0">
+                <h5 className="color-666 fw-normal text-capitalize mb-10"> Sub Office </h5>
+                <h5> Pablo Hemilton Tower, Tokyo <br /> jobs@example.com </h5>
+              </div>
+            </div>
+            <div className="col-lg-3 col-sm-6 offset-lg-1">
+              <div className="subscribe-card mt-5 mt-lg-0">
+                <h5 className="mb-30 fw-bold lh-1"> Get Newsletter </h5>
+                <div className="form-group">
+                  <span className="icon"> <i className="fas fa-envelope-open"></i> </span>
+                  <input type="text" placeholder="Email address" />
+                  <button type="submit"> Subscribe </button>
+                </div>
+                <p> ** We are not going to save data </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="foot">
+          <div className="row align-items-center">
+            <div className="col-lg-3 col-sm-6">
+              <a className="navbar-brand" href="#">
+                <img src="/assets/img/logo_10.png" alt="" />
+              </a>
+            </div>
+            <div className="col-lg-6">
+              <div className="links text-center">
+                <a href="#" className="mx-4"> About </a>
+                <a href="#" className="mx-4"> Career </a>
+                <a href="#" className="mx-4"> Faq </a>
+                <a href="#" className="mx-4"> Insights </a>
+              </div>
+            </div>
+            <div className="col-lg-3 col-sm-6 text-lg-end">
+              <div className="social-icons">
+                <a href="#"> <i className="fab fa-facebook-f"></i> </a>
+                <a href="#"> <i className="fab fa-twitter"></i> </a>
+                <a href="#"> <i className="fab fa-behance"></i> </a>
+                <a href="#"> <i className="fab fa-youtube"></i> </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/footer/footer_10_pattern.png" alt="" className="pattern" />
+    </footer>
+  )
+}
+
+export default Footer

src/components/CyberSecurity/Header.jsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import Navbar from 'components/Navbars/CyberNav'
+
+const Header = () => {
+  return (
+    <header className="style-10">
+      <div className="navs-container">
+        <Navbar />
+      </div>
+      <div className="container">
+        <div className="content pt-50">
+          <div className="row align-items-center gx-0">
+            <div className="col-lg-6">
+              <div className="info">
+                <h6> From The Market Ieaders In Data Intelligence </h6>
+                <h1> Trusted Data For Every Users </h1>
+                <div className="btns mt-50">
+                  <a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white me-4" target="_blank">
+                    <small> Request For Demo <i className="fas fa-long-arrow-alt-right"></i> </small>
+                  </a>
+                  <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-light text-white hover-blue7">
+                    <small> Get Started Now <i className="fas fa-long-arrow-alt-right bg-light"></i> </small>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="img">
+                <img src="/assets/img/header/header10_img.svg" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="logos">
+          <p className="text-center color-orange2"> Intregrated With: </p>
+          <div className="logos-content">
+            <a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/28.png" alt="" /> </a>
+            <a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/29.png" alt="" /> </a>
+            <a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/30.png" alt="" /> </a>
+            <a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/31.png" alt="" /> </a>
+            <a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/32.png" alt="" /> </a>
+            <a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/33.png" alt="" /> </a>
+            <a href="#" className="logo_img img-contain"> <img src="/assets/img/logos/34.png" alt="" /> </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/CyberSecurity/IntegrationCard.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+const IntegrationCard = () => {
+  return (
+    <div className="integration-card">
+      <div className="container">
+        <div className="content">
+          <p> Iteck Syncs With The Apps You’re Already Using </p>
+          <h3> Over 30+ App Integrations </h3>
+          <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold border-white text-white hover-orange2 text-capitalize">
+            <small> View All Integrations <i className="fas fa-long-arrow-alt-right bg-white"></i> </small>
+          </a>
+          <div className="icons">
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/1.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/2.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/3.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/4.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/5.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/6.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/7.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/8.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/9.png" alt="" /> </span>
+            <span className="icon slide_up_down"> <img src="/assets/img/integ/10.png" alt="" /> </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default IntegrationCard

src/components/CyberSecurity/Pricing.jsx

@@ -0,0 +1,91 @@
+import React from 'react'
+
+const Pricing = () => {
+  return (
+    <section className="pricing style-10 section-padding">
+      <div className="container">
+        <div className="text-center mb-40">
+          <p className="color-blue7 mb-10"> Price & Plans </p>
+          <h2> Packages For Everyone </h2>
+        </div>
+        <div className="content">
+          <div className="pricing-table">
+            <div className="table-titles">
+              <div className="main-head">
+                <div className="icon">
+                  <img src="/assets/img/pricing/money.png" alt="" />
+                </div>
+                <p> You pay <strong> $49.00/mo </strong> today renews june 2024 for <strong> $59.00/mo </strong> </p>
+              </div>
+              <div className="main-body d-none d-lg-block">
+                <ul>
+                  <li> Team </li>
+                  <li> Installed Agent </li>
+                  <li> Real-Time Feedback </li>
+                  <li> Video Dedicated Support </li>
+                  <li> Attacked Targets Per Month </li>
+                </ul>
+              </div>
+            </div>
+            <div className="table-body-card">
+              <div className="sub-head">
+                <p className="color-blue7 mb-2"> Starter </p>
+                <h2> $19.00 <small> /mo </small> </h2>
+                <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2">
+                  <small> Purchase Now <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
+                </a>
+              </div>
+              <div className="sub-body">
+                <ul>
+                  <li> <strong> Team </strong> 02 </li>
+                  <li> <strong> Installed Agent </strong> 12 </li>
+                  <li> <strong> Real-Time Feedback </strong> Limited </li>
+                  <li> <strong> Video Dedicated Support </strong>  Limited </li>
+                  <li> <strong> Attacked Targets Per Month </strong> 100 </li>
+                </ul>
+              </div>
+            </div>
+            <div className="table-body-card recommended-card">
+              <div className="sub-head">
+                <p className="text-white mb-2"> Advance </p>
+                <h2> $49.00 <small> /mo </small> </h2>
+                <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray bg-orange2 border-0">
+                  <small> Purchase Now <i className="fas fa-long-arrow-alt-right text-dark bg-white"></i> </small>
+                </a>
+              </div>
+              <div className="sub-body">
+                <ul>
+                  <li> <strong> Team </strong> 06 </li>
+                  <li> <strong> Installed Agent </strong> 50 </li>
+                  <li> <strong> Real-Time Feedback </strong> 24/7 </li>
+                  <li> <strong> Video Dedicated Support </strong>  24/7 </li>
+                  <li> <strong> Attacked Targets Per Month </strong> 1000 </li>
+                </ul>
+              </div>
+            </div>
+            <div className="table-body-card">
+              <div className="sub-head">
+                <p className="color-blue7 mb-2"> Team Plan </p>
+                <h2> $99.00 <small> /mo </small> </h2>
+                <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold brd-gray hover-orange2">
+                  <small> Purchase Now <i className="fas fa-long-arrow-alt-right bg-blue7 text-white"></i> </small>
+                </a>
+              </div>
+              <div className="sub-body">
+                <ul>
+                  <li> <strong> Team </strong> 10 </li>
+                  <li> <strong> Installed Agent </strong> 100 </li>
+                  <li> <strong> Real-Time Feedback </strong> unLimited </li>
+                  <li> <strong> Video Dedicated Support </strong>  Anytime </li>
+                  <li> <strong> Attacked Targets Per Month </strong> 10000 </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Pricing

src/components/CyberSecurity/Services.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import services from 'data/CyberSecurity/services.json';
+
+const Services = () => {
+  return (
+    <section className="services style-10 overflow-hidden">
+      <div className="container">
+        <div className="content">
+          <div className="row gx-5">
+            {
+              services.map((service, idx) => (
+                <div className="col-lg-3 col-sm-6" key={idx}>
+                  <div className="services-card">
+                    <h6> Service #{service.number} </h6>
+                    <h3> {service.title} </h3>
+                    <p> {service.details} </p>
+                    <div className="icon">
+                      <img src={service.image} alt="" />
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+          <div className="section-title"> services </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Services

src/components/CyberSecurity/SideMenu.jsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+const SideMenu = () => {
+  const toggleSideMenu = (e) => {
+    e.preventDefault();
+    const side_menu = document.getElementById('side_menu');
+    const side_overlay = document.querySelector('.side_overlay');
+
+    side_menu && side_menu.classList.remove('show');
+    side_overlay && side_overlay.classList.remove('show');
+  }
+
+  return (
+    <>
+      <div className="side_menu style-7 dark_theme" id="side_menu">
+        <a href="#0" className="side_menu_cls" onClick={toggleSideMenu}>
+          <img src="/assets/img/icons/4dots_light.png" alt="" />
+        </a>
+        <div className="content">
+          <div className="logo">
+            <a href="#" className="w-100">
+              <img src="/assets/img/logo_9.png" alt="" />
+            </a>
+          </div>
+          <div className="pages_links">
+            <ul>
+              <li><a href="#" className="active">Home</a></li>
+              <li><a href="#">about</a></li>
+              <li><a href="#">services</a></li>
+              <li><a href="#">portfolio</a></li>
+              <li><a href="#">blog</a></li>
+              <li><a href="#">contact</a></li>
+              <li><a href="#">shop</a></li>
+            </ul>
+          </div>
+          <div className="side_foot">
+            <h5> get in touch </h5>
+            <div className="row">
+              <div className="col-lg-6">
+                <a href="#"> <i className="fal fa-phone-alt me-2"></i> (+23) 5535 68 68 </a>
+              </div>
+              <div className="col-lg-6">
+                <a href="#"> <i className="fal fa-envelope me-2 mt-4 mt-lg-0"></i> contact@Iteck.co </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="side_overlay" onClick={toggleSideMenu}></div>
+    </>
+  )
+}
+
+export default SideMenu

src/components/CyberSecurity/Solutions.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import solutions from 'data/CyberSecurity/solutions.json';
+
+const Solutions = () => {
+  return (
+    <section className="solutions style-10 section-padding bg-light">
+      <div className="container">
+        <div className="text-center mb-40">
+          <p className="color-blue7 mb-10"> Our Level </p>
+          <h2> Explore Solutions By Industry </h2>
+        </div>
+        <div className="content">
+          <div className="row justify-content-center">
+            {
+              solutions.map((solution, idx) => (
+                <div className="col-lg-3 col-sm-6" key={idx}>
+                  <a href="#" className="solution-card">
+                    <h6> {solution.title} </h6>
+                    <span className="icon"> <img src={solution.image} alt="" /> </span>
+                  </a>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Solutions

src/components/CyberSecurity/Team.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import team from 'data/CyberSecurity/team.json';
+
+const Team = () => {
+  return (
+    <section className="team style-10 section-padding">
+      <div className="container">
+        <div className="mb-70 text-center">
+          <p className="color-blue7 mb-10"> Our Team </p>
+          <h2> Our Talent Expert </h2>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              team.map((member, idx) => (
+                <div className="col-lg-4" key={idx}>
+                  <div className="team-card">
+                    <div className="img">
+                      <img src={member.picture} alt="" className="main-img" />
+                      <span className={`bg_color bg-${idx === 1 ? 'blue7' : 'orange2'}`}></span>
+                      <div className="social-icons">
+                        <span className="icon"> </span>
+                        <div className="socials">
+                          <a href="#"> <i className="fab fa-twitter"></i> </a>
+                          <a href="#"> <i className="fab fa-facebook-f"></i> </a>
+                          <a href="#"> <i className="fab fa-behance"></i> </a>
+                          <a href="#"> <i className="fab fa-youtube"></i> </a>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="info">
+                      <p className="text-capitalize color-blue7"> {member.position} </p>
+                      <h5> {member.name} </h5>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Team

src/components/DataAnalysis/About.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+const About = () => {
+  return (
+    <section className="about style-8 section-padding bg-gray2">
+      <div className="container">
+        <div className="row align-items-center justify-content-between">
+          <div className="col-lg-6">
+            <div className="img mb-4 mb-lg-0 wow fadeIn">
+              <img src="/assets/img/about/3d_vector2.svg" alt="" />
+            </div>
+          </div>
+          <div className="col-lg-5">
+            <div className="info">
+              <div className="section-head style-8 mb-40">
+                <h6 className="wow fadeInUp"> about our service </h6>
+                <h3 className="wow fadeInUp"> We offer Real-time <br /> Data Solutions. </h3>
+              </div>
+              <p className="color-666 wow fadeInUp"> Stay focused and productive with a clean and clutter-free note space the flexible ways to organize </p>
+              <ul className="mt-30">
+                <li className="wow fadeInUp">
+                  <img src="/assets/img/about/icon3.svg" alt="" className="icon" />
+                  <p> Various AI Data Analysis Options </p>
+                </li>
+                <li className="wow fadeInUp">
+                  <img src="/assets/img/about/icon3.svg" alt="" className="icon" />
+                  <p> Auto Generate AI Content </p>
+                </li>
+              </ul>
+              <div className="d-flex align-items-center mt-40 wow fadeInUp">
+                <div className="author">
+                  <div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
+                    <img src="/assets/img/testimonials/user7.png" alt="" />
+                  </div>
+                  <div className="inf">
+                    <p> Certified By </p>
+                    <h6> Alonso D.Dowson </h6>
+                  </div>
+                </div>
+                <img src="/assets/img/about/signature.svg" alt="" className="signature ms-5" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default About

src/components/DataAnalysis/Blog.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import blogs from 'data/DataAnalysis/blog.json'
+
+const Blog = () => {
+  return (
+    <section className="blog style-8 bg-gray2">
+      <div className="container">
+        <div className="content section-padding wow fadeInUp">
+          <div className="section-head text-center style-8 mb-80">
+            <h6> blog </h6>
+            <h3> our News & Insights </h3>
+          </div>
+          <div className="blog-content">
+            <div className="row">
+              <div className="col-lg-6">
+                <div className="main-post wow fadeInUp">
+                  <div className="img img-cover">
+                    <img src={blogs[0].cover} alt="" />
+                    <div className="tags">
+                      <a href="#"> { blogs[0].tag } </a>
+                    </div>
+                  </div>
+                  <div className="info pt-30">
+                    <div className="date-author">
+                      <a href="#" className="date">
+                        { blogs[0].date }
+                      </a>
+                      <span className="color-999 mx-3"> | </span>
+                      <a href="#" className="author color-999">
+                        By <span className="color-000 fw-bold"> { blogs[0].author } </span>
+                      </a>
+                    </div>
+                    <h4 className="title">
+                      <a href="#"> { blogs[0].title } </a>
+                    </h4>
+                  </div>
+                </div>
+              </div>
+              <div className="col-lg-6">
+                <div className="side-posts">
+                  {
+                    blogs.map((blog, index) => (
+                      index > 0 ?
+                        (
+                          <div className="item wow fadeInUp" key={index}>
+                            <div className="img img-cover">
+                              <img src={blog.cover} alt="" />
+                            </div>
+                            <div className="info">
+                              <div className="date-author">
+                                <a href="#" className="date">
+                                  { blog.date }
+                                </a>
+                                <span className="color-999 mx-3"> | </span>
+                                <a href="#" className="author color-999">
+                                  By <span className="color-000 fw-bold"> { blog.author } </span>
+                                </a>
+                              </div>
+                              <h4 className="title">
+                                <a href="#"> { blog.title } </a>
+                              </h4>
+                            </div>
+                          </div>
+                        )
+                        :
+                        null
+                    ))
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Blog

src/components/DataAnalysis/ChooseUs.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+const ChooseUs = () => {
+  return (
+    <section className="choose-us style-8 section-padding">
+      <div className="container">
+        <div className="row gx-0 justify-content-between">
+          <div className="col-lg-5">
+            <div className="info">
+              <div className="section-head style-8 wow fadeInUp">
+                <h6> why choose us </h6>
+                <h3> Track And Analyze Your Business Statistics </h3>
+              </div>
+              <div className="row">
+                <div className="col-6">
+                  <div className="choose-card  wow fadeInUp">
+                    <div className="icon">
+                      <img src="/assets/img/icons/ch7.svg" alt="" />
+                    </div>
+                    <h6> Target Audience </h6>
+                    <span className="arrow"> <i className="fal fa-long-arrow-right"></i> </span>
+                  </div>
+                </div>
+                <div className="col-6">
+                  <div className="choose-card wow fadeInUp" data-wow-delay="0.2s">
+                    <div className="icon">
+                      <img src="/assets/img/icons/ch8.svg" alt="" />
+                    </div>
+                    <h6> Various Options </h6>
+                    <span className="arrow"> <i className="fal fa-long-arrow-right"></i> </span>
+                  </div>
+                </div>
+              </div>
+              <div className="d-flex align-items-center mt-40 wow fadeInUp">
+                <a href="#" className="butn bg-orange1 border-0 rounded-pill hover-shadow flex-shrink-0" type="submit">
+                  <span className="text-white"> Get Started Now <i className="fal fa-long-arrow-right ms-2"></i> </span>
+                </a>
+                <div className="inf ms-4">
+                  <p className="color-999"> Support Email </p>
+                  <a href="#" className="color-000 fw-bold"> info@support-iteck.com </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="col-lg-6">
+            <div className="img mt-5 mt-lg-0 wow fadeIn">
+              <img src="/assets/img/choose_us/3d_vector1.svg" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ChooseUs

src/components/DataAnalysis/Footer.jsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import footerData from 'data/DataAnalysis/footer.json';
+
+const Footer = () => {
+  return (
+    <footer className="style-8 bg-gray2">
+      <div className="container">
+        <div className="content section-padding">
+          <div className="logo-social">
+            <div className="row align-items-center">
+              <div className="col-lg-6">
+                <div className="foot-logo">
+                  <a href="#">
+                    <img src="/assets/img/logo_home8.png" alt="" />
+                  </a>
+                </div>
+              </div>
+              <div className="col-lg-6 text-lg-end">
+                <div className="socials">
+                  <a href="#">
+                    <i className="fab fa-facebook-f"></i>
+                  </a>
+                  <a href="#">
+                    <i className="fab fa-twitter"></i>
+                  </a>
+                  <a href="#">
+                    <i className="fab fa-youtube"></i>
+                  </a>
+                  <a href="#">
+                    <i className="fab fa-linkedin-in"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="links-content">
+            <div className="row justify-content-between">
+              <div className="col-lg-4">
+                <div className="foot-info">
+                  <h6 className="foot-title"> About Us </h6>
+                  <p>{footerData.text}</p>
+                  <ul className="mt-20">
+                    <li>
+                      <a href="#"> <i className="fas fa-envelope-open me-2 color-main"></i> {footerData.email}</a>
+                    </li>
+                    <li>
+                      <a href="#"> <i className="fas fa-phone me-2 color-main"></i> {footerData.phone}</a>
+                    </li>
+                    <li>
+                      <a href="#"> <i className="fas fa-map-marker-alt me-2 color-main"></i> {footerData.address}</a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+              <div className="col-lg-2">
+                <div className="links">
+                  <h6 className="foot-title"> What We Do </h6>
+                  <ul>
+                    {
+                      footerData.links.map((link, i) => (
+                        <li key={i}>
+                          <a href={link.href}>{link.text}</a>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              </div>
+              <div className="col-lg-2">
+                <div className="links">
+                  <h6 className="foot-title"> Other Pages </h6>
+                  <ul>
+                    {
+                      footerData.morePages.map((link, i) => (
+                        <li key={i}>
+                          <a href={link.href}>{link.text}</a>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              </div>
+              <div className="col-lg-3 col-sm-6">
+                <div className="foot-subscribe">
+                  <h6 className="foot-title"> Get Newsletter </h6>
+                  <p> Get every single promotional & business update. </p>
+                  <div className="form-group mt-30">
+                    <span className="icon"> <i className="fas fa-envelope-open"></i> </span>
+                    <input type="text" className="form-control" placeholder="Email address" />
+                  </div>
+                  <a href="#" className="butn bg-main border-0 rounded-pill hover-shadow flex-shrink-0 mt-20 w-100 py-3" type="submit">
+                    <span className="text-white"> Subscribe Now <i className="fal fa-long-arrow-right ms-2"></i> </span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="foot py-4 border-1 border-top brd-gray text-center">
+          <p> Full Copyright & Design By <a href="#" className="fw-bold"> @ThemesCamp </a> - 2022 </p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/DataAnalysis/Header.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Navbar from 'components/Navbars/DataAnalysis';
+
+const Header = () => {
+  return (
+    <header className="style-8 bg-gray2">
+      <Navbar />
+      <div className="container">
+        <div className="content section-padding">
+          <div className="row align-items-center gx-0">
+            <div className="col-lg-6">
+              <div className="info">
+                <p className="fw-bold color-main text-decoration-underline text-uppercase wow fadeInUp"> We Bring Ideas To Life </p>
+                <h1 className="wow fadeInUp"> Ai & Data Machine <br /> Deep Solutions. </h1>
+                <div className="form wow fadeInUp">
+                  <h5> Subscribe & Get 7-Days Trail </h5>
+                  <div className="form-group mt-4">
+                    <span className="icon flex-shrink-0 ms-3">
+                      <i className="fas fa-envelope-open"></i>
+                    </span>
+                    <input type="text" className="form-control" placeholder="Business email address" />
+                    <button className="butn bg-orange1 border-0 rounded-pill hover-shadow flex-shrink-0" type="submit">
+                      <span className="text-white"> Get A Demo <i className="fal fa-long-arrow-right ms-2"></i> </span>
+                    </button>
+                  </div>
+                </div>
+                <p className="text-center color-999 mt-3"> *** We are not going to save your data </p>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="img mt-4 mt-lg-0 wow fadeIn">
+                <img src="/assets/img/header/3d_vector_head8.svg" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
+
+export default Header

src/components/DataAnalysis/Numbers.jsx

@@ -0,0 +1,72 @@
+import React, { useState, useRef } from 'react';
+import CountTo from '../CountTo';
+import numbers from 'data/DataAnalysis/numbers.json';
+
+const Numbers = () => {
+  const numbersSectionRef = useRef(null);
+  const [position] = useState({ from: 2500, to: 2750 });
+
+
+  return (
+    <section className="numbers style-8 pt-100">
+      <div className="container">
+        <div className="section-head style-8 text-center mb-80 wow fadeInUp">
+          <h6> support platform </h6>
+          <h3> Intregrations Platforms </h3>
+        </div>
+        <div className="content">
+          <div className="logo-icon wow zoomIn">
+            <img src="/assets/img/logo_home8_icon.png" alt="" />
+          </div>
+          <div className="plat-icons">
+            <a href="#" className="icon icon-shadow slide_up_down">
+              <img src="/assets/img/icons/numbers/1.png" alt="" />
+            </a>
+            <a href="#" className="icon slide_up_down">
+              <img src="/assets/img/icons/numbers/2.png" alt="" />
+            </a>
+            <a href="#" className="icon icon-shadow slide_up_down">
+              <img src="/assets/img/icons/numbers/3.png" alt="" />
+            </a>
+            <a href="#" className="icon slide_up_down">
+              <img src="/assets/img/icons/numbers/4.png" alt="" />
+            </a>
+            <a href="#" className="icon icon-shadow slide_up_down">
+              <img src="/assets/img/icons/numbers/5.png" alt="" />
+            </a>
+            <a href="#" className="icon icon-shadow slide_up_down">
+              <img src="/assets/img/icons/numbers/6.png" alt="" />
+            </a>
+          </div>
+          <img src="/assets/img/num8_circle.png" alt="" className="num8_circle rotate-center" />
+        </div>
+      </div>
+      <div className="numbers-btm" ref={numbersSectionRef}>
+        <div className="container">
+          <div className="numbers-content">
+            <div className="row">
+              {
+                numbers.map((number, idx) => (
+                  <div className="col-lg-3 col-sm-6" key={idx}>
+                    <div className="number-card style-8 mt-4 mt-lg-0 wow fadeInUp">
+                      <div className="icon">
+                        <img src={number.image} alt="" />
+                      </div>
+                      <div className="inf">
+                        <h3> <CountTo className="counter" from={0} to={number.value} speed={1500} position={position} /> { number.operator } </h3>
+                        <p>{ number.title }</p>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/icons/numbers/7.png" alt="" className="r_shape rotate-center" />
+    </section>
+  )
+}
+
+export default Numbers

src/components/DataAnalysis/Pricing.jsx

@@ -0,0 +1,107 @@
+import React, { useState } from 'react';
+import plans from 'data/DataAnalysis/plans.json';
+import Slider from 'rc-slider';
+import 'rc-slider/assets/index.css'
+
+const Pricing = () => {
+  const [range, setRange] = useState(20);
+
+  const sliderChange = (value) => {
+    setRange(value);
+  }
+
+  return (
+    <section className="pricing style-8 bg-gray2">
+      <div className="pricing-head wow fadeInUp">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-5">
+              <div className="section-head style-8">
+                <h6> our plans </h6>
+                <h3 className="text-white"> Minimalist Plans </h3>
+              </div>
+            </div>
+            <div className="col-lg-5">
+              <div className="position-relative">
+                <Slider
+                  value={range}
+                  onChange={sliderChange}
+                  railStyle={{ backgroundColor: '#151515', height: '5px' }}
+                  trackStyle={{ backgroundColor: `#0066FF`, height: '5px' }}
+                />
+                <p className="users-number"> <input type="text" id="amount" value={range} readOnly /> <span> users </span>  </p>
+              </div>
+            </div>
+            <div className="col-lg-2">
+              <div className="pricing-tabsHead text-center">
+                <div className="price-radios">
+                  <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="inlineRadioOptions" id="monthly-input"
+                      value="option1" />
+                    <label className="form-check-label" htmlFor="monthly-input">
+                      Monthly
+                    </label>
+                  </div>
+                  <div className="form-check form-check-inline">
+                    <input className="form-check-input" type="radio" name="inlineRadioOptions" id="yearly-input"
+                      value="option2" checked />
+                    <label className="form-check-label" htmlFor="yearly-input">
+                      yearly
+                    </label>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="pricing-body">
+        <div className="container">
+          <div className="content">
+            <div className="row">
+              {
+                plans.map((plan, index) => (
+                  <div className={`col-lg-4 ${plan.head ? '' : 'pt-60'} order-0 order-lg-0 wow fadeInUp`} data-wow-delay={`${index * 0.2}s`} key={index}>
+                    {
+                      plan.head && (
+                        <div className="popular-head">
+                          <p> { plan.head } </p>
+                        </div>
+                      )
+                    }
+                    <div className="pricing-card">
+                      <div className="pricing-title">
+                        <h2> { plan.title } </h2>
+                        <p> { plan.description } </p>
+                      </div>
+                      <div className="price">
+                        <p> Price: ${ plan.price } </p>
+                        <a href="#" className="price-btn"> Purchase Now <i className="fal fa-long-arrow-right"></i> </a>
+                      </div>
+                      <div className="pricing-info">
+                        <ul>
+                          {
+                            plan.features.map((feature, i) => (
+                              <li key={i}>
+                                <span className="icon">
+                                  <img src="/assets/img/icons/numbers/8.png" alt="" />
+                                </span>
+                                <span> { feature } </span>
+                              </li>
+                            ))
+                          }
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Pricing

src/components/DataAnalysis/Projects.jsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Autoplay, Keyboard, Navigation } from 'swiper';
+import projects from 'data/DataAnalysis/projects.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+import 'swiper/css/navigation';
+
+SwiperCore.use([Autoplay, Keyboard, Navigation]);
+
+const Projects = () => {
+  const [load, setLoad] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoad(true);
+    });
+  }, []);
+
+
+  return (
+    <section className="projects style-8 section-padding bg-gray2">
+      <div className="container">
+        <div className="section-head style-8 mb-80 wow fadeInUp">
+          <h6> case study </h6>
+          <h3> Completed Projects </h3>
+          <div className="arrows">
+            <div className="swiper-button-next">
+              <i className="fal fa-long-arrow-right"></i>
+            </div>
+            <div className="swiper-button-prev">
+              <i className="fal fa-long-arrow-left"></i>
+            </div>
+          </div>
+        </div>
+        <div className="content wow fadeIn">
+          <div className="projects-slider8">
+            {
+              load && (
+                <Swiper
+                  className="swiper-container"
+                  slidesPerView={1}
+                  spaceBetween={0}
+                  speed={1200}
+                  pagination={false}
+                  navigation={{
+                    nextEl: '.projects.style-8 .swiper-button-next',
+                    prevEl: '.projects.style-8 .swiper-button-prev',
+                  }}
+                  mousewheel={false}
+                  keyboard={true}
+                  autoplay={{
+                    delay: 4000
+                  }}
+                  loop={false}
+                >
+                  {
+                    projects.map((project, index) => (
+                      <SwiperSlide key={index}>
+                        <div className="project-card">
+                          <div className="row align-items-center">
+                            <div className="col-lg-6">
+                              <div className="img">
+                                <img src={project.image} alt="" className="main-img" />
+                                <div className="tags">
+                                  <a href="#"> {project.tag} </a>
+                                </div>
+                                <img src="/assets/img/about/about7_chart.png" alt="" className="img-chart slide_up_down" />
+                              </div>
+                            </div>
+                            <div className="col-lg-6">
+                              <div className="info">
+                                <div className="logo">
+                                  <img src={project.logo} alt="" />
+                                </div>
+                                <h4 className="title"> {project.title} </h4>
+                                <p> {project.text} </p>
+                                <div className="proj-det">
+                                  <div className="item">
+                                    <p> Client Name </p>
+                                    <h6> {project.client.name} </h6>
+                                  </div>
+                                  <div className="item">
+                                    <p> Budget </p>
+                                    <h6> {project.client.budget} </h6>
+                                  </div>
+                                  <div className="item">
+                                    <p> Estimate </p>
+                                    <h6> {project.client.estimate} </h6>
+                                  </div>
+                                  <a href="#" className="icon">
+                                    <i className="fal fa-long-arrow-right"></i>
+                                  </a>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </SwiperSlide>
+                    ))
+                  }
+                </Swiper>
+              )
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Projects

src/components/DataAnalysis/Services.jsx

@@ -0,0 +1,95 @@
+import React, { useState, useEffect } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Autoplay } from 'swiper';
+import services from 'data/DataAnalysis/services.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+
+SwiperCore.use([Autoplay]);
+
+const Services = () => {
+  const [load, setLoad] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoad(true);
+    });
+  }, []);
+
+  return (
+    <section className="services style-8 section-padding">
+      <div className="container">
+        <div className="section-head style-8 text-center mb-80 wow fadeInUp">
+          <h6> our services </h6>
+          <h3> Our Experties Field </h3>
+        </div>
+      </div>
+      <div className="content wow fadeInUp">
+        <div className="services-slider8 pb-60">
+          {
+            load && (
+              <Swiper
+                spaceBetween={50}
+                speed={10000}
+                autoplay={{
+                  delay: 1
+                }}
+                loop={true}
+                breakpoints={{
+                  0: {
+                    slidesPerView: 1,
+                  },
+                  480: {
+                    slidesPerView: 1,
+                  },
+                  787: {
+                    slidesPerView: 1,
+                  },
+                  991: {
+                    slidesPerView: 3,
+                  },
+                  1200: {
+                    slidesPerView: 4,
+                  }
+                }}
+              >
+                {
+                  services.map((service, index) => (
+                    <SwiperSlide key={index}>
+                      <div className="service-card style-8">
+                        <div className="icon">
+                          <img src={service.image} alt="" />
+                        </div>
+                        <div className="info">
+                          <h5>{service.title}</h5>
+                          <p>{service.text}</p>
+                          <a href="#"> Read More </a>
+                        </div>
+                      </div>
+                    </SwiperSlide>
+                  ))
+                }
+              </Swiper>
+            )
+          }
+        </div>
+        <div className="container">
+          <div className="btm-info pt-20 border-1 border-top brd-gray wow fadeInDown">
+            <div className="row align-items-center">
+              <div className="col-lg-6">
+                <h5> See Plan Details And Pricing For More Informations </h5>
+              </div>
+              <div className="col-lg-6 text-lg-end">
+                <a href="#" className="pe-4 me-4 border-1 border-end brd-gray"> <i className="fas fa-server color-main me-1"></i> Daily Backups </a>
+                <a href="#"> <i className="fas fa-shield color-main me-1"></i> Free Migrations </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Services

src/components/DataAnalysis/Testimonials.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import testimonials from 'data/DataAnalysis/testimonials.json';
+
+const Testimonials = () => {
+  return (
+    <section className="testimonials style-8 section-padding bg-gray2">
+      <div className="container">
+        <div className="section-head text-center style-8 mb-80 wow fadeInUp">
+          <h6> testimonials </h6>
+          <h3> Happy User Reviews </h3>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              testimonials.map((testimonial, index) => (
+                <div className="col-lg-4" key={index}>
+                  <div className="testi-card wow fadeInUp">
+                    <div className="info">
+                      <div className="stars">
+                        { Array(testimonial.stars).fill().map((_, i) => <i className="fas fa-star" key={i}></i>) }
+                      </div>
+                      <p> “ { testimonial.text } ” </p>
+                      <img src="/assets/img/icons/qout8.png" alt="" className="icon" />
+                    </div>
+                    <div className="author mt-40">
+                      <div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
+                        <img src={ testimonial.author.image } alt="" />
+                      </div>
+                      <div className="inf">
+                        <p> { testimonial.author.position } </p>
+                        <h6> { testimonial.author.name } </h6>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Testimonials

src/components/Digital/About.jsx

@@ -0,0 +1,82 @@
+import React, { useState, useEffect, useRef } from 'react';
+import CountTo from '../CountTo';
+import { Link } from 'gatsby';
+import aboutData from 'data/Digital/about.json';
+
+const About = () => {
+  const numbersSectionRef = useRef(null);
+  const [position, setPosition] = useState({ from: 300, to: 500 });
+
+  useEffect(() => {
+    const numbersSection = numbersSectionRef.current;
+    const numbersSectionHeight = numbersSection.offsetHeight;
+    const numbersSectionTop = numbersSection.offsetTop;
+
+    const Position = { from: numbersSectionTop - numbersSectionHeight - 100, to: numbersSectionTop + numbersSectionHeight };
+
+    setPosition(Position);
+  }, []);
+
+  return (
+    <section className="about style-1" data-scroll-index="1">
+      <div className="container">
+        <div className="content">
+          <div className="about-logos d-flex align-items-center justify-content-between border-bottom border-1 brd-light pb-20">
+            { 
+              aboutData.logos.map((logo, index) => (
+                <a href="#" className="logo wow fadeInUp" data-wow-delay={index * 0.2 + "s"} key={index}>
+                  <img src={logo} alt="" />
+                </a>
+              ))
+            }
+          </div>
+          <div className="about-info">
+            <div className="row justify-content-between">
+              <div className="col-lg-5">
+                <div className="title">
+                  <h3 className=" wow fadeInUp slow">“Technology is best when it brings people  together.”</h3>
+                  <small className="wow fadeInUp slow fw-bold">Patricia Cross</small>
+                </div>
+              </div>
+              <div className="col-lg-6">
+                <div className="info">
+                  <h6 className=" wow fadeInUp slow">
+                    We can help to maintain and modernize your IT infrastructure  & solve various infrastructure-specific issues a business may face.
+                  </h6>
+                  <p className=" wow fadeInUp slow">
+                    Iteck Co is the partner of choice for many of the world’s leading  enterprises, SMEs and technology challengers. We help businesses  elevate their value through custom software development, product  design, QA and consultancy services.
+                  </p>
+                  <Link to="/page-about-5" className="btn btn-outline-light mt-5 sm-butn wow fadeInUp slow">
+                    <span>more about us</span>
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="about-numbers" ref={numbersSectionRef}>
+            <div className="row">
+              {
+                aboutData.numbers.map((item, index) => (
+                  <div className="col-lg-3 col-sm-6" key={index}>
+                    <div className="num-item wow fadeInUp" data-wow-delay="0">
+                      <div className="num">
+                        <CountTo className="counter" from={0} to={item.number} speed={1500} position={position} />
+                        { item.operator && (<span>{typeof item.operator === 'string' ? item.operator : <i className="fas fa-plus"></i>}</span>) }
+                      </div>
+                      <div className="inf">
+                        { item.info }
+                      </div>
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+          <img src="/assets/img/about/num_shap.png" alt="" className="about_shap" />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default About

src/components/Digital/Blog.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Pagination, Navigation, Autoplay } from 'swiper';
+import blogs from 'data/Digital/blog.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+SwiperCore.use([Pagination, Navigation, Autoplay]);
+
+const Blog = () => {
+  const showDetails = (event) => {
+    const detailsEl = event.currentTarget.querySelector('.text');
+    detailsEl.style.display = "block";
+  }
+
+  const hideDetails = (event) => {
+    const detailsEl = event.currentTarget.querySelector('.text');
+    detailsEl.style.display = "none";
+  }
+
+  return (
+    <section className="blog section-padding bg-gray style-1" data-scroll-index="6">
+      <div className="container">
+        <div className="row">
+          <div className="col offset-lg-1">
+            <div className="section-head mb-60">
+              <h6 className="color-main text-uppercase wow fadeInUp">our press</h6>
+              <h2 className="wow fadeInUp">
+                Latest Posts <span className="fw-normal">From Our Press</span>
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="content">
+          <div className="blog_slider">
+            <Swiper
+              className="swiper-container"
+              slidesPerView={3}
+              spaceBetween={30}
+              speed={1000}
+              pagination={{
+                el: ".blog_slider .swiper-pagination"
+              }}
+              navigation={{
+                nextEl: '.blog_slider .swiper-button-next',
+                prevEl: '.blog_slider .swiper-button-prev'
+              }}
+              mousewheel={false}
+              keyboard={true}
+              autoplay={{
+                delay: 4000
+              }}
+              breakpoints={{
+                0: {
+                  slidesPerView: 1
+                },
+                480: {
+                  slidesPerView: 2
+                },
+                787: {
+                  slidesPerView: 2
+                },
+                991: {
+                  slidesPerView: 3
+                },
+                1200: {
+                  slidesPerView: 4
+                }
+              }}
+            >
+              {
+                blogs.map((blog, index) => (
+                  <SwiperSlide key={index}>
+                    <div className="blog_box" onMouseMove={showDetails} onMouseLeave={hideDetails}>
+                      <div className="tags">
+                        <a href="#">{ blog.type }</a>
+                      </div>
+                      <div className="img">
+                        <img src={blog.cover} alt="" />
+                      </div>
+                      <div className="info">
+                        <h6><Link to="/page-single-post-5">{ blog.title }</Link></h6>
+                        <div className="auther">
+                          <span>
+                            <img className="auther-img" src={blog.userPic} alt="" />
+                            <small><a href="#">By { blog.user }</a></small>
+                          </span>
+                          <span>
+                            <i className="bi bi-calendar2"></i>
+                            <small><a href="#">{ blog.date }</a></small>
+                          </span>
+                        </div>
+                        <div className="text">
+                          { blog.details } [...]
+                        </div>
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                ))
+              }
+            </Swiper>
+
+            <div className="swiper-button-prev"></div>
+            <div className="swiper-button-next"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Blog

src/components/Digital/ChooseUs.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import chooseUsData from 'data/Digital/chooseus.json';
+
+const ChooseUs = () => {
+  return (
+    <section className="choose-us section-padding pt-0 style-1" data-scroll-index="3">
+      <div className="container">
+        <div className="row justify-content-end">
+          <div className="col-lg-5">
+            <div className="info">
+              <div className="section-head mb-60">
+                <h6 className="color-main text-uppercase wow fadeInUp">Why choose us</h6>
+                <h2 className="wow fadeInUp">
+                  Boost Your Business <span className="fw-normal">With New Tech</span>
+                </h2>
+              </div>
+              <div className="text">
+                Our team can assist you in transforming your business through latest tech capabilities to stay ahead of the curve.
+              </div>
+              <ul>
+                {
+                  chooseUsData.map((item, index) => (
+                    <li className="wow fadeInUp" key={index}>
+                      <span className="icon">
+                        <i className="bi bi-check2"></i>
+                      </span>
+                      <h6>
+                        { item }
+                      </h6>
+                    </li>
+                  ))
+                }
+              </ul>
+
+              <Link to="/page-about-5" className="btn butn-gard border-0 text-white wow fadeInUp">
+                <span>How We Works</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/choose_us/choose_lines.svg" alt="" className="choose-us-img" />
+      <img src="/assets/img/choose_us/choose_brands.png" alt="" className="choose-us-brands" />
+      <img src="/assets/img/choose_us/choose_bubbles.png" alt="" className="choose-us-bubbles" />
+    </section>
+  )
+}
+
+export default ChooseUs

src/components/Digital/Contact.jsx

@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import contactInfo from 'data/Digital/contact.json';
+
+const Contact = () => {
+  const [formData, setFormdata] = useState({
+    name: "",
+    email: "",
+    option: "",
+    message: ""
+  });
+
+  const handleFormChange = (e) => {
+    setFormdata(prev => ({
+      ...prev,
+      [e.target.name]: e.target.value
+    }))
+  }
+
+  const handleFormSubmit = async (e) => {
+    e.preventDefault();
+    const formValues = new FormData();
+
+    formValues.append('name', formData.name);
+    formValues.append('email', formData.email);
+    formValues.append('option', formData.option);
+    formValues.append('message', formData.message);
+    
+    const res = await axios.post('/contact.php', formValues)
+      .catch(err => alert(err.message));
+
+    if (!res) return;
+
+    alert('Form submitted successfully.')
+  }
+
+
+  return (
+    <section className="contact section-padding bg-gradient style-1" data-scroll-index="7">
+      <div className="container">
+        <div className="section-head mb-60 text-center">
+          <h6 className="text-white text-uppercase wow fadeInUp">contact us</h6>
+          <h2 className="wow fadeInUp text-white">
+            Request Free <span className="fw-normal">Consultancy</span>
+          </h2>
+        </div>
+        <div className="content">
+          <div className="row justify-content-center">
+            <div className="col-lg-5">
+              <div className="contact_info text-white">
+                <p className="wow fadeInUp">Hotline 24/7</p>
+                <h4 className="wow fadeInUp">{ contactInfo.phone }</h4>
+                <ul>
+                  <li className="wow fadeInUp">
+                    <strong>Address : </strong> { contactInfo.address }
+                  </li>
+                  <li className="wow fadeInUp">
+                    <strong>Email : </strong> { contactInfo.email }
+                  </li>
+                  <li className="wow fadeInUp">
+                    <strong>Fax : </strong> { contactInfo.fax }
+                  </li>
+                  <li className="wow fadeInUp">
+                    <strong>Work Hour : </strong> { contactInfo.workingHours }
+                  </li>
+                </ul>
+                <a href="#" className="wow fadeInUp">get direction</a>
+              </div>
+            </div>
+            <div className="col-lg-6 offset-lg-1">
+              <form className="contact_form" action="contact.php" method="post" onSubmit={handleFormSubmit}>
+                <div className="row gx-3">
+                  <div className="col-lg-6">
+                    <div className="form-group mb-3 wow fadeInUp">
+                      <input type="text" name="name" className="form-control" placeholder="name *" onChange={handleFormChange} />
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="form-group mb-3 wow fadeInUp">
+                      <input type="text" name="email" className="form-control" placeholder="Email Address *" onChange={handleFormChange} />
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <div className="form-group mb-3 wow fadeInUp">
+                      <select name="option" className="form-select" aria-label="Default select example" defaultValue="Your inquiry about" onChange={handleFormChange}>
+                        <option>Your inquiry about</option>
+                        <option value="1">One</option>
+                        <option value="2">Two</option>
+                        <option value="3">Three</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <div className="form-group mb-3 wow fadeInUp">
+                      <textarea className="form-control" name="message" rows="4" placeholder="Write your inquiry here" onChange={handleFormChange}></textarea>
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <div className="form-check mb-4 wow fadeInUp">
+                      <input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" />
+                      <label className="form-check-label text-light small" htmlFor="flexCheckDefault">
+                        By submitting, i’m agreed to the <a href="#" className="text-decoration-underline">Terms & Conditons</a>
+                      </label>
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <input type="submit" value="Request Now" className="btn btn-dark wow fadeInUp text-light fs-14px"></input>
+                  </div>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/contact_globe.svg" alt="" className="contact_globe" />
+    </section>
+  )
+}
+
+export default Contact

src/components/Digital/Footer.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import footerInfo from 'data/Digital/footer.json';
+
+const Footer = () => {
+  return (
+    <footer className="style-1">
+      <div className="container">
+        <div className="content">
+          <div className="row justify-content-center">
+            <div className="col-lg-4">
+              <div className="foot_info">
+                <a href="#" className="logo mb-3">
+                  <img src="/assets/img/logo_cl.png" alt="" />
+                </a>
+                <div className="text mb-4">
+                  Best IT Solutions & Technology WordPress <br /> Theme for Your Busines
+                </div>
+                <ul className="mb-4">
+                  <li className="d-flex">
+                    <i className="bi bi-house me-3"></i>
+                    <a href="#">
+                      <span>{ footerInfo.address }</span>
+                    </a>
+                  </li>
+                  <li className="d-flex">
+                    <i className="bi bi-envelope me-3"></i>
+                    <a href="#">
+                      <span>{ footerInfo.email }</span>
+                    </a>
+                  </li>
+                  <li className="d-flex">
+                    <i className="bi bi-phone me-3"></i>
+                    <a href="#">
+                      <span>{ footerInfo.phone }</span>
+                    </a>
+                  </li>
+                </ul>
+                <div className="social_icons">
+                  <a href="#">
+                    <i className="fab fa-twitter"></i>
+                  </a>
+                  <a href="#">
+                    <i className="fab fa-facebook-f"></i>
+                  </a>
+                  <a href="#">
+                    <i className="fab fa-linkedin-in"></i>
+                  </a>
+                  <a href="#">
+                    <i className="fab fa-github"></i>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-2">
+              <div className="links">
+                <div className="cont">
+                  <h6 className="link_title">
+                    Services
+                  </h6>
+                  <ul>
+                    {
+                      footerInfo.services.map((item, index) => (
+                        <li key={index}>
+                          <a href="#">{ item }</a>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-2">
+              <div className="links">
+                <div className="cont">
+                  <h6 className="link_title">
+                    Information
+                  </h6>
+                  <ul>
+                    {
+                      footerInfo.information.map((item, index) => (
+                        <li key={index}>
+                          <a href="#">{ item }</a>
+                        </li>
+                      ))
+                    }
+                  </ul>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-4">
+              <div className="foot_subscribe">
+                <h6 className="link_title">
+                  Newsletter
+                </h6>
+                <p>
+                  Register now to get latest updates on  promotions & coupons.
+                </p>
+                <div className="input-group my-4">
+                  <input type="text" className="form-control" placeholder="Enter your email" aria-label="Enter your email" aria-describedby="button-addon2" />
+                  <button className="btn butn-gard border-0 text-white px-3" type="button" id="button-addon2">
+                    <span>Subscribe</span>
+                  </button>
+                </div>
+                <p className="fst-italic">By subscribing, you accepted the our <a href="#" className="text-decoration-underline"> Policy</a></p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row justify-content-center">
+          <div className="col-lg-12">
+            <div className="foot">
+              <p>
+                © 2022 Copyrights by <a href="#" className="text-white text-decoration-underline">Iteck Co.</a> All Rights Reserved by <a href="#" className="text-white text-decoration-underline"> ThemesCamp </a>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/footer/foot_l.png" alt="" className="foot_l" />
+      <img src="/assets/img/footer/foot_r.png" alt="" className="foot_r" />
+    </footer>
+  )
+}
+
+export default Footer

src/components/Digital/Header.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { Link } from 'gatsby';
+import ModalVideo from "react-modal-video";
+import "react-modal-video/css/modal-video.css";
+
+const Header = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  const openVideo = (e) => {
+    e.preventDefault();
+    setOpen(true);
+  }
+
+  return (
+    <header className="section-padding style-1" data-scroll-index="0">
+      <div className="container">
+        <div className="content">
+          <div className="row">
+            <div className="col-lg-6">
+              <div className="info">
+                <div className="section-head mb-60">
+                  <h6 className="color-main text-uppercase">Iteck agency</h6>
+                  <h2>
+                    Technology & IT <span className="fw-normal">Solutions</span>
+                  </h2>
+                </div>
+                <div className="text">
+                  We transform businesses of most major sectors with powerful and adaptable digital solutions that satisfy the needs of today.
+                </div>
+                <div className="bttns mt-5">
+                  <Link to="/page-services-5" className="btn btn-dark">
+                    <span>our services</span>
+                  </Link>
+                  <a href="https://youtu.be/pGbIOC83-So?t=21" className="vid-btn" onClick={openVideo}>
+                    <i className="bi bi-play wow heartBeat infinite slow"></i>
+                    <span>Iteck’s <br /> Showreels</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-5 offset-lg-1">
+              <div className="img">
+                <img src="/assets/img/header/head.png" alt="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/header/head_shape_r.png" alt="" className="head-shape-r wow" />
+      <img src="/assets/img/header/head_shape_l.png" alt="" className="head-shape-l wow" />
+      {
+        typeof window !== "undefined" && 
+          (
+            <ModalVideo
+              channel="youtube"
+              autoplay
+              isOpen={isOpen}
+              videoId="pGbIOC83-So"
+              onClose={() => setOpen(false)}
+            />
+          )
+      }
+    </header>
+  )
+}
+
+export default Header

src/components/Digital/Portfolio.jsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Navigation, Pagination, Autoplay } from 'swiper';
+import portfolios from 'data/Digital/portfolio.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+SwiperCore.use([Navigation, Pagination, Autoplay]);
+
+const Portfolio = () => {
+  return (
+    <section className="portfolio section-padding bg-gray style-1" data-scroll-index="4">
+      <div className="container">
+        <div className="row">
+          <div className="col offset-lg-1">
+            <div className="section-head mb-60">
+              <h6 className="color-main text-uppercase wow fadeInUp">Portfolio</h6>
+              <h2 className="wow fadeInUp">
+                Latest Projects <span className="fw-normal">From Our Team</span>
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="content wow fadeIn slow">
+          <div className="portfolio-slider">
+            <Swiper
+              className="swiper-container"
+              slidesPerView={3}
+              spaceBetween={30}
+              speed={1000}
+              pagination={{
+                el: ".portfolio-slider .swiper-pagination"
+              }}
+              navigation={{
+                nextEl: '.portfolio-slider .swiper-button-next',
+                prevEl: '.portfolio-slider .swiper-button-prev'
+              }}
+              mousewheel={false}
+              keyboard={true}
+              autoplay={{
+                delay: 4000
+              }}
+              loop={true}
+              breakpoints={{
+                0: {
+                  slidesPerView: 1
+                },
+                480: {
+                  slidesPerView: 2
+                },
+                787: {
+                  slidesPerView: 2
+                },
+                991: {
+                  slidesPerView: 3
+                },
+                1200: {
+                  slidesPerView: 3
+                }
+              }}
+            >
+              {
+                portfolios.map((portfolio, index) => (
+                  <SwiperSlide key={index}>
+                    <div className="portfolio-card">
+                      <div className="img">
+                        <img src={portfolio.image} alt="" />
+                      </div>
+                      <div className="info">
+                        <h5>
+                          <Link to="/page-single-project-5">
+                            { portfolio.title }
+                          </Link>
+                        </h5>
+                        <small className="d-block color-main text-uppercase">
+                          {
+                            portfolio.types.map((type, i) => (<a href="#" className="me-1" key={i}>{ type }</a>))
+                          }
+                        </small>
+                        <div className="text">
+                          { portfolio.text }
+                        </div>
+                        <div className="tags">
+                          {
+                            portfolio.tags.map((tag, i) => (<a href="#" className="me-1" key={i}>{ tag }</a>))
+                          }
+                        </div>
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                ))
+              }
+            </Swiper>
+
+            <div className="swiper-pagination"></div>
+
+            <div className="swiper-button-next"></div>
+            <div className="swiper-button-prev"></div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/projects/prog/shap_r.png" alt="" className="shap_r" />
+      <img src="/assets/img/projects/prog/shap_l.png" alt="" className="shap_l" />
+    </section>
+  )
+}
+
+export default Portfolio

src/components/Digital/Services.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import services from 'data/Digital/services.json';
+
+const Services = () => {
+  return (
+    <section className="services section-padding style-1" data-scroll-index="2">
+      <div className="container">
+        <div className="row">
+          <div className="col offset-lg-1">
+            <div className="section-head mb-60">
+              <h6 className="color-main text-uppercase wow fadeInUp">our services</h6>
+              <h2 className="wow fadeInUp">
+                Perfect IT Solutions <span className="fw-normal">For Your Business</span>
+              </h2>
+            </div>
+          </div>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              services.map((service, index) => (
+                <div className="col-lg-4" key={index}>
+                  <div className="service-box mb-4 wow fadeInUp" data-wow-delay={index * 0.2 + "s"}>
+                    <h5>
+                      <Link to="/page-services-5">{ service.title }</Link>
+                      <span className="num">{ service.number }</span>
+                    </h5>
+                    <div className="icon">
+                      <img src={service.icon} alt="" />
+                    </div>
+                    <div className="info">
+                      <div className="text">
+                        { service.text }
+                      </div>
+                      <div className="tags">
+                        {
+                          service.tags.map((tag, index) => (
+                            <a href="#" className="me-1" key={index}>{ tag }</a>
+                          ))
+                        }
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/services/ser_shap_l.png" alt="" className="ser_shap_l" />
+      <img src="/assets/img/services/ser_shap_r.png" alt="" className="ser_shap_r" />
+    </section>
+  )
+}
+
+export default Services

src/components/Digital/Team.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import teamMembers from 'data/Digital/team.json'
+
+const Team = () => {
+  return (
+    <section className="team section-padding pt-0 style-1">
+      <div className="container">
+        <div className="section-head mb-60 text-center">
+          <h6 className="color-main text-uppercase wow fadeInUp">meet our expert</h6>
+          <h2 className="wow fadeInUp">
+            Clients Satisfaction, <span className="fw-normal">Our Reputation</span>
+          </h2>
+        </div>
+        <div className="content">
+          {
+            teamMembers.map((member, index) => (
+              <div className="team_box wow fadeInUp" data-wow-delay={index * 0.2 + "s"} key={index}>
+                <div className="avatar">
+                  <img src={member.picture} alt="" />
+                </div>
+                <div className="info">
+                  <h6><a href="#">{ member.name }</a></h6>
+                  <small>{ member.position }</small>
+                  <div className="social_icons">
+                    <a href="#">
+                      <i className="fab fa-twitter"></i>
+                    </a>
+                    <a href="#">
+                      <i className="fab fa-facebook-f"></i>
+                    </a>
+                    <a href="#">
+                      <i className="fab fa-linkedin-in"></i>
+                    </a>
+                    <a href="#">
+                      <i className="fab fa-github"></i>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+        <div className="bttns mt-4 text-center">
+          <Link to="/page-about-5" className="btn btn-dark wow zoomIn me-2">
+            <span>See All Team</span>
+          </Link>
+          <Link to="/page-contact-5" className="btn butn-gard border-0 text-white wow zoomIn">
+            <span>Join Our Team</span>
+          </Link>
+        </div>
+      </div>
+      <img src="/assets/img/team/team_shap.png" alt="" className="team_shap" />
+    </section>
+  )
+}
+
+export default Team

src/components/Digital/Testimonials.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import ModalVideo from "react-modal-video";
+import "react-modal-video/css/modal-video.css";
+import testimonials from 'data/Digital/testimonials.json'
+
+const Testimonials = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  const openVideo = (e) => {
+    e.preventDefault();
+    setOpen(true);
+  }
+
+  return (
+    <section className="testimonials section-padding style-1" data-scroll-index="5">
+      <div className="container">
+        <div className="section-head mb-60 text-center">
+          <h6 className="color-main text-uppercase wow fadeInUp">testimonials</h6>
+          <h2 className="wow fadeInUp">
+            The Trust <span className="fw-normal">From Clients</span>
+          </h2>
+        </div>
+        <div className="content">
+          <div className="row">
+            <div className="col-lg-5">
+              <div className="vid_img mb-2 mb-md-0 wow zoomIn slow">
+                <img src="/assets/img/testimonials/testi.jpeg" alt="" />
+                <a href="https://youtu.be/pGbIOC83-So?t=21" className="play_icon" onClick={openVideo}>
+                  <i className="bi bi-play"></i>
+                </a>
+                <div className="img_info wow fadeInUp">
+                  <h4><a href="#">Casper Defloy</a></h4>
+                  <small><a href="#">Tech Leader at Esty Inc</a></small>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-7">
+              <div className="info wow fadeInUp">
+                {
+                  testimonials.map((testimonial, index) => (
+                    <div className={`client_card ${index !== testimonials.length - 1 ? 'mb-2':''}`} data-wow-delay={index * 0.2 + "s"} key={index}>
+                      <div className="user_img">
+                        <img src={testimonial.userImg} alt="" />
+                      </div>
+                      <div className="inf_content">
+                        <div className="rate_stars">
+                          {
+                            Array(testimonial.stars).fill().map((_,i) => (<i key={i} className="bi bi-star-fill"></i>))
+                          }
+                        </div>
+                        <h6>
+                          “{ testimonial.comment }”
+                        </h6>
+                        <p>{ testimonial.username }  <span className="text-muted">/  { testimonial.position }</span></p>
+                      </div>
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {
+        typeof window !== "undefined" && 
+          (
+            <ModalVideo
+              channel="youtube"
+              autoplay
+              isOpen={isOpen}
+              videoId="pGbIOC83-So"
+              onClose={() => setOpen(false)}
+            />
+          )
+      }
+    </section>
+  )
+}
+
+export default Testimonials

src/components/FadeInOut/index.jsx

@@ -0,0 +1,104 @@
+import React, { Component } from "react";
+
+const UNMOUNTED = "unmounted";
+const EXITED = "exited";
+const ENTERING = "entering";
+const ENTERED = "entered";
+const EXITING = "exiting";
+
+const transitionStyles = {
+  entering: { opacity: 0 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 }
+};
+
+class FadeInOut extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = { status: UNMOUNTED };
+  }
+
+  componentDidMount() {
+    const { show } = this.props;
+    if (show) {
+      this.performEnter();
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    let nextStatus = null;
+    if (prevProps !== this.props) {
+      const { status } = this.state;
+      if (this.props.show) {
+        if (status !== ENTERING && status !== ENTERED) {
+          nextStatus = ENTERING;
+        }
+      } else {
+        if (status === ENTERING || status === ENTERED) {
+          nextStatus = EXITING;
+        }
+      }
+    }
+    this.updateStatus(nextStatus);
+  }
+
+  updateStatus(nextStatus) {
+    if (nextStatus !== null) {
+      if (nextStatus === ENTERING) {
+        this.performEnter();
+      } else {
+        this.performExit();
+      }
+    } else if (this.state.status === EXITED) {
+      this.setState({ status: UNMOUNTED });
+    }
+  }
+
+  performEnter() {
+    this.setState({ status: ENTERING }, () => {
+      setTimeout(() => {
+        this.setState({ status: ENTERED }, () => {});
+      }, 0);
+    });
+  }
+
+  performExit() {
+    const { duration } = this.props;
+    this.setState({ status: EXITING }, () => {
+      setTimeout(() => {
+        this.setState({ status: EXITED }, () => {});
+      }, duration);
+    });
+  }
+
+  render() {
+    const { status } = this.state;
+    if (status === UNMOUNTED) {
+      return null;
+    }
+
+    const { children, duration, className, style } = this.props;
+    return (
+      <div
+        className={className}
+        style={{
+          ...style,
+          transition: `opacity ${duration}ms ease-in-out`,
+          opacity: 0.1,
+          ...transitionStyles[status]
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+}
+
+FadeInOut.defaultProps = {
+  show: false,
+  duration: 300
+};
+
+export default FadeInOut;

src/components/Freelancer/About.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+
+const About = () => {
+  return (
+    <section className="about style-13">
+      <div className="container">
+        <div className="content">
+          <div className="row">
+            <div className="col-lg-8">
+              <div className="info">
+                <h5> About Me </h5>
+                <div className="text">
+                  I’m an freelance ui & ux designer with over two decades of experience. I’ve covered both Milan’s fashion week and the US primaries in the same year. Above all, I believe that fair and free press is fundamental to with healthy society the core ideal behind my work.
+                </div>
+                <div className="logos">
+                  <img src="/assets/img/about/logo1.png" alt="" />
+                  <img src="/assets/img/about/logo2.png" alt="" />
+                  <img src="/assets/img/about/logo3.png" alt="" />
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-4">
+              <div className="about-contact">
+                <div className="item mt-5 mt-lg-0">
+                  <div className="inf">
+                    <p> Full Name </p>
+                    <h6> Miranda H. Halim </h6>
+                  </div>
+                  <div className="icon">
+                    <img src="/assets/img/icons/ab_13_1.png" alt="" />
+                  </div>
+                </div>
+                <div className="item mt-30">
+                  <div className="inf">
+                    <p> Email Address </p>
+                    <h6> info@webmail.com </h6>
+                  </div>
+                  <div className="icon">
+                    <img src="/assets/img/icons/ab_13_2.png" alt="" />
+                  </div>
+                </div>
+                <div className="item mt-30">
+                  <div className="inf">
+                    <p> Phone </p>
+                    <h6> +111 222 333 44 </h6>
+                  </div>
+                  <div className="icon">
+                    <img src="/assets/img/icons/ab_13_3.png" alt="" />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default About

src/components/Freelancer/Blog.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import blogs from 'data/Freelancer/blog.json';
+
+const Blog = () => {
+  return (
+    <section className="blog section-padding style-13">
+      <div className="container">
+        <div className="section-head text-center mb-50 style-13">
+          <h6> news </h6>
+          <h2> Blog & Insights </h2>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              blogs.map((blog, idx) => (
+                <div className="col-lg-4" key={idx}>
+                  <div className="blog-item">
+                    <div className="cont">
+                      <div className="tags">
+                        {
+                          blog.tags.map((tag, i) => (<a href="#" key={i}> {tag} </a>))
+                        }
+                      </div>
+                      <h5> <a href="#"> {blog.title}... </a> </h5>
+                      <div className="author d-flex align-items-center">
+                        <div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
+                          <img src={blog.authorPic} alt="" />
+                        </div>
+                        <div className="inf">
+                          <h6 className="fw-bold mb-1"> <a href="#"> {blog.authorName} </a> </h6>
+                          <p className=""> <span className="color-999"> Date: </span> <a href="#"> {blog.date} </a> </p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Blog

src/components/Freelancer/Contact.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+const Contact = () => {
+  return (
+    <section className="contact style-13">
+      <div className="container">
+        <div className="content">
+          <div className="row gx-0 justify-content-between">
+            <div className="col-lg-5">
+              <div className="contact-info">
+                <div className="section-head side-title mb-40 style-13">
+                  <h6> call to action </h6>
+                  <h2> Any Project On Mind </h2>
+                </div>
+                <p> A portfolio is a collection of financial investments like stocks, bonds, commodities, cash, & cash equivalent including closed-end funds. </p>
+                <ul className="mt-30">
+                  <li>
+                    <p> <strong>  Address : </strong> 58 Howard Street, San Francisco, CA 941 </p>
+                  </li>
+                  <li>
+                    <p> <strong>  Fax : </strong> 888 999 000 99, 000 999 888 99 </p>
+                  </li>
+                  <li>
+                    <p> <strong>  Email : </strong> info@webmail.com, jobs@webmail.com </p>
+                  </li>
+                  <li>
+                    <p> <strong>  Work Hour : </strong> Mon - Sat : 9:00 - 18:00 </p>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="contact-form mt-4 mt-lg-0">
+                <div className="row gx-3 align-items-center">
+                  <div className="col-lg-6">
+                    <div className="form-group">
+                      <input type="text" className="form-control" placeholder="Full name" />
+                      <span className="icon"> <i className="fas fa-user"></i> </span>
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="form-group">
+                      <input type="text" className="form-control" placeholder="Email address" />
+                      <span className="icon"> <i className="fas fa-envelope"></i> </span>
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <div className="form-group">
+                      <select name="" id="" className="form-control form-select">
+                        <option value=""> Enquiry Subject </option>
+                        <option value=""> Enquiry Subject </option>
+                        <option value=""> Enquiry Subject </option>
+                      </select>
+                      <span className="icon"> <i className="fas fa-book"></i> </span>
+                    </div>
+                  </div>
+                  <div className="col-lg-12">
+                    <div className="form-group">
+                      <textarea name="" rows="5" className="form-control" placeholder="Message"></textarea>
+                      <span className="icon"> <i className="fas fa-pen"></i> </span>
+                    </div>
+                  </div>
+                </div>
+                <a href="#0" className="btn rounded-pill text-white bg-orange3" target="_blank">
+                  <small> Submit Request </small>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Contact