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

@@ -73,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>
@@ -110,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>
@@ -129,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>
@@ -138,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>
@@ -149,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>
@@ -303,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>
@@ -324,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>
@@ -342,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>
@@ -660,14 +666,79 @@ 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="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>
+              <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">
+        <div className="container mt-5 vh-100">
           <Swiper
             slidesPerView={4}
             centeredSlides={true}
@@ -736,16 +807,8 @@ const LandingPage = () => {
               <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> */}
         </div>
-      </section>
+      </section> */}
 
       {/* <!-- ? Footer --> */}
       <footer className="py-2 bg-dark text-white text-center">

src/pages/Home/SwaperSlideImages.jsx

@@ -9,7 +9,7 @@ const SwaperSlideImages = ({
   return (
     <div className="card h-100">
       <img className="card-img-top" src={ImageUrl} alt="Card image cap" />
-      <div className="card-body">
+      {/* <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
@@ -18,7 +18,7 @@ const SwaperSlideImages = ({
         <a href="javascript:void(0)" className="btn btn-outline-primary">
           Go somewhere
         </a>
-      </div>
+      </div> */}
     </div>
   );
 };