564 lines
21 KiB
JavaScript
564 lines
21 KiB
JavaScript
import "swiper/css";
|
||
import "./LandingPage.css";
|
||
|
||
import DashboardImage from "/img/app/dashboard-light-04.png";
|
||
|
||
const LandingPage = () => {
|
||
return (
|
||
<>
|
||
<nav
|
||
className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top"
|
||
style={{ background: "#efefef !important" }}
|
||
>
|
||
<div className="container-fluid px-5 w-100">
|
||
<div className="row w-100">
|
||
<div className="col-md-auto">
|
||
<a className="navbar-brand fw-bold text-primary" href="#">
|
||
<span className="text-blue">OnField</span>
|
||
<span>Work</span>
|
||
<span className="text-dark">.com</span>
|
||
</a>
|
||
<button
|
||
className="navbar-toggler"
|
||
type="button"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#navbarNav"
|
||
>
|
||
<span className="navbar-toggler-icon"></span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* <div className=" col-6 collapse navbar-collapse justify-content-center">
|
||
<ul className="navbar-nav"></ul>
|
||
</div> */}
|
||
<div
|
||
className="d-flex collapse navbar-collapse justify-content-end col-md-auto"
|
||
id="navbarNav"
|
||
>
|
||
<ul className="navbar-nav align-items-center ">
|
||
<li className="nav-item">
|
||
<a className="nav-link" href="#">
|
||
Home
|
||
</a>
|
||
</li>
|
||
<li className="nav-item">
|
||
<a className="nav-link" href="#features">
|
||
Features
|
||
</a>
|
||
</li>
|
||
<li className="nav-item">
|
||
<a className="nav-link" href="#pricing">
|
||
Pricing
|
||
</a>
|
||
</li>
|
||
<li className="nav-item">
|
||
<a className="nav-link" href="#about">
|
||
About
|
||
</a>
|
||
</li>
|
||
<li className="nav-item">
|
||
<a className="nav-link" href="#faq">
|
||
FAQ
|
||
</a>
|
||
</li>
|
||
<li className="nav-item">
|
||
<a className="nav-link" href="#contact">
|
||
Contact
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<ul className=" navbar-nav align-items-center ms-5">
|
||
<li className="nav-item">
|
||
<a
|
||
className="btn btn-sm btn-success px-3 my-1 "
|
||
href="/auth/login"
|
||
>
|
||
Login
|
||
</a>
|
||
</li>
|
||
<li className="nav-item ms-2">
|
||
<a className="btn btn-sm btn-success px-3 my-1" href="#">
|
||
Get Started
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* <!-- ? Hero Carousel --> */}
|
||
<div
|
||
id="heroCarousel"
|
||
className="carousel slide"
|
||
data-bs-ride="carousel"
|
||
data-bs-interval="5000"
|
||
>
|
||
<div className="carousel-inner">
|
||
<div
|
||
className="carousel-item active"
|
||
style={{
|
||
backgroundImage: `url("https://onfieldwork.com/bg-1.jpg")`,
|
||
}}
|
||
>
|
||
<div className="hero-overlay"></div>
|
||
<div className="carousel-caption text-start text-white">
|
||
<h1 className="fw-bold display-4">Manage Projects Smarter</h1>
|
||
<p className="lead">
|
||
Track progress, assign tasks, and monitor work in real-time.
|
||
</p>
|
||
<a href="#" className="btn btn-success btn-lg mt-3">
|
||
Start Free Trial
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className="carousel-item"
|
||
style={{
|
||
backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
|
||
}}
|
||
>
|
||
<div className="hero-overlay"></div>
|
||
<div className="carousel-caption text-start text-white">
|
||
<h1 className="fw-bold display-4">Simplify Field Operations</h1>
|
||
<p className="lead">
|
||
Empower your team with attendance, expense, and task management
|
||
tools.
|
||
</p>
|
||
<a href="#" className="btn btn-success btn-lg mt-3">
|
||
Learn More
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
className="carousel-item"
|
||
style={{
|
||
backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
|
||
}}
|
||
>
|
||
<div className="hero-overlay"></div>
|
||
<div className="carousel-caption text-start text-white">
|
||
<h1 className="fw-bold display-4">
|
||
Insightful Reports, Real Results
|
||
</h1>
|
||
<p className="lead">
|
||
Make data-driven decisions with real-time project analytics.
|
||
</p>
|
||
<a href="#" className="btn btn-success btn-lg mt-3">
|
||
View Demo
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
className="carousel-control-prev"
|
||
type="button"
|
||
data-bs-target="#heroCarousel"
|
||
data-bs-slide="prev"
|
||
>
|
||
<span className="carousel-control-prev-icon"></span>
|
||
</button>
|
||
<button
|
||
className="carousel-control-next"
|
||
type="button"
|
||
data-bs-target="#heroCarousel"
|
||
data-bs-slide="next"
|
||
>
|
||
<span className="carousel-control-next-icon"></span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* <!-- ? Features Section --> */}
|
||
<section id="features" className="section-py">
|
||
<div className="container text-center">
|
||
<h3 className="mb-5">Powerful Features for Every Role</h3>
|
||
<div className="row g-4">
|
||
<div className="col-md-4">
|
||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||
<div className="feature-icon mb-3">
|
||
<img
|
||
src="../../../public/img/icons/dashboard.png"
|
||
alt="Dashboard"
|
||
className="w-14 mb-4 feature-icon-image"
|
||
/>
|
||
</div>
|
||
<h5>Analytical Dashboard</h5>
|
||
<p>
|
||
Real-time insights on attendance, expenses, tasks, and project
|
||
progress in one view.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-4">
|
||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||
<div className="feature-icon mb-3">
|
||
<img
|
||
src="../../../public/img/icons/attendance.png"
|
||
alt="Smart Attendance"
|
||
className="w-14 mb-4 feature-icon-image"
|
||
/>
|
||
</div>
|
||
<h5>Smart Attendance</h5>
|
||
<p>
|
||
Site managers mark attendance with employee photos and
|
||
location verification.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-4">
|
||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||
<div className="feature-icon mb-3">
|
||
<img
|
||
src="../../../public/img/icons/spending.png"
|
||
alt="Expense & Budget Tracking"
|
||
className="w-14 mb-4 feature-icon-image"
|
||
/>
|
||
</div>
|
||
<h5>Expense & Budget Tracking</h5>
|
||
<p>
|
||
Track daily operations, procurement, and travel expenses with
|
||
approval workflows.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-4">
|
||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||
<div className="feature-icon mb-3">
|
||
<img
|
||
src="../../../public/img/icons/ai.png"
|
||
alt="Advanced Reporting"
|
||
className="w-14 mb-4 feature-icon-image"
|
||
/>
|
||
</div>
|
||
<h5>Advanced Reporting</h5>
|
||
<p>
|
||
Get performance insights with role-based dashboards and
|
||
category-wise analytics.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div className="col-md-4">
|
||
<div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
|
||
<div className="feature-icon mb-3">
|
||
<img
|
||
src="../../../public/img/icons/cloud-service.png"
|
||
alt="Cloud Scalability"
|
||
className="w-14 mb-4 feature-icon-image"
|
||
/>
|
||
</div>
|
||
<h5>Cloud Scalability</h5>
|
||
<p>
|
||
Built on secure cloud infrastructure for seamless scaling and
|
||
24/7 availability.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* <!-- Pricing Section (Bootstrap 5) --> */}
|
||
<section id="pricing" className="bg-light section-py vh-100">
|
||
<div className="container text-center">
|
||
<h3 className="mb-5">Simple & Transparent Pricing</h3>
|
||
<div className="row g-4 justify-content-center">
|
||
<div className="col-md-4">
|
||
<div className="card pricing-card border-0 shadow-sm">
|
||
<div className="card-body">
|
||
<h5 className="text-primary fw-bold">Starter</h5>
|
||
<h2>
|
||
₹499<span className="fs-6 text-muted">/month</span>
|
||
</h2>
|
||
<ul className="list-unstyled mt-3 mb-4 text-muted">
|
||
<li>Up to 10 users</li>
|
||
<li>Basic reporting</li>
|
||
<li>Project tracking</li>
|
||
</ul>
|
||
<a href="#" className="btn btn-outline-primary">
|
||
Request Demo
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-4">
|
||
<div className="card pricing-card border-primary shadow-lg">
|
||
<div className="card-body">
|
||
<h5 className="text-primary fw-bold">Professional</h5>
|
||
<h2>
|
||
₹999<span className="fs-6 text-muted">/month</span>
|
||
</h2>
|
||
<ul className="list-unstyled mt-3 mb-4 text-muted">
|
||
<li>Unlimited projects</li>
|
||
<li>Expense & attendance tracking</li>
|
||
<li>Advanced analytics</li>
|
||
</ul>
|
||
<a
|
||
href="https://ofw.marcoaiot.com/auth/reqest/demo"
|
||
className="btn btn-primary"
|
||
>
|
||
Request Demo
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="col-md-4">
|
||
<div className="card pricing-card border-0 shadow-sm">
|
||
<div className="card-body">
|
||
<h5 className="text-primary fw-bold">Enterprise</h5>
|
||
<h2>Custom</h2>
|
||
<ul className="list-unstyled mt-3 mb-4 text-muted">
|
||
<li>Dedicated support</li>
|
||
<li>Custom integrations</li>
|
||
<li>Private cloud hosting</li>
|
||
</ul>
|
||
<a href="#" className="btn btn-outline-primary">
|
||
Request Demo
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
{/* <!-- About --> */}
|
||
<section id="about" className="section-py vh-100">
|
||
<div className="container text-center">
|
||
<h2 className="fw-bold mb-4">About OnFieldWork</h2>
|
||
<p className="text-muted mx-auto" style={{ maxWidth: "700px" }}>
|
||
OnFieldWork is a SaaS-based Project Management System that
|
||
simplifies field operations for businesses. From tracking attendance
|
||
and expenses to generating actionable reports — everything is
|
||
designed to keep your projects on track and teams connected.
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="faq" className="bg-light section-py vh-100">
|
||
<div className="container text-center">
|
||
<h3>
|
||
Frequently AskedQuestions <br />
|
||
<h6 className="text-normal">
|
||
{" "}
|
||
Browse through these FAQs to find answers to commonly asked
|
||
questions.
|
||
</h6>
|
||
</h3>
|
||
|
||
<div className="accordion mt-5" 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 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 Marco PMS?
|
||
</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 Marco PMS. 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">
|
||
Marco PMS operate under a proprietary license combined with a
|
||
subscription model. This means customers don’t own the
|
||
software but are granted the right to access and use it
|
||
through the cloud under our Terms of Service. Depending on the
|
||
plan, licensing may be based on users, features, or usage, and
|
||
you can upgrade, downgrade, or cancel at any time. non!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="card accordion-item">
|
||
<h2 className="accordion-header" id="headingSix">
|
||
<button
|
||
type="button"
|
||
className="accordion-button collapsed"
|
||
data-bs-toggle="collapse"
|
||
data-bs-target="#accordionSix"
|
||
aria-expanded="false"
|
||
aria-controls="accordionSix"
|
||
>
|
||
Can I customize Marco PMS 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, Marco PMS is designed to be flexible and adaptable. You
|
||
can customize workflows, user roles, permissions, and
|
||
reporting to match your organization’s unique processes.
|
||
Depending on your plan, we also support advanced customization
|
||
such as integrating with third-party tools, adding custom
|
||
fields, and tailoring modules to fit your business
|
||
requirements.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* <!-- Contact --> */}
|
||
<section
|
||
id="contact"
|
||
className="text-white text-center section-py vh-100"
|
||
style={{ background: "#49bf3c" }}
|
||
>
|
||
<div className="container">
|
||
<h2 className="fw-bold mb-3">Get in Touch</h2>
|
||
<p className="mb-4">
|
||
Want a live demo or have questions? Our team will respond within 24
|
||
hours.
|
||
</p>
|
||
<a href="mailto:sales@marcoaiot.com" className="btn btn-light px-4">
|
||
Email Us
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
{/* <!-- ? Footer --> */}
|
||
<footer className="py-2 bg-dark text-white text-center">
|
||
<p className="mb-0">© 2025 OnFieldWork.com All Rights Reserved.</p>
|
||
</footer>
|
||
<a
|
||
href="#"
|
||
id="scroll-top"
|
||
class="scroll-top d-flex align-items-center justify-content-center active"
|
||
>
|
||
<i class="bx bxs-chevrons-up"></i>
|
||
</a>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default LandingPage;
|