first commit

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,19 @@
+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"));
+}
+
+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" 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">
+              <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">
+              <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" 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/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">
+                <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" 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" 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/IT/Blog.jsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import blogs from 'data/IT/blog.json';
+
+const Blog = () => {
+  const firstBlog = blogs[0];
+  const blogsList = blogs.slice(1);
+
+  return (
+    <section className="blog style-2 section-padding" data-scroll-index="7">
+      <div className="container">
+        <div className="section-head mb-30 text-center">
+          <h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70">editorial</h2>
+        </div>
+        <div className="row justify-content-center">
+          <div className="col-lg-10">
+            <div className="content">
+              <div className="row gx-5">
+                <div className="col-lg-6 border-end brd-light">
+                  <div className="card border-0 bg-transparent rounded-0 text-white mb-4 mb-lg-0">
+                    <div className="img">
+                      <img src={firstBlog.cover} className="card-img-top" alt="..." />
+                    </div>
+                    <div className="card-body px-0">
+                      <small className="d-block date text mt-2">
+                        <a href="#" className="text-uppercase border-end brd-light pe-3 me-3">News</a>
+                        <i className="bi bi-clock me-1"></i>
+                        <a href="#" className="op-8">Posted on { firstBlog.time }</a>
+                      </small>
+                      <h4 className="fw-normal text-white mt-2">
+                        <Link to="/page-single-post-5">{ firstBlog.title }</Link>
+                      </h4>
+                      <p className="small mt-2 op-8">{ firstBlog.short_desc }</p>
+                      <div
+                        className="d-flex small mt-30 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">
+                            { firstBlog.placeholderImageText }
+                          </span>
+                          <a href="#" className="mt-1">
+                            By { firstBlog.author }
+                          </a>
+                        </div>
+                        <div className="r-side mt-1">
+                          <i className="bi bi-chat-left-text me-1"></i>
+                          <a href="#">{ firstBlog.comments }</a>
+                          <i className="bi bi-eye ms-4 me-1"></i>
+                          <a href="#">{ firstBlog.views }</a>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="col-lg-6">
+                  {
+                    blogsList.map((blog, index) => (
+                      <div className={`card border-0 bg-transparent rounded-0 text-white ${index !== blogsList.length - 1 ? 'border-bottom brd-light pb-4 mb-4':''}`} key={index}>
+                        <div className="row">
+                          <div className="col-lg-5">
+                            <div className="img h-100">
+                              <img src={blog.cover} className="w-100 h-100 radius-2" alt="..." />
+                            </div>
+                          </div>
+                          <div className="col-lg-7">
+                            <div className="card-body pt-3 pt-lg-0">
+                              <small className="d-block date text">
+                                <a href="#" className="text-uppercase border-end brd-light pe-3 me-3">News</a>
+                                <i className="bi bi-clock me-1"></i>
+                                <a href="#" className="op-8">{ blog.time }</a>
+                              </small>
+                              <h6 className="fw-normal text-white mt-2 fs-6"> <a href="#">{ blog.title }</a> </h6>
+                              <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-2 me-2">
+                                    { blog.placeholderImageText }
+                                  </span>
+                                  <a href="#" className="mt-1">
+                                    By { blog.author }
+                                  </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>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="text-center">
+          <a href="#" className="sm-butn btn border text-white radius-9 mt-80 hover-lightBlue border-lightBlue">
+            <span>See More Articles</span>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Blog

src/components/IT/ChooseUs.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import Numbers from './Numbers';
+import chooseUsData from 'data/IT/chooseus.json';
+
+const ChooseUs = () => {
+  return (
+    <section className="choose-us style-2 border-top bg-darkBlue brd-light section-padding" data-scroll-index="4">
+      <div className="container">
+        <div className="section-head mb-30 text-center">
+          <h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70">why choose us</h2>
+        </div>
+        <div className="row align-items-center">
+          <div className="col-lg-6">
+            <div className="img pe-lg-5">
+              <img src="/assets/img/choose_us/circles.png" alt="" />
+            </div>
+          </div>
+          <div className="col-lg-6">
+            <div className="info">
+              <p className="text-white text-uppercase mb-60">We create differentiated value to rise to the <br /> top in this field</p>
+              <ul>
+                {
+                  chooseUsData.map((item, index) => (
+                    <li className={`d-flex ${index !== chooseUsData.length - 1 ? 'mb-30':''}`} key={index}>
+                      <div className="icon me-4 flex-shrink-0">
+                        <img src={item.image} alt="" />
+                      </div>
+                      <div className="inf">
+                        <h5 className="text-white text-capitalize mb-2">{ item.title }</h5>
+                        <small className="text-white op-8">
+                          { typeof item.desc === 'string' ? item.desc : (<>{ item.desc.desc1 } <br /> { item.desc.desc2 }</>) }
+                        </small>
+                      </div>
+                    </li>
+                  ))
+                }
+              </ul>
+              <Link to="/page-contact-5" className="btn sm-butn border text-white radius-9 mt-70 hover-darkBlue">
+                <span>Request A Consultation</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+        <Numbers />
+      </div>
+    </section>
+  )
+}
+
+export default ChooseUs

src/components/IT/Contact.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const Contact = () => {
+  return (
+    <section className="contact style-2 bg-darkBlue pt-50">
+      <div className="container">
+        <div className="content text-center text-white">
+          <p className="op-7 mb-70 text-uppercase">Let us opportunity to help you!</p>
+          <h2 className="ltspc-20 text-uppercase fs-1 lh-1 mb-50">(+23) 5535 68 68</h2>
+          <h4 className="fw-normal mb-20 op-9">contact@Itecksolution.com</h4>
+          <h4 className="fw-normal mb-30 op-7">58 Howard St, San Francisco, CA 941</h4>
+          <div className="text-center">
+            <Link to="/page-contact-5" className="sm-butn btn border text-white radius-9 hover-lightBlue border-lightBlue m-2">
+              <span>Let’s Chat</span>
+            </Link>
+            <Link to="/page-contact-5" className="sm-butn btn border text-white radius-9 hover-lightBlue border-lightBlue m-2">
+              <span>Request Consultation</span>
+            </Link>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/global2.png" alt="" className="global_2" />
+    </section>
+  )
+}
+
+export default Contact

src/components/IT/Footer.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const Footer = () => {
+  return (
+    <footer className="style-2 pt-80 pb-60 bg-darkBlue border-top brd-light text-white">
+      <div className="container">
+        <div className="row align-items-center">
+          <div className="col-lg-3">
+            <div className="foot_logo">
+              <img src="/assets/img/logo_ll.png" alt="" />
+            </div>
+          </div>
+          <div className="col-lg-6">
+            <div className="foot_links text-uppercase text-center small">
+              <Link to="/home-it-solutions" className="mx-4">
+                Home
+              </Link>
+              <Link to="/page-about-5" className="mx-4">
+                about
+              </Link>
+              <Link to="/page-services-5" className="mx-4">
+                services
+              </Link>
+              <Link to="/page-portfolio-5" className="mx-4">
+                portfolio
+              </Link>
+              <Link to="/page-blog-5" className="mx-4">
+                news
+              </Link>
+            </div>
+          </div>
+          <div className="col-lg-3 text-end">
+            <div className="socail-icons">
+              <a href="#" className="icon-40 sm-butn btn border text-white rounded-circle hover-lightBlue border-lightBlue m-1 p-0 d-inline-flex align-items-center justify-content-center">
+                <i className="fab fa-twitter"></i>
+              </a>
+              <a href="#" className="icon-40 sm-butn btn border text-white rounded-circle hover-lightBlue border-lightBlue m-1 p-0 d-inline-flex align-items-center justify-content-center">
+                <i className="fab fa-facebook-f"></i>
+              </a>
+              <a href="#" className="icon-40 sm-butn btn border text-white rounded-circle hover-lightBlue border-lightBlue m-1 p-0 d-inline-flex align-items-center justify-content-center">
+                <i className="fab fa-linkedin-in"></i>
+              </a>
+              <a href="#" className="icon-40 sm-butn btn border text-white rounded-circle hover-lightBlue border-lightBlue m-1 p-0 d-inline-flex align-items-center justify-content-center">
+                <i className="fab fa-github"></i>
+              </a>
+            </div>
+          </div>
+        </div>
+        <div className="text-center mt-30">
+          <div className="small">
+            <span className="op-6">© 2022 Copyrights by </span>
+            <a href="#" className="mx-1">Iteck Co.</a>
+            <span className="op-6"> All Rights Reserved.</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/IT/Header.jsx

@@ -0,0 +1,76 @@
+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 = (event) => {
+    event.preventDefault();
+    setOpen(true);
+  }
+
+  return (
+    <header className="style-2 overflow-hidden"  data-scroll-index="1">
+      <div className="container">
+        <div className="row justify-content-center">
+          <div className="col-lg-10">
+            <div className="content text-center text-light text-capitalize">
+              <div className="top_info">
+                <h1 className="text-uppercase">Iteck</h1>
+                <p className="fw-light text-uppercase">
+                  Best Solutions for <br /> <strong className="fw-bold">Big Data & TEchnology</strong> Services
+                </p>
+                <a href="https://youtu.be/pGbIOC83-So?t=21" className="vid-btn" onClick={openVideo}>
+                  <i className="bi bi-play-fill wow heartBeat infinite slower"></i>
+                </a>
+              </div>
+              <div className="brands mt-200 mb-80">
+                <a href="#" className="logo wow fadeInUp" data-wow-delay="0">
+                  <img src="/assets/img/about/about_logos/1.png" alt="" />
+                </a>
+                <a href="#" className="logo wow fadeInUp" data-wow-delay="0.2s">
+                  <img src="/assets/img/about/about_logos/2.png" alt="" />
+                </a>
+                <a href="#" className="logo wow fadeInUp" data-wow-delay="0.4s">
+                  <img src="/assets/img/about/about_logos/3.png" alt="" />
+                </a>
+                <a href="#" className="logo wow fadeInUp" data-wow-delay="0.6s">
+                  <img src="/assets/img/about/about_logos/4.png" alt="" />
+                </a>
+                <a href="#" className="logo wow fadeInUp" data-wow-delay="0.8s">
+                  <img src="/assets/img/about/about_logos/5.png" alt="" />
+                </a>
+              </div>
+              <h4>
+                We can help to maintain and modernize <br /> your IT infrastructure & solve various infrastructure-specific <br /> issues a business may face.
+              </h4>
+              <p className="d-block mt-40">
+                Iteck Co is the partner of choice for many of the world’s leading <br /> enterprises, SMEs and technology challengers. We help businesses elevate their value through <br /> custom software development, product design, QA and consultancy services.
+              </p>
+              <Link to="/page-about-5" className="btn sm-butn border text-white radius-9 mt-60 hover-darkBlue">
+                <span>More About Us</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/header/header_2.png" alt="" className="head_shape2 wave" />
+      {
+        typeof window !== "undefined" && 
+          (
+            <ModalVideo
+              channel="youtube"
+              autoplay
+              isOpen={isOpen}
+              videoId="pGbIOC83-So"
+              onClose={() => setOpen(false)}
+            />
+          )
+      }
+    </header>
+  )
+}
+
+export default Header

src/components/IT/Numbers.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import CountTo from '../CountTo';
+import numbers from 'data/IT/numbers.json';
+
+const Numbers = () => {
+  const [position] = useState({ from: 2600, to: 2900 });
+
+  return (
+    <div className="choose-numbers mt-80">
+      <div className="row justify-content-center">
+        <div className="col-lg-10">
+          <div className="row">
+            {
+              numbers.map((number, index) => (
+                <div className="col-lg-4" key={index}>
+                  <div className="num-item">
+                    <div className="num">
+                      <CountTo className="counter" from={0} to={number.value} speed={1500} position={position} />
+                      { number.operator && <span> +</span> }
+                    </div>
+                    <div className="inf">
+                      { number.title.part1 } <br /> { number.title.part2 }
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Numbers

src/components/IT/Pricing.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import plans from 'data/IT/plans.json';
+
+const Pricing = () => {
+
+  const togglePlanDuration = (duration) => {
+    let monthly = document.querySelectorAll('.monthly_price');
+    let yearly = document.querySelectorAll('.yearly_price');
+
+    if (duration === 'monthly') {
+      monthly.forEach(price => price.classList.add('show'));
+      yearly.forEach(price => price.classList.remove('show'));
+    } else {
+      yearly.forEach(price => price.classList.add('show'));
+      monthly.forEach(price => price.classList.remove('show'));
+    }
+  }
+
+  return (
+    <section className="pricing style-2 border-top brd-light section-padding" data-scroll-index="6">
+      <div className="container">
+        <div className="section-head mb-30 text-center">
+          <h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70">Pricing & plan</h2>
+        </div>
+        <div className="row justify-content-center">
+          <div className="col-lg-10">
+            <div className="content">
+              <div className="toggle_switch d-flex align-items-center justify-content-center mb-20">
+                <div className="form-check form-switch text-white p-0">
+                  <label className="form-check-label" htmlFor="monthly-input2"><small>Billed monthly</small></label>
+                  <input className="form-check-input float-none color-lightBlue" type="checkbox" id="monthly-input2" defaultChecked onChange={(e) => togglePlanDuration(e.target.checked ? 'yearly':'monthly')} />
+                  <label className="form-check-label" htmlFor="monthly-input2"><small>Billed annually</small></label>
+                </div>
+              </div>
+              <div className="row justify-content-center gx-0">
+                {
+                  plans.map((plan, index) => (
+                    <div className="col-lg-4" key={index}>
+                      <div className={`pricing_card ${plan.recommended ? 'recommended':''} style-2`}>
+                        { plan.recommended && <span className="hint">Recommended</span> }
+                        <div className="icon">
+                          <img src={plan.image} alt="" />
+                        </div>
+                        <p>{ plan.title }</p>
+                        <div className="price mb-30">
+                          <div className="monthly_price">
+                            <span className="h2">
+                              <small>$</small> { plan.price }
+                            </span>
+                            <small className="op-7 ms-1"> / month </small>
+                          </div>
+                          <div className="yearly_price show">
+                            <span className="h2">
+                              <small>$</small> { plan.price }
+                            </span>
+                            <small className="op-7 ms-1"> / year </small>
+                          </div>
+                        </div>
+                        <ul>
+                          {
+                            plan.features.map((feature, i) => (
+                              <li className="border-top py-3 op-8 fw-light text-uppercase" key={i}>
+                                { feature }
+                              </li>
+                            ))
+                          }
+                        </ul>
+                        <Link to="/page-contact-5" className="sm-butn btn border text-white radius-9 mt-50 w-100 hover-lightBlue border-lightBlue">
+                          <span>Get Started Now</span>
+                        </Link>
+                      </div>
+                    </div>
+                  ))
+                }
+              </div>
+              <p className="text-white text-center mt-50">You have a large team? <Link to="/page-contact-5" className="text-decoration-underline">Contact us</Link> for information about more enterprise options </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/pricing/shap_l.png" alt="" className="shap_l" />
+      <img src="/assets/img/pricing/shap_r.png" alt="" className="shap_r" />
+    </section>
+  )
+}
+
+export default Pricing

src/components/IT/Reviews.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Pagination, Navigation, Autoplay, EffectFade } from 'swiper';
+import reviews from 'data/IT/reviews.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/effect-fade';
+
+SwiperCore.use([Pagination, Navigation, Autoplay, EffectFade]);
+
+const Reviews = () => {
+  return (
+    <section className="reviews style-2 border-top brd-light section-padding bg-darkBlue" data-scroll-index="5">
+      <div className="container">
+        <div className="section-head mb-30 text-center">
+          <h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70">reviews</h2>
+        </div>
+        <div className="reviews_slider">
+          <Swiper
+            className="swiper-container"
+            effect="fade"
+            slidesPerView={1}
+            spaceBetween={0}
+            speed={1000}
+            pagination={{
+              el: ".reviews_slider .swiper-pagination",
+              clickable: true,
+            }}
+            navigation={{
+              nextEl: '.reviews_slider .swiper-button-next',
+              prevEl: '.reviews_slider .swiper-button-prev',
+            }}
+            mousewheel={false}
+            keyboard={true}
+            autoplay={{
+              delay: 4000,
+            }}
+            loop={true}
+          >
+            {
+              reviews.map((review, index) => (
+                <SwiperSlide key={index}>
+                  <div className="row justify-content-center">
+                    <div className="col-lg-7">
+                      <div className="reviews_card text-center style-2">
+                        <h5 className="text-white lh-4">
+                          “{ review.review }”
+                        </h5>
+                        <div className="rev_user">
+                          <img src={review.userImage} alt="" />
+                        </div>
+                        <div className="rev_stars">
+                          { Array(review.stars).fill().map((_, i) => (<i className="bi bi-star-fill" key={i}></i>)) }
+                        </div>
+                        <small className="text-white mt-2 d-block">
+                          <span className="text-uppercase color-lightBlue">{ review.username }</span> <span className="op-7">/ { review.userPosition }</span>
+                        </small>
+                      </div>
+                    </div>
+                  </div>
+                </SwiperSlide>
+              ))
+            }
+          </Swiper>
+          <div className="pagination_circle position-relative pagi_white mt-70">
+            <div className="swiper-pagination"></div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/review/rev_l.png" alt="" className="rev_l" />
+      <img src="/assets/img/review/rev_r.png" alt="" className="rev_r" />
+    </section>
+  )
+}
+
+export default Reviews

src/components/IT/Services.jsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Pagination, Navigation, Autoplay } from 'swiper';
+import services from 'data/IT/services.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+
+SwiperCore.use([Pagination, Navigation, Autoplay]);
+
+const Services = () => {
+  return (
+    <section className="services_projects section-padding">
+      <div className="container">
+        <div data-scroll-index="2" data-scroll-internal-section>
+          <div className="section-head mb-30 text-center">
+            <h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70">services</h2>
+          </div>
+          <div className="services_slider position-relative">
+            <Swiper
+              className="swiper-container"
+              slidesPerView={3}
+              spaceBetween={30}
+              speed={1000}
+              pagination={{
+                  el: ".services_slider .swiper-pagination",
+                  clickable: true,
+              }}
+              navigation={{
+                  nextEl: '.services_slider .swiper-button-next',
+                  prevEl: '.services_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
+                }
+              }}
+            >
+              {
+                services.services.map((service, index) => (
+                  <SwiperSlide key={index}>
+                    <div className="service-box text-white text-center px-4 py-2 brd-light border-end style-2">
+                      <div className="icon mb-30">
+                        <img src={service.image} alt="" />
+                      </div>
+                      <div className="info">
+                        <h4>{ service.title }</h4>
+                        <p className="op-7 mt-20 mb-30 px-3">{ service.desc }</p>
+                        <div className="tags d-flex flex-wrap justify-content-center mt-30 style-2">
+                          {
+                            service.tags.map((tag, i) => (<a href="#" key={i}>{ tag }</a>))
+                          }
+                        </div>
+                      </div>
+                    </div>
+                  </SwiperSlide>
+                ))
+              }
+            </Swiper>
+            <div className="pagination_circle position-relative pagi_white mt-70">
+              <div className="swiper-pagination"></div>
+            </div>
+          </div>
+        </div>
+        <div data-scroll-index="3" data-scroll-internal-section>
+          <div className="section-head mb-30 text-center">
+            <h2 className="text-white ltspc-20 text-uppercase fs-1 lh-1 mb-70 pt-100">works</h2>
+          </div>
+          <div className="works_slider position-relative">
+            <div className="row justify-content-center">
+              <div className="col-lg-10">
+                <div className="swiper-container">
+                  <Swiper
+                    className="swiper-wrapper"
+                    slidesPerView={3}
+                    spaceBetween={30}
+                    speed={1000}
+                    pagination={{
+                      el: ".works_slider .swiper-pagination",
+                      clickable: true,
+                    }}
+                    navigation={{
+                      nextEl: '.works_slider .swiper-button-next',
+                      prevEl: '.works_slider .swiper-button-prev',
+                    }}
+                    mousewheel={false}
+                    keyboard={true}
+                    autoplay={{
+                      delay: 4000
+                    }}
+                    loop={true}
+                    breakpoints={{
+                      0:{
+                        slidesPerView: 1
+                      },
+                      480:{
+                        slidesPerView: 1
+                      },
+                      787:{
+                        slidesPerView: 2
+                      },
+                      991:{
+                        slidesPerView: 2
+                      },
+                      1200:{
+                        slidesPerView: 2
+                      }
+                    }}
+                  >
+                    {
+                      services.works.map((work, index) => (
+                        <SwiperSlide key={index}>
+                          <div className="work_card text-center d-block">
+                            <div className="img img-cover radius-6 overflow-hidden imgrotate-scale-hover">
+                              <img src={work.image} alt="" />
+                            </div>
+                            <div className="info">
+                              <h4 className="text-white mt-4">
+                                <Link to="/page-single-project-5">{ work.title }</Link>
+                              </h4>
+                              <small className="color-lightBlue text-uppercase">
+                                {
+                                  work.tags.map((tag, i) => (
+                                    <a href="#" className="me-1" key={i}>{ tag }</a>
+                                  ))
+                                }
+                              </small>
+                            </div>
+                          </div>
+                        </SwiperSlide>
+                      ))
+                    }
+                  </Swiper>
+                </div>
+              </div>
+            </div>
+            <div className="swiper-button-next radius-50 bg-transparent border brd-light"></div>
+            <div className="swiper-button-prev radius-50 bg-transparent border brd-light"></div>
+          </div>
+          <div className="text-center">
+            <Link to="/page-portfolio-5" className="btn sm-butn border text-white radius-9 mt-60 hover-darkBlue">
+              <span>See All Projects</span>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Services

src/components/ITCreative/About.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import aboutData from 'data/ITCreative/about.json';
+
+const About = () => {
+  return (
+    <section className="about style-7">
+      <div className="container">
+        <div className="row align-items-center">
+          <div className="col-lg-5">
+            <div className="info">
+              <div className="section-head style-4 mb-40">
+                <div className="top-title mb-10">
+                  <img src="/assets/img/line_l.png" alt="" />
+                  <h5> About Us </h5>
+                </div>
+                <h2 className="">
+                  Meet With <span> A House </span> <br /> Of Creatives.
+                </h2>
+              </div>
+              <div className="text mb-30">
+                Stay focused and productive with a clean and clutter-free note space. The flexible ways to organize your notes: hash tags, nested notebooks, pinning notes.
+              </div>
+              <ul>
+                {
+                  aboutData.map((item, index) => (
+                    <li className="d-flex mb-20" key={index}>
+                      <i className="fas fa-check-circle color-blue7 me-2 mt-2"></i>
+                      <div className="text"> <strong className="color-000"> { item.title }: </strong> { item.content } </div>
+                    </li>
+                  ))
+                }
+              </ul>
+            </div>
+          </div>
+          <div className="col-lg-7">
+            <div className="img">
+              <img src="/assets/img/about/about7.jpg" alt="" className="main-img" />
+              <img src="/assets/img/about/about7_chart.png" alt="" className="img-chart slide_up_down" />
+              <span className="circle scale_up_down"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <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" />
+      <img src="/assets/img/about/about7_lines.png" alt="" className="bg-lines" />
+    </section>
+  )
+}
+
+export default About

src/components/ITCreative/Blog.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import blogs from 'data/ITCreative/blog.json';
+
+const Blog = () => {
+  return (
+    <section className="blog style-7 section-padding">
+      <div className="container">
+        <div className="section-head text-center style-4 mb-80">
+          <div className="top-title mb-10">
+            <img src="/assets/img/line_l.png" alt="" />
+            <h5> blog </h5>
+            <img src="/assets/img/line_r.png" alt="" />
+          </div>
+          <h2 className="">
+            Company <span> News & Insights </span>
+          </h2>
+        </div>
+        <div className="content">
+          <div className="row">
+            {
+              blogs.map((blog, index) => (
+                <div className="col-lg-4" key={index}>
+                  <div className="blog-card style-7 mt-5 mt-lg-0">
+                    <div className="img img-cover">
+                      <img src={blog.cover} alt="" />
+                    </div>
+                    <div className="info pt-40">
+                      <div className="date-tags">
+                        <div className="tags">
+                          <Link to="/page-blog-app">{ blog.category }</Link>
+                        </div>
+                        <a href="#" className="date">
+                          { blog.date }
+                        </a>
+                        <span className="color-999"> | </span>
+                        <a href="#" className="author color-999">
+                          By <span className="color-000 fw-bold"> { blog.author } </span>
+                        </a>
+                      </div>
+                      <h4 className="title">
+                        <Link to="/page-single-post-app">{ blog.title }</Link>
+                      </h4>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/shap_color_7.png" alt="" className="shap_color" />
+    </section>
+  )
+}
+
+export default Blog

src/components/ITCreative/ChatBanner.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const ChatBanner = () => {
+  return (
+    <section className="chat-banner style-7">
+      <div className="container">
+        <div className="row align-items-end">
+          <div className="col-lg-3 d-none d-lg-block">
+            <div className="img img1">
+              <img src="/assets/img/vector1.png" alt="" />
+            </div>
+          </div>
+          <div className="col-lg-5">
+            <div className="info">
+              <p> Hire Us For Your Project </p>
+              <h3> Lets Work Together </h3>
+              <div className="btns mt-50">
+                <a href="#0" className="btn btn-icon-circle rounded-pill bg-black fw-bold text-white me-4 mb-3 mb-lg-0">
+                  <small> Estimate Project <i className="fas fa-long-arrow-alt-right"></i> </small>
+                </a>
+                <a href="#0" className="btn btn-icon-circle rounded-pill fw-bold me-4 brd-light text-white hover-blue7">
+                  <small> Contact Us <i className="fas fa-long-arrow-alt-right bg-light"></i> </small>
+                </a>
+              </div>
+            </div>
+          </div>
+          <div className="col-lg-4">
+            <div className="img img2">
+              <img src="/assets/img/vector2.png" alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default ChatBanner

src/components/ITCreative/ChooseUs.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import ModalVideo from "react-modal-video";
+import "react-modal-video/css/modal-video.css";
+
+const ChooseUs = () => {
+  const [isOpen, setOpen] = useState(false);
+
+  const openVideo = (e) => {
+    e.preventDefault();
+    setOpen(true);
+  }
+
+  return (
+    <section className="choose-us style-7 section-padding">
+      <div className="container">
+        <div className="row align-items-center">
+          <div className="col-lg-6">
+            <div className="img">
+              <img src="/assets/img/choose_us/choose7.jpg" alt="" />
+              <a href="https://youtu.be/pGbIOC83-So?t=21" className="play_btn" onClick={openVideo}>
+                <i className="fas fa-play"></i>
+              </a>
+            </div>
+          </div>
+          <div className="col-lg-6">
+            <div className="info">
+              <div className="section-head style-4 mb-40">
+                <div className="top-title mb-10">
+                  <img src="/assets/img/line_l.png" alt="" />
+                  <h5> Why Choose Us </h5>
+                </div>
+                <h2 className="text-white">
+                  Why Choose <span> Our Own </span> <br /> IT Service?
+                </h2>
+              </div>
+              <ul>
+                <li>
+                  <div className="icon">
+                    <img src="/assets/img/choose_us/icon1.png" alt="" />
+                  </div>
+                  <div className="inf">
+                    <h6> AI Intregrations </h6>
+                    <p> Automatically syncs across all your devices </p>
+                  </div>
+                </li>
+                <li>
+                  <div className="icon">
+                    <img src="/assets/img/choose_us/icon2.png" alt="" />
+                  </div>
+                  <div className="inf">
+                    <h6> On Demand Design </h6>
+                    <p> Automatically syncs across all your devices </p>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+      <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" />
+      <img src="/assets/img/choose_us/choose7_circe.png" alt="" className="choose-circle rotate-center" />
+      {
+        typeof window !== "undefined" && 
+          (
+            <ModalVideo
+              channel="youtube"
+              autoplay
+              isOpen={isOpen}
+              videoId="pGbIOC83-So"
+              onClose={() => setOpen(false)}
+            />
+          )
+      }
+    </section>
+  )
+}
+
+export default ChooseUs

src/components/ITCreative/Features.jsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Autoplay } from 'swiper';
+import features from 'data/ITCreative/features.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+
+SwiperCore.use([Autoplay]);
+
+const Features = () => {
+  const [load, setLoad] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoad(true);
+    });
+  }, []);
+
+  return (
+    <section className="features style-7 section-padding">
+      <div className="container">
+        <div className="section-head text-center style-4 mb-40">
+          <div className="top-title mb-10">
+            <img src="/assets/img/line_l.png" alt="" />
+            <h5> Features </h5>
+            <img src="/assets/img/line_r.png" alt="" />
+          </div>
+          <h2 className="">
+            Built With Best <span> Features </span> <br /> & Good UX
+          </h2>
+        </div>
+      </div>
+      <div className="content">
+        <div className="features-slider7">
+          {
+            load && (
+              <Swiper
+                spaceBetween={50}
+                centeredSlides={true}
+                speed={10000}
+                autoplay={{
+                  delay: 1
+                }}
+                loop={true}
+                breakpoints={{
+                  0: {
+                    slidesPerView: 1,
+                  },
+                  480: {
+                    slidesPerView: 1,
+                  },
+                  787: {
+                    slidesPerView: 1,
+                  },
+                  991: {
+                    slidesPerView: 2,
+                  },
+                  1200: {
+                    slidesPerView: 3,
+                  }
+                }}
+              >
+                {
+                  features.map((feature, index) => (
+                    <SwiperSlide key={index}>
+                      <a href="#" className="features-card style-7">
+                        <div className="icon">
+                          <img src={feature.image} alt="" />
+                        </div>
+                        <div className="info">
+                          <p className="color-999"> Features {feature.id} </p>
+                          <h5> {feature.title.part1} <br /> {feature.title.part2} </h5>
+                        </div>
+                      </a>
+                    </SwiperSlide>
+                  ))
+                }
+              </Swiper>
+            )
+          }
+        </div>
+        <div className="btns text-center mt-10">
+          <a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white me-4 mb-4 mb-lg-0">
+            <small> Learn More <i className="fas fa-long-arrow-alt-right"></i> </small>
+          </a>
+          <a href="#0" className="btn btn-icon-circle rounded-pill bg-white fw-bold me-4">
+            <small> Purchase Now <i className="fas fa-long-arrow-alt-right bg-light"></i> </small>
+          </a>
+        </div>
+      </div>
+      <img src="/assets/img/feat_circle.png" alt="" className="img-circle rotate-center" />
+    </section>
+  )
+}
+
+export default Features

src/components/ITCreative/Footer.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import footerData from 'data/ITCreative/footer.json';
+
+const Footer = () => {
+  return (
+    <footer className="style-7">
+      <div className="container">
+        <div className="content section-padding">
+          <div className="row">
+            <div className="col-lg-4 border-1 border-end brd-gray">
+              <div className="info-logo">
+                <a href="#" className="logo">
+                  <img src="/assets/img/logo_lgr.png" alt="" />
+                </a>
+                <div className="text">
+                  { footerData.text }
+                </div>
+                <div className="social-links">
+                  <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 className="col-lg-8">
+              <div className="links-side">
+                <div className="row gx-5">
+                  <div className="col-lg-6">
+                    <div className="links-group">
+                      <h5>What We Do</h5>
+                      <div className="row">
+                        <div className="col-lg-6">
+                          <ul className="links">
+                            { 
+                              footerData.links.map((link, i) => (
+                                <li key={i}>
+                                  <a href={link.href}>{ link.text }</a>
+                                </li>
+                              ))
+                            }
+                          </ul>
+                        </div>
+                        <div className="col-lg-6">
+                          <ul className="links">
+                            { 
+                              footerData.links2.map((link, i) => (
+                                <li key={i}>
+                                  <a href={link.href}>{ link.text }</a>
+                                </li>
+                              ))
+                            }
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="col-lg-6">
+                    <div className="links-group">
+                      <h5>More Pages</h5>
+                      <div className="row">
+                        <div className="col-lg-6">
+                          <ul className="links">
+                            { 
+                              footerData.morePages.map((link, i) => (
+                                <li key={i}>
+                                  <a href={link.href}>{ link.text }</a>
+                                </li>
+                              ))
+                            }
+                          </ul>
+                        </div>
+                        <div className="col-lg-6">
+                          <ul className="links">
+                            { 
+                              footerData.morePages2.map((link, i) => (
+                                <li key={i}>
+                                  <a href={link.href}>{ link.text } { link.label && <small className="text-uppercase bg-blue7 text-white py-1 px-3 rounded-pill ms-2 lh-2"> { link.label } </small> }</a>
+                                </li>
+                              ))
+                            }
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="foot bg-white p-3 rounded-pill text-center">
+          <p> Full Copyright & Design By <a href="#" className="fw-bold"> @ThemesCamp </a> - 2022 </p>
+        </div>
+      </div>
+      {/* <img src="/assets/img/footer/footer_4_wave.png" alt="" className="wave"> */}
+    </footer>
+  )
+}
+
+export default Footer

src/components/ITCreative/Header.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+const Header = () => {
+  return (
+    <header className="style-7">
+      <div className="content">
+        <div className="container">
+          <div className="row align-items-center">
+            <div className="col-lg-6">
+              <div className="info mt-5 mt-lg-0">
+                <div className="section-head style-4">
+                  <div className="top-title">
+                    <img src="/assets/img/line_l.png" alt="" />
+                    <h5> Get Solid Solution </h5>
+                  </div>
+                </div>
+                <h1>
+                  Choose The <br /> <span className="num"> #01 </span> <span className="text-grad"> IT Solutions </span> <br /> WP Theme.
+                </h1>
+                <div className="d-flex flex-wrap">
+                  <a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white me-4" target="_blank">
+                    <small> Get Started Now <i className="fas fa-long-arrow-alt-right"></i> </small>
+                  </a>
+                  <div className="inf mt-3 mt-lg-0">
+                    <p className="color-999"> Support Email </p>
+                    <a href="#" className="fw-bold"> info@support-iteck.com </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-6">
+              <div className="img mt-4 mt-lg-0">
+                <img src="/assets/img/header/head_img7.png" alt="" />
+                <img src="/assets/img/header/head7_rock.png" alt="" className="rock7 slide_up_down" />
+              </div>
+            </div>
+            <div className="col-12">
+              <div className="sponsers mt-30">
+                <div className="title me-5 flex-shrink-0">
+                  Happy <br /> <span className="fw-bold"> Sponsors </span>
+                </div>
+                <div className="sponsers-content">
+                  <a href="#">
+                    <img src="/assets/img/logos/18.png" alt="" />
+                  </a>
+                  <a href="#">
+                    <img src="/assets/img/logos/19.png" alt="" />
+                  </a>
+                  <a href="#">
+                    <img src="/assets/img/logos/20.png" alt="" />
+                  </a>
+                  <a href="#">
+                    <img src="/assets/img/logos/21.png" alt="" />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/header/head7_bg.png" alt="" className="head7_bg slide_up_down" />
+    </header>
+  )
+}
+
+export default Header;

src/components/ITCreative/ProjectCard.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+const ProjectCard = ({ project }) => {
+  return (
+    <a href="#" className="project-card style-7">
+      <div className="info">
+        <h6>{ project.title }</h6>
+        <h3>{ project.description }</h3>
+      </div>
+      <div className="img">
+        <img src={project.image} alt="" />
+      </div>
+    </a>
+  )
+}
+
+export default ProjectCard

src/components/ITCreative/Projects.jsx

@@ -0,0 +1,125 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Autoplay, Navigation, Mousewheel, Keyboard } from 'swiper';
+import ProjectCard from './ProjectCard';
+import projects from 'data/ITCreative/projects.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+import 'swiper/css/mousewheel';
+import 'swiper/css/keyboard';
+
+SwiperCore.use([Autoplay, Navigation, Mousewheel, Keyboard]);
+
+const Projects = () => {
+  const [load, setLoad] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoad(true);
+    });
+  }, []);
+
+  return (
+    <section className="projects style-7 section-padding">
+      <div className="content">
+        <div className="row">
+          <div className="col-lg-3">
+            <div className="section-head style-4 mb-50">
+              <div className="top-title mb-10">
+                <img src="/assets/img/line_l.png" alt="" />
+                <h5> Case Study </h5>
+              </div>
+              <h2 className="">
+                Creative <span> Works </span> <br /> We Done
+              </h2>
+            </div>
+            <div className="projects-tabs">
+              <ul className="nav nav-pills flex-column mb-3" id="pills-tab" role="tablist">
+                {
+                  projects.types.map((type, index) => (
+                    <li className="nav-item" role="presentation" key={index}>
+                      <button className={`nav-link ${index === 0 ? 'active' : ''}`} id={`pills-proj${type.id}-tab`} data-bs-toggle="pill" data-bs-target={`#pills-proj${type.tab}`} type="button" role="tab" aria-controls={`pills-proj${type.tab}`} aria-selected="true">
+                        <i className="fal fa-long-arrow-right me-2 color-blue7"></i> {type.title}
+                      </button>
+                    </li>
+                  ))
+                }
+              </ul>
+              <div className="swiper-button-next">
+                <i className="far fa-long-arrow-right"></i>
+              </div>
+              <div className="swiper-button-prev">
+                <i className="far fa-long-arrow-left"></i>
+              </div>
+            </div>
+          </div>
+          <div className="col-lg-9">
+            <div className="tab-content" id="pills-tabContent">
+              {
+                projects.tabs.map((tab, index) => (
+                  <div className={`tab-pane fade ${index === 0 ? 'show active' : ''}`} id={`pills-proj${tab.id}`} role="tabpanel" aria-labelledby={`pills-proj${tab.id}-tab`} key={index}>
+                    <div className="projects-slider7">
+                      {
+                        load && (
+                          <Swiper
+                            spaceBetween={40}
+                            speed={1000}
+                            pagination={false}
+                            navigation={{
+                              nextEl: '.projects.style-7 .swiper-button-next',
+                              prevEl: '.projects.style-7 .swiper-button-prev',
+                            }}
+                            mousewheel={false}
+                            keyboard={true}
+                            autoplay={{
+                              delay: 5000,
+                            }}
+                            observer={true}
+                            observeParents={true}
+                            loop={false}
+                            breakpoints={{
+                              0: {
+                                slidesPerView: 1,
+                              },
+                              480: {
+                                slidesPerView: 1,
+                              },
+                              787: {
+                                slidesPerView: 1,
+                              },
+                              991: {
+                                slidesPerView: 2,
+                              },
+                              1200: {
+                                slidesPerView: 2,
+                              }
+                            }}
+                          >
+                            {
+                              tab.projects.map((project, i) => (
+                                <SwiperSlide key={i}>
+                                  <ProjectCard project={project} />
+                                </SwiperSlide>
+                              ))
+                            }
+                          </Swiper>
+                        )
+                      }
+                    </div>
+                  </div>
+                ))
+              }
+              <a href="#0" className="btn btn-icon-circle rounded-pill bg-white fw-bold mt-50">
+                <small> More Projects <i className="fas fa-long-arrow-alt-right bg-light"></i> </small>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Projects

src/components/ITCreative/Services.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import services from 'data/ITCreative/services.json';
+
+const Services = () => {
+  return (
+    <section className="services style-7 pt-100">
+      <div className="container">
+        <div className="section-head text-center style-4 mb-50">
+          <div className="top-title mb-10">
+            <img src="/assets/img/line_l.png" alt="" />
+            <h5> Services </h5>
+            <img src="/assets/img/line_r.png" alt="" />
+          </div>
+          <h2 className="">
+            What We <span> Provide </span> <br /> As A Company
+          </h2>
+        </div>
+        <div className="services-content pb-100">
+          <div className="row">
+            {
+              services.map((service, index) => (
+                <div className="col-lg-3" key={index}>
+                  <div className="service-item-style7">
+                    <div className="img">
+                      <img src={service.image} alt="" />
+                      <span className="icon">
+                        <i className={service.icon}></i>
+                      </span>
+                    </div>
+                    <div className="info">
+                      <h6>{ service.title }</h6>
+                      <p className="text">{ service.description }</p>
+                      <a href="#"> <i className="fal fa-long-arrow-right"></i> Read More  <i className="fal fa-long-arrow-right"></i> </a>
+                    </div>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Services

src/components/ITCreative/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" id="side_menu">
+        <a href="#0" className="side_menu_cls" onClick={toggleSideMenu}>
+          <img src="/assets/img/icons/4dots.png" alt="" />
+        </a>
+        <div className="content">
+          <div className="logo">
+            <a href="#" className="w-100">
+              <img src="/assets/img/logo_lgr.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/ITCreative/Testimonials.jsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Autoplay, Keyboard } from 'swiper';
+import testimonials from 'data/ITCreative/testimonials.json';
+
+import "swiper/css";
+import 'swiper/css/autoplay';
+import 'swiper/css/keyboard';
+
+SwiperCore.use([Autoplay, Keyboard]);
+
+const Testimonials = () => {
+  const [load, setLoad] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoad(true);
+    });
+  }, []);
+
+  return (
+    <section className="testimonials style-7 section-padding">
+      <div className="container">
+        <div className="section-head text-center style-4 mb-80">
+          <div className="top-title mb-10">
+            <img src="/assets/img/line_l.png" alt="" />
+            <h5> Feedbacks </h5>
+            <img src="/assets/img/line_r.png" alt="" />
+          </div>
+          <h2 className="">
+            1M+ Happy <span> Users Around </span> <br /> From Worlds
+          </h2>
+        </div>
+        <div className="testimonials-slider7 position-relative overflow-hidden">
+          {
+            load && (
+              <Swiper
+                slidesPerView={1}
+                spaceBetween={0}
+                speed={1000}
+                pagination={false}
+                navigation={false}
+                mousewheel={false}
+                keyboard={true}
+                autoplay={{
+                  delay: 5000
+                }}
+                loop={true}
+              >
+                {
+                  testimonials.map((testimonial, index) => (
+                    <SwiperSlide key={index}>
+                      <div className="content">
+                        <div className="row justify-content-center">
+                          <div className="col-lg-10">
+                            <div className="testi-card">
+                              <div className="text">
+                                “{ testimonial.text }”
+                              </div>
+                              <div className="author">
+                                <div className="img icon-60 rounded-circle overflow-hidden img-cover me-3 flex-shrink-0">
+                                  <img src={testimonial.image} alt="" />
+                                </div>
+                                <div className="inf">
+                                  <p> Head Of Idea </p>
+                                  <h6>{ testimonial.author }</h6>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </SwiperSlide>
+                  ))
+                }
+              </Swiper>
+            )
+          }
+        </div>
+        <div className="get-qoute-banner">
+          <div className="row align-items-center">
+            <div className="col-lg-6">
+              <div className="info">
+                <p> Anytime you can make request to us </p>
+                <h6> Everything You Need To Manage Business </h6>
+              </div>
+            </div>
+            <div className="col-lg-3 d-none d-lg-block">
+              <div className="img">
+                <img src="/assets/img/testimonials/banner7.png" alt="" />
+              </div>
+            </div>
+            <div className="col-lg-3">
+              <div className="btns text-lg-end">
+                <a href="#0" className="btn btn-icon-circle rounded-pill bg-blue7 fw-bold text-white">
+                  <small> Get A Quote <i className="fas fa-long-arrow-alt-right"></i> </small>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <img src="/assets/img/testimonials/testi7_back.png" alt="" className="img_back slide_up_down" />
+      <img src="/assets/img/testimonials/testi7_qout.png" alt="" className="testi_qout" />
+    </section>
+  )
+}
+
+export default Testimonials

src/components/Navbars/AbsoluteContainer.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AbsoluteContainer = ({ children }) => {
+  return (
+    <div className="nav-container position-absolute w-100">
+      { children }
+    </div>
+  )
+}
+
+export default AbsoluteContainer

src/components/Navbars/AppNav/OnePageNav.jsx

@@ -0,0 +1,90 @@
+import React, { useEffect } from 'react';
+import scrollToSection from 'common/scrollToSection';
+
+const OnePageNav = ({ navbarRef, rtl }) => {
+  useEffect(() => {
+    const sections = document.querySelectorAll('[data-scroll-index]');
+
+    window.addEventListener('scroll', () => {
+      sections.forEach(section => {
+        const index = section.getAttribute('data-scroll-index');
+        let offset = section.offsetTop;
+        let height = section.offsetHeight;
+        const scroll = window.scrollY;
+
+        if (['2', '3'].indexOf(index) !== -1) {
+          offset = section.parentElement.offsetTop + section.offsetTop - 150;
+        }
+
+        if (scroll + 200 > offset && scroll + 200 < offset + height) {
+          document.querySelector(`[data-scroll-nav="${index}"]`)?.classList?.add('active');
+        } else {
+          document.querySelector(`[data-scroll-nav="${index}"]`)?.classList?.remove('active');
+        }
+      });
+    });
+  }, []);
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light style-4" id="main-nav" ref={navbarRef}>
+      <div className="container">
+        <a className="navbar-brand" href="#" data-scroll-nav="0" onClick={scrollToSection}>
+          <img src="/assets/img/logo_lgr.png" alt="" />
+        </a>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav m-auto mb-2 mb-lg-0 text-uppercase">
+            <li className="nav-item">
+              <a className="nav-link" href="#0" data-scroll-nav="1" onClick={scrollToSection}>
+                { rtl ? 'خدماتنا' : 'Featured' }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#0" data-scroll-nav="2" onClick={scrollToSection}>
+                { rtl ? 'من نحن' : 'About' }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#0" data-scroll-nav="3" onClick={scrollToSection}>
+                { rtl ? 'تطبيقات شائعة' : 'Popular Apps' }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#0" data-scroll-nav="4" onClick={scrollToSection}>
+                { rtl ? 'شاشات التطبيق' : 'screens' }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#0" data-scroll-nav="5" onClick={scrollToSection}>
+                { rtl ? 'اراء العملاء' : 'Testimonials' }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#0" data-scroll-nav="6" onClick={scrollToSection}>
+                { rtl ? 'خطه الاسعار' : 'Pricing Plan' }
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" href="#0" data-scroll-nav="7" onClick={scrollToSection}>
+                { rtl ? 'اراء العملاء' : 'faq' }
+              </a>
+            </li>
+          </ul>
+          <div className="nav-side">
+            <div className="d-flex align-items-center">
+              <a href="#0" className="btn rounded-pill brd-gray hover-blue4 sm-butn fw-bold" data-scroll-nav="8" onClick={scrollToSection}>
+                <span>{ rtl ? 'تحميل' : 'download' } <i className="bi bi-download ms-1"></i> </span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default OnePageNav

src/components/Navbars/AppNav/index.jsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Link } from 'gatsby';
+
+const Navbar = ({ navbarRef }) => {
+  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 (
+    <nav className="navbar navbar-expand-lg navbar-light style-4" ref={navbarRef}>
+      <div className="container">
+        <a className="navbar-brand" href="#">
+          <img src="/assets/img/logo_lgr.png" alt="" />
+        </a>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav m-auto mb-2 mb-lg-0 text-uppercase">
+            <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+              <a className="nav-link active dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Homes
+              </a>
+              <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                <li><Link to="/" className="dropdown-item">Landing Preview</Link></li>
+                <li><Link to="/home-it-solutions2" className="dropdown-item"> Creative It Solutions</Link></li>
+                <li><Link to="/home-data-analysis" className="dropdown-item"> Data Analysis</Link></li>
+                <li><Link to="/home-app-landing" className="dropdown-item"> App Landing</Link></li>
+                <li><Link to="/home-saas-technology" className="dropdown-item"> Saas Technology</Link></li>
+                <li><Link to="/home-marketing-startup" className="dropdown-item"> Marketing Startup</Link></li>
+                <li><Link to="/home-it-solutions" className="dropdown-item"> It Solution</Link></li>
+                <li><Link to="/home-software-company" className="dropdown-item"> Software Company</Link></li>
+                <li><Link to="/home-digital-agency" className="dropdown-item"> Digital Agency</Link></li>
+                <li><Link to="/home-modren-shop" className="dropdown-item"> Modren Shop</Link></li>
+              </ul>
+            </li>
+            <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                pages
+                <small className="hot alert-danger text-danger">hot</small>
+              </a>
+              <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                <li><Link to="/page-about-app" className="dropdown-item">about</Link></li>
+                <li><Link to="/page-product-app" className="dropdown-item">product</Link></li>
+                <li><Link to="/page-services-app" className="dropdown-item">services</Link></li>
+                <li><Link to="/page-shop-app" className="dropdown-item">shop</Link></li>
+                <li><Link to="/page-single-project-app" className="dropdown-item">single project</Link></li>
+              </ul>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-portfolio-app" className="nav-link">
+                portfolio
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-blog-app" className="nav-link">
+                blog
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-contact-app" className="nav-link">
+                <img src="/assets/img/icons/nav_icon/price.png" alt="" className="icon-15 me-2" />
+                contact 
+              </Link>
+            </li>
+          </ul>
+          <div className="nav-side">
+            <div className="d-flex align-items-center">
+              <a href="#" className="search-icon me-4">
+                <i className="bi bi-person"></i>
+              </a>
+              <Link to="/page-contact-app" className="btn rounded-pill brd-gray hover-blue4 sm-butn fw-bold">
+                <span>Join iteck Hub <i className="bi bi-arrow-right ms-1"></i> </span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar

src/components/Navbars/CloudNav/TopNav.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+const TopNav = () => {
+  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 (
+    <div className="top-navbar style-9">
+      <div className="container">
+        <div className="row justify-content-between align-items-center gx-0">
+          <div className="col-7">
+            <div className="top_info">
+              <a href="#" className="me-4">
+                <i className="fas fa-envelope-open me-1"></i>
+                <span>info@iteck-tech</span>
+              </a>
+              <a href="#">
+                <i className="fas fa-phone me-1"></i>
+                <span>+89 (000) 786 999</span>
+              </a>
+            </div>
+          </div>
+          <div className="col-5">
+            <div className="side_links d-flex justify-content-lg-end">
+              <a href="#" className="me-4"> Careers </a>
+              <a href="#" className="me-4"> Faq </a>
+              <div className="dropdown border-1 border-start ps-4" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                <a className="dropdown-toggle fw-bold" href="#" id="navbarDropdown1" role="button"
+                  data-bs-toggle="dropdown" aria-expanded="false">
+                  English
+                </a>
+                <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                  <li><a className="dropdown-item" href="#0"> Arabic </a></li>
+                  <li><a className="dropdown-item" href="#0"> french </a></li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopNav

src/components/Navbars/CloudNav/index.jsx

@@ -0,0 +1,121 @@
+import React, { useEffect, useRef } from 'react';
+import { Link } from 'gatsby';
+import navbarScrollEffect from "common/navbarScrollEffect";
+
+const Navbar = () => {
+  const navbarRef = useRef(null);
+
+  useEffect(() => {
+    navbarScrollEffect(navbarRef.current);
+  }, [navbarRef]);
+  
+  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');
+  }
+
+  const toggleSideMenu = (e) => {
+    e.preventDefault();
+
+    document.querySelector('.side_menu_btn').classList.toggle('active');
+    
+    const side_menu = document.getElementById('side_menu');
+    const side_overlay = document.querySelector('.side_overlay');
+
+    side_menu && side_menu.classList.toggle('show');
+    side_overlay && side_overlay.classList.toggle('show');
+  }
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-dark style-9" ref={navbarRef}>
+      <div className="container content">
+        <a className="navbar-brand" href="#">
+          <img src="/assets/img/logo_9.png" alt="" />
+        </a>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+          aria-expanded="false" aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav m-auto mb-2 mb-lg-0 ps-4">
+            <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+              <a className="nav-link active dropdown-toggle" href="#" id="navbarDropdown1" role="button"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                Homes
+              </a>
+              <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                <li><Link to="/" className="dropdown-item">Landing Preview</Link></li>
+                <li><Link to="/home-it-solutions2" className="dropdown-item"> Creative It Solutions</Link></li>
+                <li><Link to="/home-data-analysis" className="dropdown-item"> Data Analysis</Link></li>
+                <li><Link to="/home-app-landing" className="dropdown-item"> App Landing</Link></li>
+                <li><Link to="/home-saas-technology" className="dropdown-item"> Saas Technology</Link></li>
+                <li><Link to="/home-marketing-startup" className="dropdown-item"> Marketing Startup</Link></li>
+                <li><Link to="/home-it-solutions" className="dropdown-item"> It Solution</Link></li>
+                <li><Link to="/home-software-company" className="dropdown-item"> Software Company</Link></li>
+                <li><Link to="/home-digital-agency" className="dropdown-item"> Digital Agency</Link></li>
+                <li><Link to="/home-modren-shop" className="dropdown-item"> Modren Shop</Link></li>
+              </ul>
+            </li>
+            <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                pages
+                {/* <!-- <small className="hot alert-danger text-danger">hot</small> --> */}
+              </a>
+              <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                <li><Link to="/page-about-app" className="dropdown-item">about</Link></li>
+                <li><Link to="/page-product-app" className="dropdown-item">product</Link></li>
+                <li><Link to="/page-services-app" className="dropdown-item">services</Link></li>
+                <li><Link to="/page-shop-app" className="dropdown-item">shop</Link></li>
+                <li><Link to="/page-single-project-app" className="dropdown-item">single project</Link></li>
+              </ul>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-portfolio-app" className="nav-link">
+                portfolio
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-blog-app" className="nav-link">
+                blog
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-contact-app" className="nav-link">
+                contact
+              </Link>
+            </li>
+          </ul>
+          <div className="nav-side">
+            <div className="d-flex align-items-center">
+              <a href="#" className="me-4">
+                <img src="/assets/img/icons/cart_light.png" alt="" />
+              </a>
+              <a href="#0" className="me-4">
+                <img src="/assets/img/icons/user_light.png" alt="" />
+              </a>
+              <a href="#0" className="side_menu_btn" onClick={toggleSideMenu}>
+                <img src="/assets/img/icons/4dots_light.png" alt="" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar;

src/components/Navbars/DataAnalysis/TopNav.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const TopNav = () => {
+  return (
+    <div className="top-navbar style-8 d-none d-lg-block">
+      <div className="container">
+        <div className="content bg-white py-2 px-4 rounded-pill">
+          <div className="row">
+            <div className="col-lg-6">
+              <p>  Offer is going on till friday, <a href="#" className="color-main"> $1.99/mo.  </a> </p>
+            </div>
+            <div className="col-lg-6">
+              <div className="text-lg-end">
+                <p className="color-999"> Get Support: <a href="callto:+809 (000) 888 99" className="color-000"> +809 (000) 888 99 </a> </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopNav

src/components/Navbars/DataAnalysis/index.jsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef } from 'react';
+import { Link } from 'gatsby';
+import TopNav from './TopNav';
+import navbarScrollEffect from "common/navbarScrollEffect";
+
+const Navbar = () => {
+  const navbarRef = useRef(null);
+
+  useEffect(() => {
+    navbarScrollEffect(navbarRef.current);
+  }, [navbarRef]);
+  
+  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 (
+    <div className="navs-container pt-4">
+      <TopNav />
+      <nav className="navbar navbar-expand-lg navbar-light style-8" ref={navbarRef}>
+        <div className="container">
+          <a className="navbar-brand" href="#">
+            <img src="/assets/img/logo_home8.png" alt="" />
+          </a>
+          <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+            aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <div className="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul className="navbar-nav m-auto mb-2 mb-lg-0 ps-4">
+              <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                <a className="nav-link active dropdown-toggle" href="#" id="navbarDropdown1" role="button"
+                  data-bs-toggle="dropdown" aria-expanded="false">
+                  Homes
+                </a>
+                <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                  <li><Link to="/" className="dropdown-item">Landing Preview</Link></li>
+                  <li><Link to="/home-it-solutions2" className="dropdown-item"> Creative It Solutions</Link></li>
+                  <li><Link to="/home-data-analysis" className="dropdown-item"> Data Analysis</Link></li>
+                  <li><Link to="/home-app-landing" className="dropdown-item"> App Landing</Link></li>
+                  <li><Link to="/home-saas-technology" className="dropdown-item"> Saas Technology</Link></li>
+                  <li><Link to="/home-marketing-startup" className="dropdown-item"> Marketing Startup</Link></li>
+                  <li><Link to="/home-it-solutions" className="dropdown-item"> It Solution</Link></li>
+                  <li><Link to="/home-software-company" className="dropdown-item"> Software Company</Link></li>
+                  <li><Link to="/home-digital-agency" className="dropdown-item"> Digital Agency</Link></li>
+                  <li><Link to="/home-modren-shop" className="dropdown-item"> Modren Shop</Link></li>
+                </ul>
+              </li>
+              <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button"
+                  data-bs-toggle="dropdown" aria-expanded="false">
+                  pages
+                  {/* <small className="hot alert-danger text-danger">hot</small> */}
+                </a>
+                <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                  <li><Link to="/page-about-app" className="dropdown-item">about</Link></li>
+                  <li><Link to="/page-product-app" className="dropdown-item">product</Link></li>
+                  <li><Link to="/page-services-app" className="dropdown-item">services</Link></li>
+                  <li><Link to="/page-shop-app" className="dropdown-item">shop</Link></li>
+                  <li><Link to="/page-single-project-app" className="dropdown-item">single project</Link></li>
+                </ul>
+              </li>
+              <li className="nav-item">
+                <Link to="/page-portfolio-app" className="nav-link">
+                  portfolio
+                </Link>
+              </li>
+              <li className="nav-item">
+                <Link to="/page-blog-app" className="nav-link">
+                  blog
+                </Link>
+              </li>
+              <li className="nav-item">
+                <Link to="/page-contact-app" className="nav-link">
+                  contact
+                </Link>
+              </li>
+            </ul>
+            <div className="nav-side">
+              <button className="butn bg-transparent border-main border-2 rounded-pill hover-orange1 color-main hover-shadow" type="submit">
+                <span className=""> Request A Demo <i className="fal fa-long-arrow-right ms-2"></i> </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </div>
+  )
+}
+
+export default Navbar

src/components/Navbars/DigitalNav/OnePageNav.jsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useRef } from 'react';
+import navbarScrollEffect from "common/navbarScrollEffect";
+import scrollToSection from 'common/scrollToSection';
+
+const OnePageNav = () => {
+  const navbarRef = useRef(null);
+
+  useEffect(() => {
+    navbarScrollEffect(navbarRef.current);
+  }, [navbarRef]);
+
+  useEffect(() => {
+    const sections = document.querySelectorAll('[data-scroll-index]');
+
+    window.addEventListener('scroll', () => {
+      sections.forEach(section => {
+        const index = section.getAttribute('data-scroll-index');
+        const offset = section.offsetTop;
+        const height = section.offsetHeight;
+        const scroll = window.scrollY;
+
+        if (scroll + 200 > offset && scroll + 200 < offset + height) {
+          document.querySelector(`[data-scroll-nav="${index}"]`).classList.add('active');
+        } else {
+          document.querySelector(`[data-scroll-nav="${index}"]`).classList.remove('active');
+        }
+      });
+    });
+  }, []);
+
+  return (
+    <nav className="navbar navbar-expand-lg navbar-light style-1" ref={navbarRef}>
+      <div className="container">
+        <a className="navbar-brand" href="#" onClick={scrollToSection}>
+          <img src="/assets/img/logo_cd.png" data-scroll-nav="0" alt="" />
+        </a>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+            <li className="nav-item dropdown">
+              <a className="nav-link" data-scroll-nav="1" onClick={scrollToSection}>
+                about us
+              </a>
+            </li>
+            <li className="nav-item dropdown">
+              <a className="nav-link" data-scroll-nav="2" onClick={scrollToSection}>
+                services
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" data-scroll-nav="3" onClick={scrollToSection}>
+                why us
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" data-scroll-nav="4" onClick={scrollToSection}>
+                portfolio
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" data-scroll-nav="5" onClick={scrollToSection}>
+                testimonials
+              </a>
+            </li>
+            <li className="nav-item">
+              <a className="nav-link" data-scroll-nav="6" onClick={scrollToSection}>
+                blog
+              </a>
+            </li>
+          </ul>
+          <div className="nav-side">
+            <div className="hotline pe-4">
+              <div className="icon me-3">
+                <i className="bi bi-telephone"></i>
+              </div>
+              <div className="cont">
+                <small className="text-muted m-0">hotline 24/7</small>
+                <h6>(+23) 5535 68 68</h6>
+              </div>
+            </div>
+            <div className="qoute-nav ps-4">
+              <a href="#0" className="btn sm-butn butn-gard border-0 text-white" data-scroll-nav="7">
+                <span>Free Quote</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default OnePageNav

src/components/Navbars/DigitalNav/TopNav.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+const TopNav = () => {
+  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 (
+    <div className="top-navbar style-1">
+      <div className="container">
+        <div className="content">
+          <div className="row align-items-center">
+            <div className="col-lg-8">
+              <div className="top-links">
+                <div className="text text-white">
+                  <i className="fas fa-bullhorn"></i>
+                  <strong>Now Hiring:</strong>
+                  <span>Are you a driven and motivated <a href="#" className="p-0"><u>1st Line IT Support Engineer?</u></a></span>
+                </div>
+              </div>
+            </div>
+            <div className="col-lg-4">
+              <div className="r-side">
+                <div className="socail-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-instagram"></i>
+                  </a>
+                </div>
+                <div className="dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+                  <a className="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
+                    <img className="me-1" src="/assets/img/lang.png" alt="" /> English
+                  </a>
+                  <ul className="dropdown-menu" aria-labelledby="dropdownMenuLink">
+                    <li><a className="dropdown-item" href="#">French</a></li>
+                    <li><a className="dropdown-item" href="#">Arabic</a></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default TopNav

src/components/Navbars/DigitalNav/index.jsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react';
+import { Link } from 'gatsby';
+import navbarScrollEffect from "common/navbarScrollEffect";
+
+const Navbar = () => {
+  const navbarRef = useRef(null);
+
+  useEffect(() => {
+    navbarScrollEffect(navbarRef.current);
+  }, [navbarRef]);
+
+  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 (
+    <nav className="navbar navbar-expand-lg navbar-light style-1" ref={navbarRef}>
+      <div className="container">
+        <a className="navbar-brand" href="#">
+          <img src="/assets/img/logo_cd.png" alt="" />
+        </a>
+        <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+          data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span className="navbar-toggler-icon"></span>
+        </button>
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+            <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+              <a className="nav-link active dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                Homes
+              </a>
+              <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                <li><Link to="/" className="dropdown-item">Landing Preview</Link></li>
+                <li><Link to="/home-it-solutions2" className="dropdown-item"> Creative It Solutions</Link></li>
+                <li><Link to="/home-data-analysis" className="dropdown-item"> Data Analysis</Link></li>
+                <li><Link to="/home-app-landing" className="dropdown-item"> App Landing</Link></li>
+                <li><Link to="/home-saas-technology" className="dropdown-item"> Saas Technology</Link></li>
+                <li><Link to="/home-marketing-startup" className="dropdown-item"> Marketing Startup</Link></li>
+                <li><Link to="/home-it-solutions" className="dropdown-item"> It Solution</Link></li>
+                <li><Link to="/home-software-company" className="dropdown-item"> Software Company</Link></li>
+                <li><Link to="/home-digital-agency" className="dropdown-item"> Digital Agency</Link></li>
+                <li><Link to="/home-modren-shop" className="dropdown-item"> Modren Shop</Link></li>
+              </ul>
+            </li>
+            <li className="nav-item dropdown" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
+              <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                pages
+              </a>
+              <ul className="dropdown-menu" aria-labelledby="navbarDropdown1">
+                <li><Link to="/page-about-5" className="dropdown-item">about</Link></li>
+                <li><Link to="/page-product-5" className="dropdown-item">product</Link></li>
+                <li><Link to="/page-services-5" className="dropdown-item">services</Link></li>
+                <li><Link to="/page-shop-5" className="dropdown-item">shop</Link></li>
+                <li><Link to="/page-single-project-5" className="dropdown-item">single project</Link></li>
+              </ul>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-portfolio-5" className="nav-link">
+                portfolio
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-blog-5" className="nav-link">
+                blog
+              </Link>
+            </li>
+            <li className="nav-item">
+              <Link to="/page-contact-5" className="nav-link">
+                contact
+              </Link>
+            </li>
+          </ul>
+          <div className="nav-side">
+            <div className="hotline pe-4">
+              <div className="icon me-3">
+                <i className="bi bi-telephone"></i>
+              </div>
+              <div className="cont">
+                <small className="text-muted m-0">hotline 24/7</small>
+                <h6>(+23) 5535 68 68</h6>
+              </div>
+            </div>
+            <div className="qoute-nav ps-4">
+              <a href="#" className="search-icon me-3">
+                <i className="bi bi-search"></i>
+              </a>
+              <a href="#" className="cart-icon me-3">
+                <i className="bi bi-cart"></i>
+                <span className="cart-num ms-1">2</span>
+              </a>
+              <Link to="/page-contact-5" className="btn sm-butn butn-gard border-0 text-white">
+                <span>Free Quote</span>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Navbar