1289 lines
		
	
	
		
			56 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			1289 lines
		
	
	
		
			56 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
import { noop } from "@tanstack/react-query";
 | 
						||
import React, { useEffect, useMemo, useState } from "react";
 | 
						||
 | 
						||
import "./LandingPage.css";
 | 
						||
import { Link } from "react-router-dom";
 | 
						||
 | 
						||
import { Swiper, SwiperSlide } from "swiper/react";
 | 
						||
// import required modules
 | 
						||
import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
 | 
						||
// Import Swiper styles
 | 
						||
import "swiper/css";
 | 
						||
import "swiper/css/navigation";
 | 
						||
import SwaperSlideContent from "./SwaperSlideContent";
 | 
						||
import SwaperBlogContent from "./SwaperBlogContent";
 | 
						||
import SubscriptionPlans from "./SubscriptionPlans";
 | 
						||
 | 
						||
const swiperConfig = {
 | 
						||
  spaceBetween: 30,
 | 
						||
  centeredSlides: true,
 | 
						||
  rewind: true,
 | 
						||
  autoplay: {
 | 
						||
    delay: 3500,
 | 
						||
    disableOnInteraction: false,
 | 
						||
  },
 | 
						||
  pagination: {
 | 
						||
    clickable: true,
 | 
						||
  },
 | 
						||
  keyboard: {
 | 
						||
    enabled: true,
 | 
						||
  },
 | 
						||
  navigation: false,
 | 
						||
  modules: [EffectFlip, Autoplay, Pagination, Navigation],
 | 
						||
  className: "mySwiper",
 | 
						||
};
 | 
						||
 | 
						||
const LandingPage = () => {
 | 
						||
  const [swiperRef, setSwiperRef] = useState(null);
 | 
						||
  return (
 | 
						||
    <div>
 | 
						||
      <nav className="layout-navbar shadow-none py-0">
 | 
						||
        <div className="container">
 | 
						||
          <div className="navbar navbar-expand-lg landing-navbar px-3 px-md-8">
 | 
						||
            {/*  Menu logo wrapper: Start */}
 | 
						||
            <div className="navbar-brand app-brand demo d-flex py-0 me-4 me-xl-8">
 | 
						||
              {/*  Mobile menu toggle: Start*/}
 | 
						||
              <button
 | 
						||
                className="navbar-toggler border-0 px-0 me-4"
 | 
						||
                type="button"
 | 
						||
                data-bs-toggle="collapse"
 | 
						||
                data-bs-target="#navbarSupportedContent"
 | 
						||
                aria-controls="navbarSupportedContent"
 | 
						||
                aria-expanded="false"
 | 
						||
                aria-label="Toggle navigation"
 | 
						||
              >
 | 
						||
                <i className="tf-icons bx bx-menu bx-lg align-middle text-heading fw-medium"></i>
 | 
						||
              </button>
 | 
						||
 | 
						||
              {/* <a href="/" className="app-brand-link">
 | 
						||
                <span className="app-brand-logo demo">
 | 
						||
                  <img src="/img/brand/marco.png" width={50}></img>
 | 
						||
                </span>
 | 
						||
                <span className="app-brand-text demo menu-text fw-bold ms-2 ps-1 ">
 | 
						||
                  PMS
 | 
						||
                 
 | 
						||
                </span>
 | 
						||
              </a> */}
 | 
						||
 | 
						||
              <a
 | 
						||
                href="/"
 | 
						||
                class="app-brand-link fw-bold navbar-brand text-green fs-5"
 | 
						||
              >
 | 
						||
                <span class="app-brand-logo demo">
 | 
						||
                  <img src="/img/brand/marco.png" width="50" />
 | 
						||
                </span>
 | 
						||
                <span class="text-blue">OnField</span>
 | 
						||
                <span>Work</span>
 | 
						||
                <span class="text-dark">.com</span>
 | 
						||
              </a>
 | 
						||
            </div>
 | 
						||
            {/*  Menu logo wrapper: End */}
 | 
						||
 | 
						||
            {/*  Menu wrapper: Start */}
 | 
						||
            <div
 | 
						||
              className="collapse navbar-collapse landing-nav-menu"
 | 
						||
              id="navbarSupportedContent"
 | 
						||
            >
 | 
						||
              <button
 | 
						||
                className="navbar-toggler border-0 text-heading position-absolute end-0 top-0 scaleX-n1-rtl p-2"
 | 
						||
                type="button"
 | 
						||
                data-bs-toggle="collapse"
 | 
						||
                data-bs-target="#navbarSupportedContent"
 | 
						||
                aria-controls="navbarSupportedContent"
 | 
						||
                aria-expanded="false"
 | 
						||
                aria-label="Toggle navigation"
 | 
						||
              >
 | 
						||
                <i className="tf-icons bx bx-x bx-lg"></i>
 | 
						||
              </button>
 | 
						||
              <ul className="navbar-nav me-auto">
 | 
						||
                <li className="nav-item">
 | 
						||
                  <a
 | 
						||
                    className="nav-link fw-medium"
 | 
						||
                    aria-current="page"
 | 
						||
                    href="#landingHero"
 | 
						||
                  >
 | 
						||
                    Home
 | 
						||
                  </a>
 | 
						||
                </li>
 | 
						||
                <li className="nav-item">
 | 
						||
                  <a className="nav-link fw-medium" href="#landingFeatures">
 | 
						||
                    Features
 | 
						||
                  </a>
 | 
						||
                </li>
 | 
						||
                <li className="nav-item">
 | 
						||
                  <a className="nav-link fw-medium" href="#landingPricing">
 | 
						||
                    Pricing
 | 
						||
                  </a>
 | 
						||
                </li>
 | 
						||
                <li className="nav-item">
 | 
						||
                  <a className="nav-link fw-medium" href="#landingFAQ">
 | 
						||
                    FAQ
 | 
						||
                  </a>
 | 
						||
                </li>
 | 
						||
                <li className="nav-item">
 | 
						||
                  <a className="nav-link fw-medium" href="#sectionBlog">
 | 
						||
                    Blogs
 | 
						||
                  </a>
 | 
						||
                </li>
 | 
						||
                <li className="nav-item">
 | 
						||
                  <a className="nav-link fw-medium" href="#landingCTA">
 | 
						||
                    Contact us
 | 
						||
                  </a>
 | 
						||
                </li>
 | 
						||
              </ul>
 | 
						||
            </div>
 | 
						||
            <div className="landing-menu-overlay d-lg-none"></div>
 | 
						||
            {/*  Menu wrapper: End */}
 | 
						||
            {/*  Toolbar: Start */}
 | 
						||
            <ul className="navbar-nav flex-row align-items-center ms-auto">
 | 
						||
              <li>
 | 
						||
                <Link className="btn btn-danger" to="/auth/login">
 | 
						||
                  <span className="tf-icons bx bx-log-in-circle scaleX-n1-rtl me-md-1"></span>
 | 
						||
                  <span className="d-none d-md-block">Login/Register</span>
 | 
						||
                </Link>
 | 
						||
              </li>
 | 
						||
            </ul>
 | 
						||
            {/*  Toolbar: End */}
 | 
						||
          </div>
 | 
						||
        </div>
 | 
						||
      </nav>
 | 
						||
      {/*  Navbar: End */}
 | 
						||
 | 
						||
      {/*  Sections:Start */}
 | 
						||
 | 
						||
      <div data-bs-spy="scroll" className="scrollspy-example">
 | 
						||
        {/*  Hero: Start */}
 | 
						||
        <section id="hero-animation">
 | 
						||
          <div
 | 
						||
            id="landingHero"
 | 
						||
            className="section-py landing-hero position-relative"
 | 
						||
          >
 | 
						||
            <div className="container">
 | 
						||
              <div className="hero-text-box text-center position-relative">
 | 
						||
                <h1 className="text-primary hero-title display-6 fw-extrabold">
 | 
						||
                  All-in-one platform to manage projects, people, and resources
 | 
						||
                  seamlessly.
 | 
						||
                </h1>
 | 
						||
                {/* <h2 className="hero-sub-title h6 mb-6">
 | 
						||
                  Production-ready & easy to use Admin Template
 | 
						||
                  <br className="d-none d-lg-block" />
 | 
						||
                  for Reliability and Customizability.
 | 
						||
                </h2> */}
 | 
						||
                <div className="landing-hero-btn d-inline-block position-relative">
 | 
						||
                  {/* <span className="hero-btn-item position-absolute d-none d-md-flex fw-medium">
 | 
						||
                    Join community
 | 
						||
                    <img
 | 
						||
                      src="./../../public/img/icons/Join-community-arrow.png"
 | 
						||
                      alt="Join community arrow"
 | 
						||
                      className="scaleX-n1-rtl"
 | 
						||
                    />
 | 
						||
                  </span> */}
 | 
						||
                  <a
 | 
						||
                    href="#landingPricing"
 | 
						||
                    className="btn btn-primary btn-lg me-5"
 | 
						||
                  >
 | 
						||
                    Get Early Access
 | 
						||
                  </a>
 | 
						||
                  <a
 | 
						||
                    href="/auth/reqest/demo"
 | 
						||
                    className="btn btn-lg btn-primary"
 | 
						||
                  >
 | 
						||
                    Request a Demo
 | 
						||
                  </a>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
 | 
						||
              <div
 | 
						||
                id="heroDashboardAnimation"
 | 
						||
                className="hero-animation-img mt-10"
 | 
						||
              >
 | 
						||
                <div
 | 
						||
                  id="heroAnimationImg"
 | 
						||
                  className="position-relative hero-dashboard-img"
 | 
						||
                >
 | 
						||
                  <Swiper
 | 
						||
                    spaceBetween={30}
 | 
						||
                    centeredSlides={true}
 | 
						||
                    rewind={true}
 | 
						||
                    autoplay={{
 | 
						||
                      delay: 3500,
 | 
						||
                      disableOnInteraction: false,
 | 
						||
                    }}
 | 
						||
                    pagination={{
 | 
						||
                      clickable: true,
 | 
						||
                    }}
 | 
						||
                    keyboard={{
 | 
						||
                      enabled: true,
 | 
						||
                    }}
 | 
						||
                    navigation={false}
 | 
						||
                    modules={[EffectFlip, Autoplay, Pagination, Navigation]}
 | 
						||
                    className="mySwiper"
 | 
						||
                    onSlideChange={() => {}}
 | 
						||
                    onSwiper={(swiper) => {}}
 | 
						||
                  >
 | 
						||
                    <SwiperSlide>
 | 
						||
                      <SwaperSlideContent
 | 
						||
                        ImageUrl="/img/app/dashboard-light-01.png"
 | 
						||
                        Title="Project & Task Management"
 | 
						||
                        Body="Plan, assign, and track projects and tasks seamlessly for better team collaboration."
 | 
						||
                      ></SwaperSlideContent>
 | 
						||
                    </SwiperSlide>
 | 
						||
 | 
						||
                    <SwiperSlide>
 | 
						||
                      <SwaperSlideContent
 | 
						||
                        ImageUrl="/img/app/dashboard-light-02.png"
 | 
						||
                        Title="Attendance & Leave Tracking"
 | 
						||
                        Body="Monitor employee attendance and manage leave requests with ease."
 | 
						||
                      ></SwaperSlideContent>
 | 
						||
                    </SwiperSlide>
 | 
						||
                    <SwiperSlide>
 | 
						||
                      <SwaperSlideContent
 | 
						||
                        ImageUrl="/img/app/dashboard-light-09.png"
 | 
						||
                        Title="Role-based Permissions"
 | 
						||
                        Body="Securely control access with customizable roles and permissions."
 | 
						||
                      ></SwaperSlideContent>
 | 
						||
                    </SwiperSlide>
 | 
						||
                    <SwiperSlide>
 | 
						||
                      <SwaperSlideContent
 | 
						||
                        ImageUrl="/img/app/dashboard-light-05.png"
 | 
						||
                        Title="Expense & Budget Tracking"
 | 
						||
                        Body="Keep projects on budget with real-time expense and cost management."
 | 
						||
                        ContentAlign="left"
 | 
						||
                      ></SwaperSlideContent>
 | 
						||
                    </SwiperSlide>
 | 
						||
                    <SwiperSlide>
 | 
						||
                      <SwaperSlideContent
 | 
						||
                        ImageUrl="img/app/dashboard-light-06.png"
 | 
						||
                        Title="Reporting & Analytics"
 | 
						||
                        Body="Gain actionable insights through powerful reports and analytics dashboards."
 | 
						||
                      ></SwaperSlideContent>
 | 
						||
                    </SwiperSlide>
 | 
						||
                    <SwiperSlide>
 | 
						||
                      <SwaperSlideContent
 | 
						||
                        ImageUrl="/img/app/dashboard-light-07.png"
 | 
						||
                        Title="Document Management"
 | 
						||
                        Body="Organize, share, and access all your project and employee documents in one place."
 | 
						||
                      ></SwaperSlideContent>
 | 
						||
                    </SwiperSlide>
 | 
						||
                    <SwiperSlide>
 | 
						||
                      <SwaperSlideContent
 | 
						||
                        ImageUrl="/img/app/dashboard-light-08.png"
 | 
						||
                        Title="Inventory Management"
 | 
						||
                        Body="Track materials, supplies, and assets — never run short again."
 | 
						||
                      ></SwaperSlideContent>
 | 
						||
                    </SwiperSlide>
 | 
						||
                  </Swiper>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
          <div className="landing-hero-blank"></div>
 | 
						||
        </section>
 | 
						||
        {/*  Hero: End */}
 | 
						||
 | 
						||
        {/*  Useful features: Start */}
 | 
						||
        <section id="landingFeatures" className="section-py landing-features">
 | 
						||
          <div className="container">
 | 
						||
            <div className="text-center mb-4">
 | 
						||
              <span className="badge bg-label-primary heading">
 | 
						||
                Useful Features
 | 
						||
              </span>
 | 
						||
            </div>
 | 
						||
            <h4 className="text-center mb-1">
 | 
						||
              <span className="position-relative fw-extrabold z-1">
 | 
						||
                From tasks to teams, documents to inventory —
 | 
						||
                {/* <img
 | 
						||
                  src="./../../public/img/icons/section-title-icon.png"
 | 
						||
                  alt="laptop charging"
 | 
						||
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
 | 
						||
                /> */}
 | 
						||
              </span>
 | 
						||
              everything your business needs in one place.
 | 
						||
            </h4>
 | 
						||
            <p className="text-center mb-12">
 | 
						||
              All-in-one platform to manage projects, people, and resources
 | 
						||
              seamlessly.
 | 
						||
            </p>
 | 
						||
            <div className="features-icon-wrapper row gx-0 gy-6 g-sm-12">
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/laptop.svg" alt="laptop charging" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">Project & Task Management</h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Plan, assign, and track projects and tasks seamlessly for
 | 
						||
                  better team collaboration.
 | 
						||
                </p>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/rocket.svg" alt="transition up" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">Attendance & Leave Tracking</h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Monitor employee attendance and manage leave requests with
 | 
						||
                  ease.
 | 
						||
                </p>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/paper.svg" alt="edit" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">Role-based Permissions</h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Securely control access with customizable roles and
 | 
						||
                  permissions.
 | 
						||
                </p>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/check.svg" alt="3d select solid" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">Expense & Budget Tracking</h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Keep projects on budget with real-time expense and cost
 | 
						||
                  management.
 | 
						||
                </p>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/user.svg" alt="user" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">Reporting & Analytics</h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Gain actionable insights through powerful reports and
 | 
						||
                  analytics dashboards.
 | 
						||
                </p>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/keyboard.svg" alt="keyboard" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">Document Management</h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Organize, share, and access all your project and employee
 | 
						||
                  documents in one place.
 | 
						||
                </p>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/keyboard.svg" alt="keyboard" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">
 | 
						||
                  Service Provider & Subcontractor Tracking
 | 
						||
                </h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Manage multiple service providers and subcontractors
 | 
						||
                  efficiently within projects.
 | 
						||
                </p>
 | 
						||
              </div>{" "}
 | 
						||
              <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
                <div className="text-center mb-4">
 | 
						||
                  <img src="/img/icons/user.svg" alt="keyboard" />
 | 
						||
                </div>
 | 
						||
                <h5 className="mb-2">Inventory Management</h5>
 | 
						||
                <p className="features-icon-description">
 | 
						||
                  Track materials, supplies, and assets — never run short again.
 | 
						||
                </p>
 | 
						||
              </div>{" "}
 | 
						||
            </div>
 | 
						||
            <div className="col-lg-3 col-sm-4 text-center features-icon-box">
 | 
						||
              <div className="text-center mb-4">
 | 
						||
                <img src="/img/icons/keyboard.svg" alt="keyboard" />
 | 
						||
              </div>
 | 
						||
              <h5 className="mb-2">Directory</h5>
 | 
						||
              <p className="features-icon-description">
 | 
						||
                Your team, suppliers, vendors organized and connected in one
 | 
						||
                unified directory.
 | 
						||
              </p>
 | 
						||
            </div>{" "}
 | 
						||
          </div>
 | 
						||
        </section>
 | 
						||
        {/*  Useful features: End */}
 | 
						||
 | 
						||
        {/* <!-- Real blog/ case studies: Start --> */}
 | 
						||
        <section
 | 
						||
          id="sectionBlog"
 | 
						||
          class="section-py bg-body landing-reviews pb-0"
 | 
						||
          hidden
 | 
						||
        >
 | 
						||
          {/* <!-- What people say slider: Start --> */}
 | 
						||
          <div class="container">
 | 
						||
            <div className="text-center mb-4">
 | 
						||
              <span className="badge bg-label-primary heading">
 | 
						||
                Case Studies
 | 
						||
              </span>
 | 
						||
            </div>
 | 
						||
            <h4 className="text-center mb-1">
 | 
						||
              <span className="position-relative fw-extrabold z-1 me-2">
 | 
						||
                Proven results, showcased
 | 
						||
              </span>
 | 
						||
              through client success stories
 | 
						||
            </h4>
 | 
						||
            <p className="text-center pb-2 mb-7">
 | 
						||
              Every business has unique goals, and our case studies highlight
 | 
						||
              <strong>
 | 
						||
                {" "}
 | 
						||
                how we tailor solutions to deliver real impact.
 | 
						||
              </strong>{" "}
 | 
						||
              <br></br>
 | 
						||
              See the transformations our clients have achieved with us
 | 
						||
            </p>
 | 
						||
 | 
						||
            <div class="row">
 | 
						||
              <div class="swiper-reviews-carousel">
 | 
						||
                <Swiper
 | 
						||
                  onSwiper={setSwiperRef}
 | 
						||
                  slidesPerView={4}
 | 
						||
                  centeredSlides={true}
 | 
						||
                  spaceBetween={30}
 | 
						||
                  pagination={{
 | 
						||
                    clickable: true,
 | 
						||
                  }}
 | 
						||
                  navigation={true}
 | 
						||
                  modules={[Autoplay, Pagination, Navigation]}
 | 
						||
                  className="mySwiper"
 | 
						||
                >
 | 
						||
                  <SwiperSlide>
 | 
						||
                    {" "}
 | 
						||
                    <SwaperBlogContent
 | 
						||
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs28_JnxJUKdAgaZsiWW4NyekVmfmLtpUtaA&s"
 | 
						||
                      Title="Transforming Residential Project Delivery with OnFieldWork.com"
 | 
						||
                      Body="Sunrise Builders struggled with delays, cost overruns, and lack of transparency in their multi-phase township project. Different contractors for civil, electrical, and finishing works operated in silos, and communication gaps with the Project Management Consultant (PMC) often led to rework and disputes."
 | 
						||
                    ></SwaperBlogContent>
 | 
						||
                  </SwiperSlide>
 | 
						||
                  <SwiperSlide>
 | 
						||
                    {" "}
 | 
						||
                    <SwaperBlogContent
 | 
						||
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaQ0iKVDfpfTY3kS2WgSH1n4yBhFhLQfiESg&s"
 | 
						||
                      Title="Commercial Tower Project Delivered On Time"
 | 
						||
                      Body="Metro Infra Developers faced coordination challenges between multiple stakeholders—PMC, structural consultants, MEP contractors, and vendors. Manual tracking via Excel sheets was slowing decision-making and progress reporting."
 | 
						||
                    ></SwaperBlogContent>
 | 
						||
                  </SwiperSlide>
 | 
						||
                  <SwiperSlide>
 | 
						||
                    {" "}
 | 
						||
                    <SwaperBlogContent
 | 
						||
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4ma1IiRhV1NRWVwQpzLi0kJK2E7ABP9Sn-Q&s"
 | 
						||
                      Title="Smart Collaboration for Mixed-Use Development"
 | 
						||
                      Body="The project required close collaboration between multiple consultants—architecture, interiors, civil, and MEP. Email-based communication caused delays, and the client had limited visibility into daily progress."
 | 
						||
                    ></SwaperBlogContent>
 | 
						||
                  </SwiperSlide>
 | 
						||
                  <SwiperSlide>
 | 
						||
                    {" "}
 | 
						||
                    <SwaperBlogContent
 | 
						||
                      ImageUrl="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROvl-qI8KIDHMKLfMyGppCLpluAj9nxFPqFy-YJ7kqc9L7LvPeSW3AZDWSOV62VAaYKO0&usqp=CAU"
 | 
						||
                      Title="On-Time Delivery of a Luxury Villa Project"
 | 
						||
                      Body="Elite Constructions was managing multiple luxury villas in parallel, each with unique specifications. The PMC struggled with tracking progress across sites, ensuring quality compliance, and keeping the high-profile clients updated. Manual reporting caused delays, and missed dependencies risked extending timelines."
 | 
						||
                    ></SwaperBlogContent>
 | 
						||
                  </SwiperSlide>
 | 
						||
                </Swiper>
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
        </section>
 | 
						||
        {/* <!-- Real customers reviews: End --> */}
 | 
						||
 | 
						||
        {/*  Pricing plans: Start */}
 | 
						||
        <section
 | 
						||
          id="landingPricing"
 | 
						||
          className="section-py bg-body landing-pricing"
 | 
						||
        >
 | 
						||
          <div className="container">
 | 
						||
            <div className="text-center mb-4">
 | 
						||
              <span className="badge bg-label-primary heading">
 | 
						||
                Pricing Plans
 | 
						||
              </span>
 | 
						||
            </div>
 | 
						||
            <h4 className="text-center mb-1">
 | 
						||
              <span className="position-relative fw-extrabold z-1 me-2">
 | 
						||
                Tailored pricing plans
 | 
						||
                {/* <img
 | 
						||
                  src="./../../public/img/icons/section-title-icon.png"
 | 
						||
                  alt="laptop charging"
 | 
						||
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
 | 
						||
                /> */}
 | 
						||
              </span>
 | 
						||
              designed for you
 | 
						||
            </h4>
 | 
						||
            <p className="text-center pb-2 mb-7">
 | 
						||
              No matter which plan you choose, you’ll get access to powerful
 | 
						||
              features. <strong>Choose the best plan to fit your needs.</strong>
 | 
						||
            </p>
 | 
						||
            {/* <SubscriptionPlans/> */}
 | 
						||
            <SubscriptionPlans />
 | 
						||
          </div>
 | 
						||
        </section>
 | 
						||
        {/*  Pricing plans: End */}
 | 
						||
 | 
						||
        {/*  Fun facts: Start */}
 | 
						||
        <section
 | 
						||
          id="landingFunFacts"
 | 
						||
          className="section-py landing-fun-facts "
 | 
						||
          style={{ display: "none" }}
 | 
						||
        >
 | 
						||
          <div className="container">
 | 
						||
            <div className="row gy-6">
 | 
						||
              <div className="col-sm-6 col-lg-3">
 | 
						||
                <div className="card border border-primary shadow-none">
 | 
						||
                  <div className="card-body text-center">
 | 
						||
                    <img
 | 
						||
                      src="/img/icons/laptop.svg"
 | 
						||
                      alt="laptop"
 | 
						||
                      className="mb-4"
 | 
						||
                    />
 | 
						||
                    <h3 className="mb-0">7.1k+</h3>
 | 
						||
                    <p className="fw-medium mb-0">
 | 
						||
                      Support Tickets
 | 
						||
                      <br />
 | 
						||
                      Resolved
 | 
						||
                    </p>
 | 
						||
                  </div>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
              <div className="col-sm-6 col-lg-3">
 | 
						||
                <div className="card border border-success shadow-none">
 | 
						||
                  <div className="card-body text-center">
 | 
						||
                    <img
 | 
						||
                      src="/img/icons/user-success.svg"
 | 
						||
                      alt="laptop"
 | 
						||
                      className="mb-4"
 | 
						||
                    />
 | 
						||
                    <h3 className="mb-0">50k+</h3>
 | 
						||
                    <p className="fw-medium mb-0">
 | 
						||
                      Join creatives
 | 
						||
                      <br />
 | 
						||
                      community
 | 
						||
                    </p>
 | 
						||
                  </div>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
              <div className="col-sm-6 col-lg-3">
 | 
						||
                <div className="card border border-info shadow-none">
 | 
						||
                  <div className="card-body text-center">
 | 
						||
                    <img
 | 
						||
                      src="/img/icons/diamond-info.svg"
 | 
						||
                      alt="laptop"
 | 
						||
                      className="mb-4"
 | 
						||
                    />
 | 
						||
                    <h3 className="mb-0">4.8/5</h3>
 | 
						||
                    <p className="fw-medium mb-0">
 | 
						||
                      Highly Rated
 | 
						||
                      <br />
 | 
						||
                      Products
 | 
						||
                    </p>
 | 
						||
                  </div>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
              <div className="col-sm-6 col-lg-3">
 | 
						||
                <div className="card border border-warning shadow-none">
 | 
						||
                  <div className="card-body text-center">
 | 
						||
                    <img
 | 
						||
                      src="/img/icons/check-warning.svg"
 | 
						||
                      alt="laptop"
 | 
						||
                      className="mb-4"
 | 
						||
                    />
 | 
						||
                    <h3 className="mb-0">100%</h3>
 | 
						||
                    <p className="fw-medium mb-0">
 | 
						||
                      Money Back
 | 
						||
                      <br />
 | 
						||
                      Guarantee
 | 
						||
                    </p>
 | 
						||
                  </div>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
        </section>
 | 
						||
        {/*  Fun facts: End */}
 | 
						||
 | 
						||
        {/*  FAQ: Start */}
 | 
						||
        <section id="landingFAQ" className="section-py bg-body landing-faq">
 | 
						||
          <div className="container">
 | 
						||
            <div className="text-center mb-4">
 | 
						||
              <span className="badge bg-label-primary heading">FAQ</span>
 | 
						||
            </div>
 | 
						||
            <h4 className="text-center mb-1">
 | 
						||
              Frequently Asked
 | 
						||
              <span className="position-relative fw-extrabold z-1 ms-2">
 | 
						||
                Questions
 | 
						||
                {/* <img
 | 
						||
                  src="/img/icons/section-title-icon.png"
 | 
						||
                  alt="laptop charging"
 | 
						||
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
 | 
						||
                /> */}
 | 
						||
              </span>
 | 
						||
            </h4>
 | 
						||
            <p className="text-center mb-12 pb-md-4">
 | 
						||
              Browse through these FAQs to find answers to commonly asked
 | 
						||
              questions.
 | 
						||
            </p>
 | 
						||
            <div className="row gy-12 align-items-center">
 | 
						||
              <div className="col-lg-5">
 | 
						||
                <div className="text-center">
 | 
						||
                  <img
 | 
						||
                    src="/img/illustrations/faq-boy-with-logos.png"
 | 
						||
                    alt="faq boy with logos"
 | 
						||
                    className="faq-image"
 | 
						||
                  />
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-7">
 | 
						||
                <div className="accordion" id="accordionExample">
 | 
						||
                  <div className="card accordion-item">
 | 
						||
                    <h2 className="accordion-header" id="headingOne">
 | 
						||
                      <button
 | 
						||
                        type="button"
 | 
						||
                        className="accordion-button"
 | 
						||
                        data-bs-toggle="collapse"
 | 
						||
                        data-bs-target="#accordionOne"
 | 
						||
                        aria-expanded="true"
 | 
						||
                        aria-controls="accordionOne"
 | 
						||
                      >
 | 
						||
                        What is OnFieldWork.com?
 | 
						||
                      </button>
 | 
						||
                    </h2>
 | 
						||
 | 
						||
                    <div
 | 
						||
                      id="accordionOne"
 | 
						||
                      className="accordion-collapse collapse"
 | 
						||
                      data-bs-parent="#accordionExample"
 | 
						||
                    >
 | 
						||
                      <div className="accordion-body text-start">
 | 
						||
                        A smart Project Management System designed to bring
 | 
						||
                        teams, tasks, and timelines together in one place. With
 | 
						||
                        AI-driven insights, role-based access, and seamless
 | 
						||
                        reporting, it empowers organizations to deliver projects
 | 
						||
                        faster and smarter.
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>
 | 
						||
                  <div className="card accordion-item">
 | 
						||
                    <h2 className="accordion-header" id="headingTwo">
 | 
						||
                      <button
 | 
						||
                        type="button"
 | 
						||
                        className="accordion-button collapsed"
 | 
						||
                        data-bs-toggle="collapse"
 | 
						||
                        data-bs-target="#accordionTwo"
 | 
						||
                        aria-expanded="false"
 | 
						||
                        aria-controls="accordionTwo"
 | 
						||
                      >
 | 
						||
                        Can I switch or cancel my plan?
 | 
						||
                      </button>
 | 
						||
                    </h2>
 | 
						||
                    <div
 | 
						||
                      id="accordionTwo"
 | 
						||
                      className="accordion-collapse collapse"
 | 
						||
                      aria-labelledby="headingTwo"
 | 
						||
                      data-bs-parent="#accordionExample"
 | 
						||
                    >
 | 
						||
                      <div className="accordion-body text-start">
 | 
						||
                        Yes, you have full flexibility to manage your
 | 
						||
                        subscription. You can upgrade to a higher plan to unlock
 | 
						||
                        more features, downgrade to a smaller plan if your needs
 | 
						||
                        change, or cancel your subscription anytime. Plan
 | 
						||
                        changes take effect instantly, and billing adjustments
 | 
						||
                        are applied on a pro-rated basis.
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>
 | 
						||
                  <div className="card accordion-item active">
 | 
						||
                    <h2 className="accordion-header" id="headingThree">
 | 
						||
                      <button
 | 
						||
                        type="button"
 | 
						||
                        className="accordion-button"
 | 
						||
                        data-bs-toggle="collapse"
 | 
						||
                        data-bs-target="#accordionThree"
 | 
						||
                        aria-expanded="false"
 | 
						||
                        aria-controls="accordionThree"
 | 
						||
                      >
 | 
						||
                        How secure is OnFieldWork.com?
 | 
						||
                      </button>
 | 
						||
                    </h2>
 | 
						||
                    <div
 | 
						||
                      id="accordionThree"
 | 
						||
                      className="accordion-collapse collapse show"
 | 
						||
                      aria-labelledby="headingThree"
 | 
						||
                      data-bs-parent="#accordionExample"
 | 
						||
                    >
 | 
						||
                      <div className="accordion-body text-start">
 | 
						||
                        Security is at the core of OnFieldWork.com. We use
 | 
						||
                        industry-standard encryption (SSL/TLS) to protect data
 | 
						||
                        in transit and advanced encryption to safeguard data at
 | 
						||
                        rest. Role-based access controls ensure that only
 | 
						||
                        authorized users can access sensitive information. Our
 | 
						||
                        system is hosted on secure, cloud-ready infrastructure
 | 
						||
                        with regular backups, monitoring, and compliance with
 | 
						||
                        best practices to keep your data safe and available at
 | 
						||
                        all times.
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>
 | 
						||
                  <div className="card accordion-item">
 | 
						||
                    <h2 className="accordion-header" id="headingFour">
 | 
						||
                      <button
 | 
						||
                        type="button"
 | 
						||
                        className="accordion-button collapsed"
 | 
						||
                        data-bs-toggle="collapse"
 | 
						||
                        data-bs-target="#accordionFour"
 | 
						||
                        aria-expanded="false"
 | 
						||
                        aria-controls="accordionFour"
 | 
						||
                      >
 | 
						||
                        Where can i get help if I have more questions?
 | 
						||
                      </button>
 | 
						||
                    </h2>
 | 
						||
                    <div
 | 
						||
                      id="accordionFour"
 | 
						||
                      className="accordion-collapse collapse"
 | 
						||
                      aria-labelledby="headingFour"
 | 
						||
                      data-bs-parent="#accordionExample"
 | 
						||
                    >
 | 
						||
                      <div className="accordion-body text-start">
 | 
						||
                        You can reach our support team anytime through the
 | 
						||
                        in-app help center, email, or live chat. We also provide
 | 
						||
                        a detailed knowledge base and FAQs to guide you through
 | 
						||
                        common queries. For personalized assistance, our support
 | 
						||
                        specialists are always ready to help you.
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>
 | 
						||
                  <div className="card accordion-item">
 | 
						||
                    <h2 className="accordion-header" id="headingFive">
 | 
						||
                      <button
 | 
						||
                        type="button"
 | 
						||
                        className="accordion-button collapsed"
 | 
						||
                        data-bs-toggle="collapse"
 | 
						||
                        data-bs-target="#accordionFive"
 | 
						||
                        aria-expanded="false"
 | 
						||
                        aria-controls="accordionFive"
 | 
						||
                      >
 | 
						||
                        Which license is applicable for SASS application?
 | 
						||
                      </button>
 | 
						||
                    </h2>
 | 
						||
                    <div
 | 
						||
                      id="accordionFive"
 | 
						||
                      className="accordion-collapse collapse"
 | 
						||
                      aria-labelledby="headingFive"
 | 
						||
                      data-bs-parent="#accordionExample"
 | 
						||
                    >
 | 
						||
                      <div className="accordion-body text-start">
 | 
						||
                        OnFieldWork.com operate under a proprietary license
 | 
						||
                        combined with a subscription model. This means customers
 | 
						||
                        don’t own the software but are granted the right to
 | 
						||
                        access and use it through the cloud under our Terms of
 | 
						||
                        Service. Depending on the plan, licensing may be based
 | 
						||
                        on users, features, or usage, and you can upgrade,
 | 
						||
                        downgrade, or cancel at any time. non!
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>
 | 
						||
                  <div className="card accordion-item">
 | 
						||
                    <h2 className="accordion-header" id="headingSix">
 | 
						||
                      <button
 | 
						||
                        type="button"
 | 
						||
                        className="accordion-button collapsed"
 | 
						||
                        data-bs-toggle="collapse"
 | 
						||
                        data-bs-target="#accordionSix"
 | 
						||
                        aria-expanded="false"
 | 
						||
                        aria-controls="accordionSix"
 | 
						||
                      >
 | 
						||
                        Can I customize OnFieldWork.com for my business needs?
 | 
						||
                      </button>
 | 
						||
                    </h2>
 | 
						||
                    <div
 | 
						||
                      id="accordionSix"
 | 
						||
                      className="accordion-collapse collapse"
 | 
						||
                      aria-labelledby="headingSix"
 | 
						||
                      data-bs-parent="#accordionExample"
 | 
						||
                    >
 | 
						||
                      <div className="accordion-body text-start">
 | 
						||
                        Yes, OnFieldWork.com is designed to be flexible and
 | 
						||
                        adaptable. You can customize workflows, user roles,
 | 
						||
                        permissions, and reporting to match your organization’s
 | 
						||
                        unique processes. Depending on your plan, we also
 | 
						||
                        support advanced customization such as integrating with
 | 
						||
                        third-party tools, adding custom fields, and tailoring
 | 
						||
                        modules to fit your business requirements.
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>{" "}
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
        </section>
 | 
						||
        {/*  FAQ: End */}
 | 
						||
 | 
						||
        {/*  CTA: Start */}
 | 
						||
        <section id="landingCTA" className="section-py landing-cta ">
 | 
						||
          <img
 | 
						||
            src="img/backgrounds/cta-bg-light.png"
 | 
						||
            className="position-absolute bottom-0 end-0 scaleX-n1-rtl h-100 w-100 z-n1"
 | 
						||
            alt="cta image"
 | 
						||
            data-app-light-img="backgrounds/cta-bg-light.png"
 | 
						||
            data-app-dark-img="backgrounds/cta-bg-dark.png"
 | 
						||
          />
 | 
						||
          <div className="container">
 | 
						||
            <div className="text-center mb-4 mt-5">
 | 
						||
              <span className="badge bg-label-primary heading">Contact US</span>
 | 
						||
            </div>
 | 
						||
 | 
						||
            <div className="row align-items-center gy-12  mb-12">
 | 
						||
              <div className="col-lg-6 pt-lg-12 text-center text-lg-start">
 | 
						||
                <img
 | 
						||
                  style={{ width: "80%" }}
 | 
						||
                  src="/img/images/contact-customer-service.png"
 | 
						||
                  alt="hero elements"
 | 
						||
                ></img>
 | 
						||
              </div>
 | 
						||
              <div
 | 
						||
                className="col-lg-6 text-start text-sm-center text-lg-start p-5 rounded"
 | 
						||
                style={{
 | 
						||
                  border: "1px solid #d5d5d5",
 | 
						||
                }}
 | 
						||
              >
 | 
						||
                <div className="mt-5">
 | 
						||
                  {" "}
 | 
						||
                  <h4 className="text-start mb-1">
 | 
						||
                    <span className="position-relative fw-extrabold z-1">
 | 
						||
                      Let's Work
 | 
						||
                      {/* <img
 | 
						||
                        src="/img/icons/section-title-icon.png"
 | 
						||
                        alt="laptop charging"
 | 
						||
                        className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
 | 
						||
                      /> */}
 | 
						||
                    </span>
 | 
						||
                    Together
 | 
						||
                  </h4>
 | 
						||
                  <p className="text-start pb-md-4">
 | 
						||
                    Any question or remark? just write us a message
 | 
						||
                  </p>
 | 
						||
                  <div className="row g-4 ">
 | 
						||
                    <div className="col-md-6 col-lg-12 col-xl-6">
 | 
						||
                      <div className="d-flex align-items-center">
 | 
						||
                        <div className="badge bg-label-primary rounded p-1_5 me-3">
 | 
						||
                          <i className="bx bx-envelope bx-lg"></i>
 | 
						||
                        </div>
 | 
						||
                        <div>
 | 
						||
                          <p className="mb-0">Email</p>
 | 
						||
                          <h6 className="mb-0">
 | 
						||
                            <a
 | 
						||
                              href="mailto:example@gmail.com"
 | 
						||
                              className="text-heading"
 | 
						||
                            >
 | 
						||
                              sales@marcoaiot.com
 | 
						||
                            </a>
 | 
						||
                          </h6>
 | 
						||
                        </div>
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                    <div className="col-md-6 col-lg-12 col-xl-6">
 | 
						||
                      <div className="d-flex align-items-center">
 | 
						||
                        <div className="badge bg-label-success rounded p-1_5 me-3">
 | 
						||
                          <i className="bx bx-phone-call bx-lg"></i>
 | 
						||
                        </div>
 | 
						||
                        <div>
 | 
						||
                          <p className="mb-0">Phone</p>
 | 
						||
                          <h6 className="mb-0">
 | 
						||
                            <a
 | 
						||
                              href="tel:+1234-568-963"
 | 
						||
                              className="text-heading"
 | 
						||
                            >
 | 
						||
                              +91 70288 83755
 | 
						||
                            </a>
 | 
						||
                          </h6>
 | 
						||
                        </div>
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>
 | 
						||
                </div>
 | 
						||
                <div className="mt-10">
 | 
						||
                  <h5 className="cta-title text-primary  mb-1">
 | 
						||
                    Ready to Get Started?
 | 
						||
                  </h5>
 | 
						||
                  <h5 className="text-body mb-8">
 | 
						||
                    Start your project with a free trial
 | 
						||
                  </h5>
 | 
						||
                  {/* <a href="#landingPricing" className="btn btn-lg btn-primary">
 | 
						||
                    Get Started
 | 
						||
                  </a>{" "} */}
 | 
						||
                  <a
 | 
						||
                    href="/auth/reqest/demo"
 | 
						||
                    className="btn btn-lg btn-primary"
 | 
						||
                  >
 | 
						||
                    Request a Demo
 | 
						||
                  </a>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
        </section>
 | 
						||
        {/*  CTA: End */}
 | 
						||
 | 
						||
        {/*  Contact Us: Start */}
 | 
						||
        <section
 | 
						||
          id="landingContact"
 | 
						||
          className="section-py bg-body landing-contact"
 | 
						||
          style={{ display: "none" }}
 | 
						||
        >
 | 
						||
          <div className="container">
 | 
						||
            <div className="text-center mb-4">
 | 
						||
              <span className="badge bg-label-primary heading">Contact US</span>
 | 
						||
            </div>
 | 
						||
            <h4 className="text-center mb-1">
 | 
						||
              <span className="position-relative fw-extrabold z-1">
 | 
						||
                Let's work
 | 
						||
                <img
 | 
						||
                  src="/img/icons/section-title-icon.png"
 | 
						||
                  alt="laptop charging"
 | 
						||
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
 | 
						||
                />
 | 
						||
              </span>
 | 
						||
              together
 | 
						||
            </h4>
 | 
						||
            <p className="text-center mb-12 pb-md-4">
 | 
						||
              Any question or remark? just write us a message
 | 
						||
            </p>
 | 
						||
            <div className="row g-6">
 | 
						||
              <div className="col-lg-5">
 | 
						||
                <div className="contact-img-box position-relative border p-2 h-100">
 | 
						||
                  <img
 | 
						||
                    src="/img/icons/contact-border.png"
 | 
						||
                    alt="contact border"
 | 
						||
                    className="contact-border-img position-absolute d-none d-lg-block scaleX-n1-rtl"
 | 
						||
                  />
 | 
						||
                  <img
 | 
						||
                    src="/img/images/contact-customer-service.png"
 | 
						||
                    alt="contact customer service"
 | 
						||
                    className="contact-img w-100 scaleX-n1-rtl"
 | 
						||
                  />
 | 
						||
                  <div className="p-4 pb-2">
 | 
						||
                    <div className="row g-4">
 | 
						||
                      <div className="col-md-6 col-lg-12 col-xl-6">
 | 
						||
                        <div className="d-flex align-items-center">
 | 
						||
                          <div className="badge bg-label-primary rounded p-1_5 me-3">
 | 
						||
                            <i className="bx bx-envelope bx-lg"></i>
 | 
						||
                          </div>
 | 
						||
                          <div>
 | 
						||
                            <p className="mb-0">Email</p>
 | 
						||
                            <h6 className="mb-0">
 | 
						||
                              <a
 | 
						||
                                href="mailto:example@gmail.com"
 | 
						||
                                className="text-heading"
 | 
						||
                              >
 | 
						||
                                sales@marcoaiot.com
 | 
						||
                              </a>
 | 
						||
                            </h6>
 | 
						||
                          </div>
 | 
						||
                        </div>
 | 
						||
                      </div>
 | 
						||
                      <div className="col-md-6 col-lg-12 col-xl-6">
 | 
						||
                        <div className="d-flex align-items-center">
 | 
						||
                          <div className="badge bg-label-success rounded p-1_5 me-3">
 | 
						||
                            <i className="bx bx-phone-call bx-lg"></i>
 | 
						||
                          </div>
 | 
						||
                          <div>
 | 
						||
                            <p className="mb-0">Phone</p>
 | 
						||
                            <h6 className="mb-0">
 | 
						||
                              <a
 | 
						||
                                href="tel:+1234-568-963"
 | 
						||
                                className="text-heading"
 | 
						||
                              >
 | 
						||
                                +1234 568 963
 | 
						||
                              </a>
 | 
						||
                            </h6>
 | 
						||
                          </div>
 | 
						||
                        </div>
 | 
						||
                      </div>
 | 
						||
                    </div>
 | 
						||
                  </div>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
              <div className="col-lg-7">
 | 
						||
                <div className="card h-100">
 | 
						||
                  <div className="card-body">
 | 
						||
                    <h4 className="mb-2">Send a message</h4>
 | 
						||
                    <p className="mb-6">
 | 
						||
                      If you would like to discuss anything related to payment,
 | 
						||
                      account, licensing,
 | 
						||
                      <br className="d-none d-lg-block" />
 | 
						||
                      partnerships, or have pre-sales questions, you’re at the
 | 
						||
                      right place.
 | 
						||
                    </p>
 | 
						||
                    <form>
 | 
						||
                      <div className="row g-4">
 | 
						||
                        <div className="col-md-6">
 | 
						||
                          <label
 | 
						||
                            className="form-label"
 | 
						||
                            for="contact-form-fullname"
 | 
						||
                          >
 | 
						||
                            Full Name
 | 
						||
                          </label>
 | 
						||
                          <input
 | 
						||
                            type="text"
 | 
						||
                            className="form-control"
 | 
						||
                            id="contact-form-fullname"
 | 
						||
                            placeholder="john"
 | 
						||
                          />
 | 
						||
                        </div>
 | 
						||
                        <div className="col-md-6">
 | 
						||
                          <label
 | 
						||
                            className="form-label"
 | 
						||
                            for="contact-form-email"
 | 
						||
                          >
 | 
						||
                            Email
 | 
						||
                          </label>
 | 
						||
                          <input
 | 
						||
                            type="text"
 | 
						||
                            id="contact-form-email"
 | 
						||
                            className="form-control"
 | 
						||
                            placeholder="johndoe@gmail.com"
 | 
						||
                          />
 | 
						||
                        </div>
 | 
						||
                        <div className="col-12">
 | 
						||
                          <label
 | 
						||
                            className="form-label"
 | 
						||
                            for="contact-form-message"
 | 
						||
                          >
 | 
						||
                            Message
 | 
						||
                          </label>
 | 
						||
                          <textarea
 | 
						||
                            id="contact-form-message"
 | 
						||
                            className="form-control"
 | 
						||
                            rows="11"
 | 
						||
                            placeholder="Write a message"
 | 
						||
                          ></textarea>
 | 
						||
                        </div>
 | 
						||
                        <div className="col-12">
 | 
						||
                          <button type="submit" className="btn btn-primary">
 | 
						||
                            Send inquiry
 | 
						||
                          </button>
 | 
						||
                        </div>
 | 
						||
                      </div>
 | 
						||
                    </form>
 | 
						||
                  </div>
 | 
						||
                </div>
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
        </section>
 | 
						||
        {/*  Contact Us: End */}
 | 
						||
      </div>
 | 
						||
 | 
						||
      {/*  / Sections:End */}
 | 
						||
 | 
						||
      {/*  Footer: Start */}
 | 
						||
      <footer className="landing-footer bg-body footer-text">
 | 
						||
        <div
 | 
						||
          className="footer-top position-relative overflow-hidden z-1"
 | 
						||
          hidden
 | 
						||
        >
 | 
						||
          <img
 | 
						||
            src="/img/backgrounds/footer-bg.png"
 | 
						||
            alt="footer bg"
 | 
						||
            className="footer-bg banner-bg-img z-n1"
 | 
						||
          />
 | 
						||
          <div className="container">
 | 
						||
            <div className="row ">
 | 
						||
              <div className="col-lg-6">
 | 
						||
                <a href="#" className="app-brand-link ">
 | 
						||
                  <span className="app-brand-logo demo">
 | 
						||
                    <svg
 | 
						||
                      width="25"
 | 
						||
                      viewBox="0 0 25 42"
 | 
						||
                      version="1.1"
 | 
						||
                      xmlns="http://www.w3.org/2000/svg"
 | 
						||
                      xmlns:xlink="http://www.w3.org/1999/xlink"
 | 
						||
                    >
 | 
						||
                      <defs>
 | 
						||
                        <path
 | 
						||
                          d="M13.7918663,0.358365126 L3.39788168,7.44174259 C0.566865006,9.69408886 -0.379795268,12.4788597 0.557900856,15.7960551 C0.68998853,16.2305145 1.09562888,17.7872135 3.12357076,19.2293357 C3.8146334,19.7207684 5.32369333,20.3834223 7.65075054,21.2172976 L7.59773219,21.2525164 L2.63468769,24.5493413 C0.445452254,26.3002124 0.0884951797,28.5083815 1.56381646,31.1738486 C2.83770406,32.8170431 5.20850219,33.2640127 7.09180128,32.5391577 C8.347334,32.0559211 11.4559176,30.0011079 16.4175519,26.3747182 C18.0338572,24.4997857 18.6973423,22.4544883 18.4080071,20.2388261 C17.963753,17.5346866 16.1776345,15.5799961 13.0496516,14.3747546 L10.9194936,13.4715819 L18.6192054,7.984237 L13.7918663,0.358365126 Z"
 | 
						||
                          id="path-1"
 | 
						||
                        ></path>
 | 
						||
                        <path
 | 
						||
                          d="M5.47320593,6.00457225 C4.05321814,8.216144 4.36334763,10.0722806 6.40359441,11.5729822 C8.61520715,12.571656 10.0999176,13.2171421 10.8577257,13.5094407 L15.5088241,14.433041 L18.6192054,7.984237 C15.5364148,3.11535317 13.9273018,0.573395879 13.7918663,0.358365126 C13.5790555,0.511491653 10.8061687,2.3935607 5.47320593,6.00457225 Z"
 | 
						||
                          id="path-3"
 | 
						||
                        ></path>
 | 
						||
                        <path
 | 
						||
                          d="M7.50063644,21.2294429 L12.3234468,23.3159332 C14.1688022,24.7579751 14.397098,26.4880487 13.008334,28.506154 C11.6195701,30.5242593 10.3099883,31.790241 9.07958868,32.3040991 C5.78142938,33.4346997 4.13234973,34 4.13234973,34 C4.13234973,34 2.75489982,33.0538207 2.37032616e-14,31.1614621 C-0.55822714,27.8186216 -0.55822714,26.0572515 -4.05231404e-15,25.8773518 C0.83734071,25.6075023 2.77988457,22.8248993 3.3049379,22.52991 C3.65497346,22.3332504 5.05353963,21.8997614 7.50063644,21.2294429 Z"
 | 
						||
                          id="path-4"
 | 
						||
                        ></path>
 | 
						||
                        <path
 | 
						||
                          d="M20.6,7.13333333 L25.6,13.8 C26.2627417,14.6836556 26.0836556,15.9372583 25.2,16.6 C24.8538077,16.8596443 24.4327404,17 24,17 L14,17 C12.8954305,17 12,16.1045695 12,15 C12,14.5672596 12.1403557,14.1461923 12.4,13.8 L17.4,7.13333333 C18.0627417,6.24967773 19.3163444,6.07059163 20.2,6.73333333 C20.3516113,6.84704183 20.4862915,6.981722 20.6,7.13333333 Z"
 | 
						||
                          id="path-5"
 | 
						||
                        ></path>
 | 
						||
                      </defs>
 | 
						||
                      <g
 | 
						||
                        id="g-app-brand"
 | 
						||
                        stroke="none"
 | 
						||
                        stroke-width="1"
 | 
						||
                        fill="none"
 | 
						||
                        fill-rule="evenodd"
 | 
						||
                      >
 | 
						||
                        <g
 | 
						||
                          id="Brand-Logo"
 | 
						||
                          transform="translate(-27.000000, -15.000000)"
 | 
						||
                        >
 | 
						||
                          <g
 | 
						||
                            id="Icon"
 | 
						||
                            transform="translate(27.000000, 15.000000)"
 | 
						||
                          >
 | 
						||
                            <g
 | 
						||
                              id="Mask"
 | 
						||
                              transform="translate(0.000000, 8.000000)"
 | 
						||
                            >
 | 
						||
                              <mask id="mask-2" fill="white">
 | 
						||
                                <use xlink:href="#path-1"></use>
 | 
						||
                              </mask>
 | 
						||
                              <use fill="#696cff" xlink:href="#path-1"></use>
 | 
						||
                              <g id="Path-3" mask="url(#mask-2)">
 | 
						||
                                <use fill="#696cff" xlink:href="#path-3"></use>
 | 
						||
                                <use
 | 
						||
                                  fill-opacity="0.2"
 | 
						||
                                  fill="#FFFFFF"
 | 
						||
                                  xlink:href="#path-3"
 | 
						||
                                ></use>
 | 
						||
                              </g>
 | 
						||
                              <g id="Path-4" mask="url(#mask-2)">
 | 
						||
                                <use fill="#696cff" xlink:href="#path-4"></use>
 | 
						||
                                <use
 | 
						||
                                  fill-opacity="0.2"
 | 
						||
                                  fill="#FFFFFF"
 | 
						||
                                  xlink:href="#path-4"
 | 
						||
                                ></use>
 | 
						||
                              </g>
 | 
						||
                            </g>
 | 
						||
                            <g
 | 
						||
                              id="Triangle"
 | 
						||
                              transform="translate(19.000000, 11.000000) rotate(-300.000000) translate(-19.000000, -11.000000) "
 | 
						||
                            >
 | 
						||
                              <use fill="#696cff" xlink:href="#path-5"></use>
 | 
						||
                              <use
 | 
						||
                                fill-opacity="0.2"
 | 
						||
                                fill="#FFFFFF"
 | 
						||
                                xlink:href="#path-5"
 | 
						||
                              ></use>
 | 
						||
                            </g>
 | 
						||
                          </g>
 | 
						||
                        </g>
 | 
						||
                      </g>
 | 
						||
                    </svg>
 | 
						||
                  </span>
 | 
						||
                  <span className="app-brand-text demo text-white fw-bold ms-2 ps-1">
 | 
						||
                    <Link className="cta-title">
 | 
						||
                      <div className="app-brand-logo demo">
 | 
						||
                        <img
 | 
						||
                          className="rounded rounded-circle"
 | 
						||
                          style={{
 | 
						||
                            border: "3px solid #efdedeff",
 | 
						||
                            padding: "0px",
 | 
						||
                            borderRadius: "50px",
 | 
						||
                          }}
 | 
						||
                          src="/img/brand/marco.png"
 | 
						||
                          width="50"
 | 
						||
                        />
 | 
						||
                        <span> OnFieldWork.com</span>
 | 
						||
                      </div>
 | 
						||
                    </Link>
 | 
						||
                  </span>
 | 
						||
                </a>
 | 
						||
                <p className="footer-text footer-logo-description" hidden>
 | 
						||
                  Work smarter, track faster, and manage everything from one
 | 
						||
                  platform.
 | 
						||
                </p>
 | 
						||
                <form className="footer-form" hidden>
 | 
						||
                  <label for="footer-email" className="small">
 | 
						||
                    Subscribe to newsletter
 | 
						||
                  </label>
 | 
						||
                  <div className="d-flex mt-1">
 | 
						||
                    <input
 | 
						||
                      type="email"
 | 
						||
                      className="form-control rounded-0 rounded-start-bottom rounded-start-top"
 | 
						||
                      id="footer-email"
 | 
						||
                      placeholder="Your email"
 | 
						||
                    />
 | 
						||
                    <button
 | 
						||
                      type="submit"
 | 
						||
                      className="btn btn-primary shadow-none rounded-0 rounded-end-bottom rounded-end-top"
 | 
						||
                    >
 | 
						||
                      Subscribe
 | 
						||
                    </button>
 | 
						||
                  </div>
 | 
						||
                </form>
 | 
						||
              </div>
 | 
						||
 | 
						||
              <div className="col-lg-6 col-md-6 d-flex gap-3 align-items-center justify-content-end">
 | 
						||
                <h6 className="footer-title mt-3">Download our app</h6>
 | 
						||
                <a href="javascript:void(0);" hidden>
 | 
						||
                  <img src="/img/icons/apple-icon.png" alt="apple icon" />
 | 
						||
                </a>
 | 
						||
                <a
 | 
						||
                  href="https://play.google.com/store/apps/details?id=com.marco.aiotstage&pcampaignid=web_share"
 | 
						||
                  target="_blank"
 | 
						||
                >
 | 
						||
                  <img
 | 
						||
                    src="/img/icons/google-play-icon.png"
 | 
						||
                    alt="google play icon"
 | 
						||
                  />
 | 
						||
                </a>
 | 
						||
              </div>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
        </div>
 | 
						||
        <div className="footer-bottom py-md-4">
 | 
						||
          <div className="container d-flex flex-wrap justify-content-between flex-md-row flex-column text-center text-md-start">
 | 
						||
            <div className="col-lg-4 col-md-4 d-flex  align-items-center justify-content-start">
 | 
						||
              <a
 | 
						||
                href="https://www.facebook.com/marcoaiot/"
 | 
						||
                className="me-4"
 | 
						||
                target="_blank"
 | 
						||
              >
 | 
						||
                <img src="/img/icons/facebook.svg" alt="facebook icon" />
 | 
						||
              </a>
 | 
						||
              <a
 | 
						||
                href="https://twitter.com/marcoaiot"
 | 
						||
                className="me-4"
 | 
						||
                target="_blank"
 | 
						||
              >
 | 
						||
                <img src="/img/icons/twitter.svg" alt="twitter icon" />
 | 
						||
              </a>
 | 
						||
              <a href="https://www.instagram.com/marcoaiot/" target="_blank">
 | 
						||
                <img src="/img/icons/instagram.svg" alt="google icon" />
 | 
						||
              </a>
 | 
						||
            </div>
 | 
						||
            <div className="col-lg-4 col-md-4 mb-2 mb-md-0 d-flex gap-3 align-items-center justify-content-center">
 | 
						||
              <span className="footer-bottom-text me-1">
 | 
						||
                ©{new Date().getFullYear()}
 | 
						||
              </span>
 | 
						||
              <a
 | 
						||
                href="https://marcoaiot.com"
 | 
						||
                target="_blank"
 | 
						||
                className="text-white"
 | 
						||
              >
 | 
						||
                Marco AIoT Technologies Pvt. Ltd.,
 | 
						||
              </a>
 | 
						||
            </div>
 | 
						||
 | 
						||
            <div className="col-lg-4 col-md-4 d-flex gap-3 align-items-center justify-content-end">
 | 
						||
              <h6 className="footer-title mt-3">Download our app</h6>
 | 
						||
              <a href="javascript:void(0);" hidden>
 | 
						||
                <img src="/img/icons/apple-icon.png" alt="apple icon" />
 | 
						||
              </a>
 | 
						||
              <a
 | 
						||
                href="https://play.google.com/store/apps/details?id=com.marcoonfieldwork.aiot&pcampaignid=web_share	"
 | 
						||
                target="_blank"
 | 
						||
              >
 | 
						||
                <img
 | 
						||
                  src="/img/icons/google-play-icon.png"
 | 
						||
                  alt="google play icon"
 | 
						||
                />
 | 
						||
              </a>
 | 
						||
            </div>
 | 
						||
          </div>
 | 
						||
        </div>
 | 
						||
      </footer>
 | 
						||
      {/*   Footer: End */}
 | 
						||
    </div>
 | 
						||
  );
 | 
						||
};
 | 
						||
export default LandingPage;
 |