1613 lines
71 KiB
JavaScript
1613 lines
71 KiB
JavaScript
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;
|