import { noop } from "@tanstack/react-query";
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";

const LandingPage = () => {
  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>
              {/*  Mobile menu toggle: End*/}
              <a href="/" className="app-brand-link">
                <span className="app-brand-logo demo">
                  <img
                    src="../../../public/img/brand/marco.png"
                    width={50}
                  ></img>
                </span>
                <span className="app-brand-text demo menu-text fw-bold ms-2 ps-1 ">
                  {/* <Link> */} PMS
                  {/* </Link> */}
                </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="../vertical-menu-template/index.html"
                    target="_blank"
                  >
                    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/front-pages/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={() => console.log("slide change")}
                    onSwiper={(swiper) => console.log(swiper)}
                  >
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="./../../public/img/front-pages/landing-page/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="./../../public/img/front-pages/landing-page/dashboard-light-02.png"
                        Title="Attendance & Leave Tracking"
                        Body="Monitor employee attendance and manage leave requests with ease."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="./../../public/img/front-pages/landing-page/dashboard-light-04.png"
                        Title="Role-based Permissions"
                        Body="Securely control access with customizable roles and permissions."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="./../../public/img/front-pages/landing-page/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="./../../public/img/front-pages/landing-page/dashboard-light-06.png"
                        Title="Reporting & Analytics"
                        Body="Gain actionable insights through powerful reports and analytics dashboards."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                    <SwiperSlide>
                      <SwaperSlideContent
                        ImageUrl="./../../public/img/front-pages/landing-page/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="./../../public/img/front-pages/landing-page/dashboard-light-08.png"
                        Title="Inventory Management"
                        Body="Track materials, supplies, and assets — never run short again."
                      ></SwaperSlideContent>
                    </SwiperSlide>
                  </Swiper>

                  {/* <img
                      src="./../../public/img/front-pages/landing-page/hero-elements-light.png"
                      alt="hero elements"
                      className="position-absolute hero-elements-img animation-img top-0 start-0"
                      data-app-light-img="front-pages/landing-page/hero-elements-light.png"
                      data-app-dark-img="front-pages/landing-page/hero-elements-dark.png"
                    /> */}
                </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">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/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/icons/inventory.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="./../../public/img/front-pages/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 */}

        {/*  Our great team: Start */}
        <section id="landingTeam" className="section-py landing-team" hidden>
          <div className="container">
            <div className="text-center mb-4">
              <span className="badge bg-label-primary">Our Great Team</span>
            </div>
            <h4 className="text-center mb-1">
              <span className="position-relative fw-extrabold z-1">
                Supported
                <img
                  src="./../../public/img/front-pages/icons/section-title-icon.png"
                  alt="laptop charging"
                  className="section-title-img position-absolute object-fit-contain bottom-0 z-n1"
                />
              </span>
              by Real People
            </h4>
            <p className="text-center mb-md-11 pb-0 pb-xl-12">
              Who is behind these great-looking interfaces?
            </p>
            <div className="row gy-12 mt-2">
              <div className="col-lg-3 col-sm-6">
                <div className="card mt-3 mt-lg-0 shadow-none">
                  <div className="bg-label-primary border border-bottom-0 border-label-primary position-relative team-image-box">
                    <img
                      src="./../../public/img/front-pages/landing-page/team-member-1.png"
                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
                      alt="human image"
                    />
                  </div>
                  <div className="card-body border border-top-0 border-label-primary text-center py-5">
                    <h5 className="card-title mb-0">Sophie Gilbert</h5>
                    <p className="text-muted mb-0">Project Manager</p>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 col-sm-6">
                <div className="card mt-3 mt-lg-0 shadow-none">
                  <div className="bg-label-info border border-bottom-0 border-label-info position-relative team-image-box">
                    <img
                      src="./../../public/img/front-pages/landing-page/team-member-2.png"
                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
                      alt="human image"
                    />
                  </div>
                  <div className="card-body border border-top-0 border-label-info text-center py-5">
                    <h5 className="card-title mb-0">Paul Miles</h5>
                    <p className="text-muted mb-0">UI Designer</p>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 col-sm-6">
                <div className="card mt-3 mt-lg-0 shadow-none">
                  <div className="bg-label-danger border border-bottom-0 border-label-danger position-relative team-image-box">
                    <img
                      src="./../../public/img/front-pages/landing-page/team-member-3.png"
                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
                      alt="human image"
                    />
                  </div>
                  <div className="card-body border border-top-0 border-label-danger text-center py-5">
                    <h5 className="card-title mb-0">Nannie Ford</h5>
                    <p className="text-muted mb-0">Development Lead</p>
                  </div>
                </div>
              </div>
              <div className="col-lg-3 col-sm-6">
                <div className="card mt-3 mt-lg-0 shadow-none">
                  <div className="bg-label-success border border-bottom-0 border-label-success position-relative team-image-box">
                    <img
                      src="./../../public/img/front-pages/landing-page/team-member-4.png"
                      className="position-absolute card-img-position bottom-0 start-50 scaleX-n1-rtl"
                      alt="human image"
                    />
                  </div>
                  <div className="card-body border border-top-0 border-label-success text-center py-5">
                    <h5 className="card-title mb-0">Chris Watkins</h5>
                    <p className="text-muted mb-0">Marketing Manager</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/*  Our great team: 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">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/front-pages/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">
              All plans include 40+ advanced tools and features to boost your
              product.
              <br />
              Choose the best plan to fit your needs.
            </p>
            <div className="text-center mb-12">
              <div className="position-relative d-inline-block pt-3 pt-md-0">
                <label className="switch switch-sm switch-primary me-0">
                  <span className="switch-label fs-6 text-body me-3">
                    Pay Monthly
                  </span>
                  <input
                    type="checkbox"
                    className="switch-input price-duration-toggler"
                    checked
                  />
                  <span className="switch-toggle-slider">
                    <span className="switch-on"></span>
                    <span className="switch-off"></span>
                  </span>
                  <span className="switch-label fs-6 text-body ms-3">
                    Pay Annual
                  </span>
                </label>
                <div className="pricing-plans-item position-absolute d-flex">
                  <img
                    src="./../../public/img/front-pages/icons/pricing-plans-arrow.png"
                    alt="pricing plans arrow"
                    className="scaleX-n1-rtl"
                  />
                  <span className="fw-medium mt-2 ms-1"> Save 25%</span>
                </div>
              </div>
            </div>
            <div className="row g-6 pt-lg-5">
              {/*  Basic Plan: Start */}
              <div className="col-xl-4 col-lg-6 col-md-4">
                <div className="card">
                  <div className="card-header">
                    <div className="text-center">
                      <img
                        src="./../../public/img/front-pages/icons/paper-airplane.png"
                        alt="paper airplane icon"
                        className="mb-8 pb-2"
                      />
                      <h4 className="mb-0">Basic</h4>
                      <div className="d-flex align-items-center justify-content-center">
                        <span className="price-monthly h2 text-primary fw-extrabold mb-0">
                          $19
                        </span>
                        <span className="price-yearly h2 text-primary fw-extrabold mb-0 d-none">
                          $14
                        </span>
                        <sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
                      </div>
                      <div className="position-relative pt-2">
                        <div className="price-yearly text-muted price-yearly-toggle d-none">
                          $ 168 / year
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="card-body">
                    <ul className="text start list-unstyled pricing-list">
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Timeline
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Basic search
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Live chat widget
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Email marketing
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Custom Forms
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Traffic analytics
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Basic Support
                        </h6>
                      </li>
                    </ul>
                    <div className="d-grid mt-8">
                      <a
                        href="payment-page.html"
                        className="btn btn-label-primary"
                      >
                        Get Started
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              {/*  Basic Plan: End */}

              {/*  Favourite Plan: Start */}
              <div className="col-xl-4 col-lg-6 col-md-4">
                <div className="card border border-primary shadow-xl">
                  <div className="card-header">
                    <div className="text-center">
                      <img
                        src="./../../public/img/front-pages/icons/plane.png"
                        alt="plane icon"
                        className="mb-8 pb-2"
                      />
                      <h4 className="mb-0">Team</h4>
                      <div className="d-flex align-items-center justify-content-center">
                        <span className="price-monthly h2 text-primary fw-extrabold mb-0">
                          $29
                        </span>
                        <span className="price-yearly h2 text-primary fw-extrabold mb-0 d-none">
                          $22
                        </span>
                        <sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
                      </div>
                      <div className="position-relative pt-2">
                        <div className="price-yearly text-muted price-yearly-toggle d-none">
                          $ 264 / year
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="card-body">
                    <ul className="text start list-unstyled pricing-list">
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Everything in basic
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Timeline with database
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Advanced search
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Marketing automation
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Advanced chatbot
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Campaign management
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Collaboration tools
                        </h6>
                      </li>
                    </ul>
                    <div className="d-grid mt-8">
                      <a href="payment-page.html" className="btn btn-primary">
                        Get Started
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              {/*  Favourite Plan: End */}

              {/*  Standard Plan: Start */}
              <div className="col-xl-4 col-lg-6 col-md-4">
                <div className="card">
                  <div className="card-header">
                    <div className="text-center">
                      <img
                        src="./../../public/img/front-pages/icons/shuttle-rocket.png"
                        alt="shuttle rocket icon"
                        className="mb-8 pb-2"
                      />
                      <h4 className="mb-0">Enterprise</h4>
                      <div className="d-flex align-items-center justify-content-center">
                        <span className="price-monthly h2 text-primary fw-extrabold mb-0">
                          $49
                        </span>
                        <span className="price-yearly h2 text-primary fw-extrabold mb-0 d-none">
                          $37
                        </span>
                        <sub className="h6 text-muted mb-n1 ms-1">/mo</sub>
                      </div>
                      <div className="position-relative pt-2">
                        <div className="price-yearly text-muted price-yearly-toggle d-none">
                          $ 444 / year
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="card-body">
                    <ul className="text start list-unstyled pricing-list">
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Everything in premium
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Timeline with database
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Fuzzy search
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          A/B testing sanbox
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Custom permissions
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Social media automation
                        </h6>
                      </li>
                      <li>
                        <h6 className="d-flex align-items-center mb-3">
                          <span className="badge badge-center rounded-pill bg-label-primary p-0 me-3">
                            <i className="bx bx-check bx-12px"></i>
                          </span>
                          Sales automation tools
                        </h6>
                      </li>
                    </ul>
                    <div className="d-grid mt-8">
                      <a
                        href="payment-page.html"
                        className="btn btn-label-primary"
                      >
                        Get Started
                      </a>
                    </div>
                  </div>
                </div>
              </div>
              {/*  Standard Plan: End */}
            </div>
          </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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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="./../../public/img/front-pages/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">FAQ</span>
            </div>
            <h4 className="text-center mb-1">
              Frequently asked
              <span className="position-relative fw-extrabold z-1">
                questions
                <img
                  src="./../../public/img/front-pages/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="./../../public/img/front-pages/landing-page/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 MarcoPMS?
                      </button>
                    </h2>

                    <div
                      id="accordionOne"
                      className="accordion-collapse collapse"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body">
                        Lemon drops chocolate cake gummies carrot cake chupa
                        chups muffin topping. Sesame snaps icing marzipan gummi
                        bears macaroon dragée danish caramels powder. Bear claw
                        dragée pastry topping soufflé. Wafer gummi bears
                        marshmallow pastry pie.
                      </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">
                        Dessert ice cream donut oat cake jelly-o pie sugar plum
                        cheesecake. Bear claw dragée oat cake dragée ice cream
                        halvah tootsie roll. Danish cake oat cake pie macaroon
                        tart donut gummies. Jelly beans candy canes carrot cake.
                        Fruitcake chocolate chupa chups.
                      </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 Marco PMS?
                      </button>
                    </h2>
                    <div
                      id="accordionThree"
                      className="accordion-collapse collapse show"
                      aria-labelledby="headingThree"
                      data-bs-parent="#accordionExample"
                    >
                      <div className="accordion-body">
                        Regular license can be used for end products that do not
                        charge users for access or service(access is free and
                        there will be no monthly subscription fee). Single
                        regular license can be used for single end product and
                        end product can be used by you or your client. If you
                        want to sell end product to multiple clients then you
                        will need to purchase separate license for each client.
                        The same rule applies if you want to use the same end
                        product on multiple domains(unique setup). For more info
                        on regular license you can check official description.
                      </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">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Nobis et aliquid quaerat possimus maxime! Mollitia
                        reprehenderit neque repellat deleniti delectus
                        architecto dolorum maxime, blanditiis earum ea, incidunt
                        quam possimus cumque.
                      </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">
                        Lorem ipsum dolor sit amet consectetur, adipisicing
                        elit. Sequi molestias exercitationem ab cum nemo facere
                        voluptates veritatis quia, eveniet veniam at et
                        repudiandae mollitia ipsam quasi labore enim architecto
                        non!
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        {/*  FAQ: End */}

        {/*  CTA: Start */}
        <section
          id="landingCTA"
          className="section-py landing-cta position-relative p-lg-0 pb-0"
        >
          <img
            src="./../../public/img/front-pages/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="front-pages/backgrounds/cta-bg-light.png"
            data-app-dark-img="front-pages/backgrounds/cta-bg-dark.png"
          />
          <div className="container">
            <div className="text-center mb-4 mt-5">
              <span className="badge bg-label-primary">Contact US</span>
            </div>

            <div className="row align-items-center gy-12  mb-12">
              <div className="col-lg-6 text-start text-sm-center text-lg-start">
                <div className="mt-5">
                  {" "}
                  <h4 className="text-start mb-1">
                    <span className="position-relative fw-extrabold z-1">
                      Let's work
                      <img
                        src="./../../public/img/front-pages/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"
                            >
                              +1234 568 963
                            </a>
                          </h6>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className="mt-10">
                  <h4 className="cta-title text-primary  mb-1">
                    Ready to Get Started?
                  </h4>
                  <h5 className="text-body mb-8">
                    Start your project with a 14-day free trial
                  </h5>
                  <a
                    href="payment-page.html"
                    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 className="col-lg-6 pt-lg-12 text-center text-lg-end">
                <img
                  style={{ width: "80%" }}
                  src="./../../public/img/front-pages/landing-page/contact-customer-service.png"
                  alt="hero elements"
                ></img>
              </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">Contact US</span>
            </div>
            <h4 className="text-center mb-1">
              <span className="position-relative fw-extrabold z-1">
                Let's work
                <img
                  src="./../../public/img/front-pages/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="./../../public/img/front-pages/icons/contact-border.png"
                    alt="contact border"
                    className="contact-border-img position-absolute d-none d-lg-block scaleX-n1-rtl"
                  />
                  <img
                    src="./../../public/img/front-pages/landing-page/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">
          <img
            src="./../../public/img/front-pages/backgrounds/footer-bg.png"
            alt="footer bg"
            className="footer-bg banner-bg-img z-n1"
          />
          <div className="container">
            <div className="row gx-0 gy-6 g-lg-10">
              <div className="col-lg-5">
                <a href="#" className="app-brand-link mb-6">
                  <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"
                          style={{
                            border: "1px solid #fff",
                            padding: "5px",
                            borderRadius: "50px",
                          }}
                          src="../../../public/img/brand/marco.png"
                          width="50"
                        />
                        <span> Marco PMS</span>
                      </div>
                    </Link>
                  </span>
                </a>
                <p className="footer-text footer-logo-description mb-6">
                  Most developer friendly & highly customisable Admin Dashboard
                  Template.
                </p>
                <form className="footer-form">
                  <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-2 col-md-4 col-sm-6"></div>
              <div className="col-lg-2 col-md-4 col-sm-6">
                <h6 className="footer-title mb-6">Pages</h6>
                <ul className="list-unstyled">
                  <li className="mb-4">
                    <a href="pricing-page.html" className="footer-link">
                      Pricing
                    </a>
                  </li>
                  <li className="mb-4">
                    <a href="payment-page.html" className="footer-link">
                      Payment<span className="badge bg-primary ms-2">New</span>
                    </a>
                  </li>
                  <li className="mb-4">
                    <a href="checkout-page.html" className="footer-link">
                      Checkout
                    </a>
                  </li>
                  <li className="mb-4">
                    <a href="help-center-landing.html" className="footer-link">
                      Help Center
                    </a>
                  </li>
                  <li>
                    <Link className="footer-link" to="/auth/login">
                      Login/Register
                    </Link>
                    {/* <a
                      href="../vertical-menu-template/auth-login-cover.html"
                      target="_blank"
                      className="footer-link"
                    ></a>*/}
                  </li>
                </ul>
              </div>
              <div className="col-lg-3 col-md-4">
                <h6 className="footer-title mb-6">Download our app</h6>
                <a href="javascript:void(0);" className="d-block mb-4">
                  <img
                    src="./../../public/img/front-pages/landing-page/apple-icon.png"
                    alt="apple icon"
                  />
                </a>
                <a href="javascript:void(0);" className="d-block">
                  <img
                    src="./../../public/img/front-pages/landing-page/google-play-icon.png"
                    alt="google play icon"
                  />
                </a>
              </div>
            </div>
          </div>
        </div>
        <div className="footer-bottom py-3 py-md-5">
          <div className="container d-flex flex-wrap justify-content-between flex-md-row flex-column text-center text-md-start">
            <div className="mb-2 mb-md-0">
              <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>
              <a
                href="https://www.facebook.com/marcoaiot/"
                className="me-4"
                target="_blank"
              >
                <img
                  src="./../../public/img/front-pages/icons/facebook.svg"
                  alt="facebook icon"
                />
              </a>
              <a
                href="https://twitter.com/marcoaiot"
                className="me-4"
                target="_blank"
              >
                <img
                  src="./../../public/img/front-pages/icons/twitter.svg"
                  alt="twitter icon"
                />
              </a>
              <a href="https://www.instagram.com/marcoaiot/" target="_blank">
                <img
                  src="./../../public/img/front-pages/icons/instagram.svg"
                  alt="google icon"
                />
              </a>
            </div>
          </div>
        </div>
      </footer>
      {/*   Footer: End */}
    </div>
  );
};
export default LandingPage;