src/pages/Home/LandingPage.css

@@ -204,55 +204,3 @@ body {
   transition: all 0.4s;
   border: 2px solid color-mix(in srgb, #0a53be, transparent 10%);
 }
-
-.contact-section {
-  background: #fff;
-  border-radius: 20px;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
-  padding: 40px 40px;
-  margin: 60px auto;
-  max-width: 1100px;
-}
-
-.contact-img img {
-  width: 100%;
-  border-radius: 15px;
-}
-
-.contact-text h2 {
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: #173b5f;
-}
-
-.contact-text p {
-  font-size: 1rem;
-  color: #6c757d;
-  margin-top: 15px;
-  margin-bottom: 25px;
-}
-
-.btn-green {
-  background-color: #49bf3c;
-  color: #fff;
-  border-radius: 50px;
-  padding: 10px 30px;
-  font-weight: 500;
-  text-decoration: none;
-  transition: all 0.3s ease;
-}
-
-.btn-square-small {
-  border-radius: 3px;
-  padding-bottom: 5.072px;
-  padding-inline-end: 12px;
-  padding-inline-start: 12px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-top: 5.072px;
-}
-
-.btn-green:hover {
-  background-color: #00a85a;
-  color: #fff;
-}

src/pages/Home/LandingPage.jsx

@@ -1,10 +1,7 @@
 import "swiper/css";
 import "./LandingPage.css";
 
-import DashboardImage from "/img/hero/bg-01.jpg";
+import DashboardImage from "/img/app/dashboard-light-04.png";
-import { Swiper, SwiperSlide } from "swiper/react";
-import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
-import SwaperSlideImages from "./SwaperSlideImages";
 
 const LandingPage = () => {
   return (
@@ -73,17 +70,14 @@ const LandingPage = () => {
               <ul className=" navbar-nav align-items-center ms-5">
                 <li className="nav-item">
                   <a
-                    className="btn  btn-green btn-square-small btn-sm px-3 my-1 "
+                    className="btn btn-sm btn-success px-3 my-1 "
                     href="/auth/login"
                   >
                     Login
                   </a>
                 </li>
                 <li className="nav-item ms-2">
-                  <a
+                  <a className="btn btn-sm btn-success px-3  my-1" href="#">
-                    className="btn btn-sm  btn-green btn-square-small px-3  my-1"
-                    href="#"
-                  >
                     Get Started
                   </a>
                 </li>
@@ -104,7 +98,7 @@ const LandingPage = () => {
           <div
             className="carousel-item active"
             style={{
-              backgroundImage: "url('/img/hero/bg-01.jpg')",
+              backgroundImage: `url("https://onfieldwork.com/bg-1.jpg")`,
             }}
           >
             <div className="hero-overlay"></div>
@@ -113,10 +107,7 @@ const LandingPage = () => {
               <p className="lead">
                 Track progress, assign tasks, and monitor work in real-time.
               </p>
-              <a
+              <a href="#" className="btn btn-success btn-lg mt-3">
-                href="#"
-                className="btn  btn-green btn-square-small btn-lg mt-3 p-3"
-              >
                 Start Free Trial
               </a>
             </div>
@@ -125,7 +116,7 @@ const LandingPage = () => {
           <div
             className="carousel-item"
             style={{
-              backgroundImage: "url('/img/hero/bg-02.png')",
+              backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
             }}
           >
             <div className="hero-overlay"></div>
@@ -135,7 +126,7 @@ const LandingPage = () => {
                 Empower your team with attendance, expense, and task management
                 tools.
               </p>
-              <a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
+              <a href="#" className="btn btn-success btn-lg mt-3">
                 Learn More
               </a>
             </div>
@@ -144,7 +135,7 @@ const LandingPage = () => {
           <div
             className="carousel-item"
             style={{
-              backgroundImage: `url("./img/hero/bg-03.png")`,
+              backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
             }}
           >
             <div className="hero-overlay"></div>
@@ -155,7 +146,7 @@ const LandingPage = () => {
               <p className="lead">
                 Make data-driven decisions with real-time project analytics.
               </p>
-              <a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
+              <a href="#" className="btn btn-success btn-lg mt-3">
                 View Demo
               </a>
             </div>
@@ -238,23 +229,7 @@ const LandingPage = () => {
               <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/directory.png"
+                    src="../../../public/img/icons/ai.png"
-                    alt="Cloud Scalability"
-                    className="w-14 mb-4 feature-icon-image"
-                  />
-                </div>
-                <h5>Directory</h5>
-                <p>
-                  Your team, suppliers, vendors organized and connected in one
-                  unified directory.
-                </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/report.png"
                     alt="Advanced Reporting"
                     className="w-14 mb-4 feature-icon-image"
                   />
@@ -266,7 +241,6 @@ const LandingPage = () => {
                 </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">
@@ -291,11 +265,6 @@ const LandingPage = () => {
       <section id="pricing" className="bg-light section-py vh-100">
         <div className="container text-center">
           <h3 className="mb-5">Simple & Transparent Pricing</h3>
-          <h5>Tailored pricing plans designed for you.</h5>
-          <p>
-            No matter which plan you choose, you’ll get access to powerful
-            features. Choose the best plan to fit your needs.
-          </p>
           <div className="row g-4 justify-content-center">
             <div className="col-md-4">
               <div className="card pricing-card border-0 shadow-sm">
@@ -309,7 +278,7 @@ const LandingPage = () => {
                     <li>Basic reporting</li>
                     <li>Project tracking</li>
                   </ul>
-                  <a href="#" className="btn btn-outline-success">
+                  <a href="#" className="btn btn-outline-primary">
                     Request Demo
                   </a>
                 </div>
@@ -330,7 +299,7 @@ const LandingPage = () => {
                   </ul>
                   <a
                     href="https://ofw.marcoaiot.com/auth/reqest/demo"
-                    className="btn  btn-green btn-square-small"
+                    className="btn btn-primary"
                   >
                     Request Demo
                   </a>
@@ -348,7 +317,7 @@ const LandingPage = () => {
                     <li>Custom integrations</li>
                     <li>Private cloud hosting</li>
                   </ul>
-                  <a href="#" className="btn btn-outline-success">
+                  <a href="#" className="btn btn-outline-primary">
                     Request Demo
                   </a>
                 </div>
@@ -359,122 +328,14 @@ const LandingPage = () => {
       </section>
       {/* <!-- About --> */}
       <section id="about" className="section-py vh-100">
-        <div className="container text-start" style={{ maxWidth: "75%" }}>
+        <div className="container text-center">
-          <h2 className="fw-bold mb-4  text-center">
+          <h2 className="fw-bold mb-4">About OnFieldWork</h2>
-            About{" "}
+          <p className="text-muted mx-auto" style={{ maxWidth: "700px" }}>
-            <a className="text-primary" href="#">
+            OnFieldWork is a SaaS-based Project Management System that
-              <span className="text-blue">OnField</span>
+            simplifies field operations for businesses. From tracking attendance
-              <span>Work</span>
+            and expenses to generating actionable reports — everything is
-              <span className="text-dark">.com</span>
+            designed to keep your projects on track and teams connected.
-            </a>
-          </h2>
-          <p>
-            <a className="text-primary" href="#">
-              <span className="text-blue">OnField</span>
-              <span>Work</span>
-              <span className="text-dark">.com</span>
-            </a>{" "}
-            is a powerful SaaS-based Project Management Platform built to
-            simplify and streamline field operations for modern businesses.
-          </p>{" "}
-          <p>
-            Whether you manage on-site teams, oversee multiple projects, or
-            coordinate vendors and suppliers,{" "}
-            <a className="text-primary" href="#">
-              <span className="text-blue">OnField</span>
-              <span>Work</span>
-              <span className="text-dark">.com</span>
-            </a>{" "}
-            brings everything together in one connected ecosystem — giving you
-            complete control, visibility, and efficiency in your day-to-day
-            operations.
           </p>
-          <h5> Our Mission</h5> At{" "}
-          <a className="text-primary" href="#">
-            <span className="text-blue">OnField</span>
-            <span>Work</span>
-            <span className="text-dark">.com</span>
-          </a>
-          , our mission is to empower organizations to manage their field
-          operations effortlessly — helping teams stay organized, accountable,
-          and productive, no matter where they are. We aim to eliminate manual
-          processes, data silos, and communication gaps that often slow down
-          projects and increase operational costs. <br /> What We Do We provide
-          a comprehensive suite of tools designed to handle every critical
-          aspect of field management — from workforce tracking to expense
-          control and reporting. With
-          <a className="text-primary" href="#">
-            <span className="text-blue">OnField</span>
-            <span>Work</span>
-            <span className="text-dark">.com</span>
-          </a>
-          , you can:
-          <ul>
-            <li>
-              <strong> Track Attendance Seamlessly -</strong> Enable site
-              managers to record daily attendance, capture employee photos, and
-              maintain transparent records for management.{" "}
-            </li>
-            <li>
-              <strong> Manage Expenses Efficiently -</strong> Log, categorize,
-              and approve expenses related to daily operations, procurement, and
-              travel — all within a streamlined workflow.
-            </li>
-            <li>
-              <strong> Generate Smart Reports -</strong> Get real-time insights
-              through dashboards and reports that highlight project progress,
-              team productivity, and cost trends.
-            </li>
-            <li>
-              {" "}
-              <strong> Organize Your Directory -</strong> Maintain a unified
-              directory for teams, suppliers, and vendors. Every contact is
-              securely stored, role-based, and easy to access — ensuring that
-              your network stays structured and connected.
-            </li>
-            <li>
-              <strong> Record Notes & References -</strong> Attach notes to
-              contacts for instant recall and better relationship management
-              across your organization.
-            </li>{" "}
-            <li>
-              <strong> Role-Based Access Control -</strong> Protect sensitive
-              data with secure, role-based permissions, ensuring that each team
-              member accesses only the information relevant to their role.{" "}
-            </li>{" "}
-          </ul>
-          <h5>
-            Why Choose{" "}
-            <a className="text-primary" href="#">
-              <span className="text-blue">OnField</span>
-              <span>Work</span>
-              <span className="text-dark">.com</span>
-            </a>
-            ?{" "}
-          </h5>
-          <ul>
-            <li>
-              <strong> Purpose-Built for Field Teams -</strong> Designed keeping
-              in mind the unique challenges of field operations.
-            </li>{" "}
-            <li>
-              <strong> Scalable & Cloud-Based -</strong> A SaaS platform that
-              grows with your business — accessible from anywhere, anytime.
-            </li>{" "}
-            <li>
-              <strong> Unified Dashboard Experience -</strong> Get a 360° view
-              of all your field activities, project progress, and financial
-              health.
-            </li>{" "}
-            <li>
-              <strong> Data-Driven Insights -</strong> Make informed decisions
-              using analytics and trend-based reporting.{" "}
-            </li>
-            <li>
-              <strong>Collaboration at Its Core - </strong>Connect your teams,
-              vendors, and suppliers under one digital workspace.{" "}
-            </li>
-          </ul>
         </div>
       </section>
 
@@ -666,150 +527,24 @@ const LandingPage = () => {
         </div>
       </section>
 
-      {/* <!-- Contact Section --> */}
+      {/* <!-- Contact --> */}
       <section
         id="contact"
-        class="section-py  pt-5"
+        className="text-white text-center section-py vh-100"
         style={{ background: "#49bf3c" }}
       >
-        <div className="contact-section ">
+        <div className="container">
-          <div class="row align-items-center">
+          <h2 className="fw-bold mb-3">Get in Touch</h2>
-            <div class="col-lg-6 contact-img">
+          <p className="mb-4">
-              <img
+            Want a live demo or have questions? Our team will respond within 24
-                src="/img/illustrations/contact-us.png"
+            hours.
-                alt="Contact Illustration"
+          </p>
-              />
+          <a href="mailto:sales@marcoaiot.com" className="btn btn-light px-4">
-            </div>
+            Email Us
-            <div class="col-lg-6 contact-text">
+          </a>
-              <h2>
-                Contact <span class="text-success">Us</span>
-              </h2>
-              <p>
-                We’d love to hear from you! Whether you have a question about
-                features, pricing, or anything else — our team is ready to
-                answer all your queries.
-              </p>
-              <div class="row g-4 ">
-                <div class="col-md-6 col-lg-12 col-xl-6">
-                  <div class="d-flex align-items-center">
-                    <div class="badge bg-label-primary rounded p-1_5 me-3">
-                      <i class="bx bx-envelope bx-lg"></i>
-                    </div>
-                    <div>
-                      <p class="mb-0 text-start">Email</p>
-                      <h6 class="mb-0 text-start">
-                        <a href="mailto:example@gmail.com" class="text-heading">
-                          sales@marcoaiot.com
-                        </a>
-                      </h6>
-                    </div>
-                  </div>
-                </div>
-                <div class="col-md-6 col-lg-12 col-xl-6">
-                  <div class="d-flex align-items-center">
-                    <div class="badge bg-label-success rounded p-1_5 me-3">
-                      <i class="bx bx-phone-call bx-lg"></i>
-                    </div>
-                    <div className="">
-                      <p class="mb-0 text-start">Phone</p>
-                      <h6 class="mb-0 text-start">
-                        <a href="tel:+1234-568-963" class="text-heading">
-                          +91 70288 83755
-                        </a>
-                      </h6>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className="mt-5 pt-5">
-                <a href="#" class="btn-green">
-                  Know More
-                </a>
-              </div>
-            </div>
-          </div>
         </div>
       </section>
 
-      {/* <!-- Contact --> */}
-      {/* <section
-        id="contact1"
-        className="text-white text-center section-py vh-auto"
-        style={{ background: "#49bf3c", display: "none" }}
-      >
-        <h2 className="fw-bold mb-3">Image Gallary</h2>
-        <div className="container mt-5 vh-100">
-          <Swiper
-            slidesPerView={4}
-            centeredSlides={true}
-            spaceBetween={30}
-            grabCursor={true}
-            modules={[EffectFlip, Autoplay, Pagination, Navigation]}
-            loop={true}
-            pagination={{
-              clickable: true,
-            }}
-            breakpoints={{
-              640: {
-                slidesPerView: 2,
-                spaceBetween: 20,
-              },
-              768: {
-                slidesPerView: 4,
-                spaceBetween: 40,
-              },
-              1024: {
-                slidesPerView: 5,
-                spaceBetween: 50,
-              },
-            }}
-            autoplay={{
-              delay: 3500,
-              disableOnInteraction: false,
-            }}
-            pagination={{
-              clickable: true,
-            }}
-            keyboard={{
-              enabled: true,
-            }}
-            navigation={false}
-            className="mySwiper"
-          >
-            <SwiperSlide>
-              <SwaperSlideImages ImageUrl="/img/app/dashboard-light-04.png"></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages ImageUrl="/img/app/mobile/01.jpg"></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages ImageUrl="/img/app/mobile/02.jpg"></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages></SwaperSlideImages>{" "}
-            </SwiperSlide>{" "}
-            <SwiperSlide>
-              <SwaperSlideImages></SwaperSlideImages>{" "}
-            </SwiperSlide>
-          </Swiper>
-        </div>
-      </section> */}
-
       {/* <!-- ? Footer --> */}
       <footer className="py-2 bg-dark text-white text-center">
         <p className="mb-0">© 2025 OnFieldWork.com All Rights Reserved.</p>
@@ -817,9 +552,9 @@ const LandingPage = () => {
       <a
         href="#"
         id="scroll-top"
-        className="scroll-top d-flex align-items-center justify-content-center active"
+        class="scroll-top d-flex align-items-center justify-content-center active"
       >
-        <i className="bx bxs-chevrons-up"></i>
+        <i class="bx bxs-chevrons-up"></i>
       </a>
     </>
   );

src/pages/Home/SwaperSlideImages.jsx

@@ -1,26 +0,0 @@
-import { SwiperSlide } from "swiper/react";
-
-const SwaperSlideImages = ({
-  ImageUrl = "../../../public/assets/img/backgrounds/18.jpg",
-  Title = "",
-  Body = "",
-  ContentAlign = "right",
-}) => {
-  return (
-    <div className="card h-100">
-      <img className="card-img-top" src={ImageUrl} alt="Card image cap" />
-      {/* <div className="card-body">
-        <h5 className="card-title">Card title</h5>
-        <p className="card-text">
-          Some quick example text to build on the card title and make up the
-          bulk of the card's content.
-        </p>
-        <a href="javascript:void(0)" className="btn btn-outline-primary">
-          Go somewhere
-        </a>
-      </div> */}
-    </div>
-  );
-};
-
-export default SwaperSlideImages;