marco.pms.web/src/pages/Home/LandingPage.jsx

1289 lines
56 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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