new design added

src/pages/Home/LandingPage.jsx

@@ -1,7 +1,10 @@
 import "swiper/css";
 import "./LandingPage.css";
 
-import DashboardImage from "/img/app/dashboard-light-04.png";
+import DashboardImage from "/img/hero/bg-01.jpg";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
+import SwaperSlideImages from "./SwaperSlideImages";
 
 const LandingPage = () => {
   return (
@@ -98,7 +101,7 @@ const LandingPage = () => {
           <div
             className="carousel-item active"
             style={{
-              backgroundImage: `url("https://onfieldwork.com/bg-1.jpg")`,
+              backgroundImage: "url('/img/hero/bg-01.jpg')",
             }}
           >
             <div className="hero-overlay"></div>
@@ -116,7 +119,7 @@ const LandingPage = () => {
           <div
             className="carousel-item"
             style={{
-              backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
+              backgroundImage: "url('/img/hero/bg-02.png')",
             }}
           >
             <div className="hero-overlay"></div>
@@ -229,7 +232,23 @@ 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/ai.png"
+                    src="../../../public/img/icons/directory.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"
                   />
@@ -241,6 +260,7 @@ 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">
@@ -265,6 +285,11 @@ 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">
@@ -328,14 +353,122 @@ const LandingPage = () => {
       </section>
       {/* <!-- About --> */}
       <section id="about" className="section-py vh-100">
-        <div className="container text-center">
+        <div className="container text-start" style={{ maxWidth: "75%" }}>
-          <h2 className="fw-bold mb-4">About OnFieldWork</h2>
+          <h2 className="fw-bold mb-4  text-center">
-          <p className="text-muted mx-auto" style={{ maxWidth: "700px" }}>
+            About{" "}
-            OnFieldWork is a SaaS-based Project Management System that
+            <a className="text-primary" href="#">
-            simplifies field operations for businesses. From tracking attendance
+              <span className="text-blue">OnField</span>
-            and expenses to generating actionable reports — everything is
+              <span>Work</span>
-            designed to keep your projects on track and teams connected.
+              <span className="text-dark">.com</span>
+            </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>
 
@@ -533,15 +666,84 @@ const LandingPage = () => {
         className="text-white text-center section-py vh-100"
         style={{ background: "#49bf3c" }}
       >
-        <div className="container">
+        <h2 className="fw-bold mb-3">Image Gallary</h2>
-          <h2 className="fw-bold mb-3">Get in Touch</h2>
+        <div className="container mt-5">
-          <p className="mb-4">
+          <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>
+
+          {/* <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>
+          </a> */}
         </div>
       </section>
 
@@ -552,9 +754,9 @@ const LandingPage = () => {
       <a
         href="#"
         id="scroll-top"
-        class="scroll-top d-flex align-items-center justify-content-center active"
+        className="scroll-top d-flex align-items-center justify-content-center active"
       >
-        <i class="bx bxs-chevrons-up"></i>
+        <i className="bx bxs-chevrons-up"></i>
       </a>
     </>
   );

src/pages/Home/SwaperSlideImages.jsx

@@ -0,0 +1,26 @@
+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;