add more cosmatic changes and include contact us section

src/pages/Home/LandingPage.css

@@ -204,3 +204,55 @@ 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,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 (
@@ -70,14 +73,17 @@ const LandingPage = () => {
               <ul className=" navbar-nav align-items-center ms-5">
                 <li className="nav-item">
                   <a
-                    className="btn btn-sm btn-success px-3 my-1 "
+                    className="btn  btn-green btn-square-small btn-sm 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="#">
+                  <a
+                    className="btn btn-sm  btn-green btn-square-small px-3  my-1"
+                    href="#"
+                  >
                     Get Started
                   </a>
                 </li>
@@ -98,7 +104,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>
@@ -107,7 +113,10 @@ const LandingPage = () => {
               <p className="lead">
                 Track progress, assign tasks, and monitor work in real-time.
               </p>
-              <a href="#" className="btn btn-success btn-lg mt-3">
+              <a
+                href="#"
+                className="btn  btn-green btn-square-small btn-lg mt-3 p-3"
+              >
                 Start Free Trial
               </a>
             </div>
@@ -116,7 +125,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>
@@ -126,7 +135,7 @@ const LandingPage = () => {
                 Empower your team with attendance, expense, and task management
                 tools.
               </p>
-              <a href="#" className="btn btn-success btn-lg mt-3">
+              <a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
                 Learn More
               </a>
             </div>
@@ -135,7 +144,7 @@ const LandingPage = () => {
           <div
             className="carousel-item"
             style={{
-              backgroundImage: `url("https://onfieldwork.com/bg-2.jpg")`,
+              backgroundImage: `url("./img/hero/bg-03.png")`,
             }}
           >
             <div className="hero-overlay"></div>
@@ -146,7 +155,7 @@ const LandingPage = () => {
               <p className="lead">
                 Make data-driven decisions with real-time project analytics.
               </p>
-              <a href="#" className="btn btn-success btn-lg mt-3">
+              <a href="#" className="btn btn-square-small btn-lg mt-3 p-3">
                 View Demo
               </a>
             </div>
@@ -229,7 +238,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 +266,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 +291,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">
@@ -278,7 +309,7 @@ const LandingPage = () => {
                     <li>Basic reporting</li>
                     <li>Project tracking</li>
                   </ul>
-                  <a href="#" className="btn btn-outline-primary">
+                  <a href="#" className="btn btn-outline-success">
                     Request Demo
                   </a>
                 </div>
@@ -299,7 +330,7 @@ const LandingPage = () => {
                   </ul>
                   <a
                     href="https://ofw.marcoaiot.com/auth/reqest/demo"
-                    className="btn btn-primary"
+                    className="btn  btn-green btn-square-small"
                   >
                     Request Demo
                   </a>
@@ -317,7 +348,7 @@ const LandingPage = () => {
                     <li>Custom integrations</li>
                     <li>Private cloud hosting</li>
                   </ul>
-                  <a href="#" className="btn btn-outline-primary">
+                  <a href="#" className="btn btn-outline-success">
                     Request Demo
                   </a>
                 </div>
@@ -328,14 +359,122 @@ const LandingPage = () => {
       </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.
+        <div className="container text-start" style={{ maxWidth: "75%" }}>
+          <h2 className="fw-bold mb-4  text-center">
+            About{" "}
+            <a className="text-primary" href="#">
+              <span className="text-blue">OnField</span>
+              <span>Work</span>
+              <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>
 
@@ -527,24 +666,150 @@ const LandingPage = () => {
         </div>
       </section>
 
-      {/* <!-- Contact --> */}
+      {/* <!-- Contact Section --> */}
       <section
         id="contact"
-        className="text-white text-center section-py vh-100"
+        class="section-py  pt-5"
         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.
+        <div className="contact-section ">
+          <div class="row align-items-center">
+            <div class="col-lg-6 contact-img">
+              <img
+                src="/img/illustrations/contact-us.png"
+                alt="Contact Illustration"
+              />
+            </div>
+            <div class="col-lg-6 contact-text">
+              <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>
-          <a href="mailto:sales@marcoaiot.com" className="btn btn-light px-4">
-            Email Us
+              <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>
@@ -552,9 +817,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;