login page swaper added

public/assets/css/default.css

@@ -30,11 +30,6 @@
   width: 45px;
 }
 
-
-
-.app-brand-logo-border {
-  border: 1px solid #d5d5d5;
-}
 .app-brand-text {
   font-size: 1.75rem;
   letter-spacing: -0.5px;
@@ -168,7 +163,6 @@ thead tr {
   height: auto; /* keep aspect ratio */
 }
 
-
 /* Tablet and up (≥768px) */
 @media (min-width: 768px) {
   .app-brand-logo-login {
@@ -182,4 +176,3 @@ thead tr {
     max-width: 80px;
   }
 }
-

src/layouts/AuthLayout.jsx

@@ -18,19 +18,46 @@ const AuthLayout = () => {
   return (
     // <div className="login-box">
     <div className="authentication-wrapper authentication-cover ">
-      <Link
+      <div
+        className="position-fixed "
+        style={{ background: "white", width: "65%", zIndex: "100" }}
+      >
+        {" "}
+        <nav
+          class="navbar navbar-light ms-10 w-auto justify-content-start"
+          style={{ opacity: "100%" }}
+        >
+          <a class="navbar-brand" href="/">
+            Home
+          </a>
+          <a class="navbar-brand" href="/#landingFeatures">
+            Features
+          </a>
+          <a class="navbar-brand" href="/#landingPricing">
+            Pricing
+          </a>
+          <a class="navbar-brand" href="/#landingFAQ">
+            FAQ
+          </a>
+          <a class="navbar-brand" href="/#sectionBlog">
+            Blogs
+          </a>
+          <a class="navbar-brand" href="/#landingCTA">
+            Contact Us
+          </a>
+        </nav>{" "}
+      </div>
+
+      {/* <Link
         aria-label="Go to Home Page"
         to="/"
-        className="app-brand-link gap-2 position-fixed top-2 start-0 mx-2 mx-sm-4"
+        className="app-brand-link gap-2 position-fixed mt-10 ms-5"
       >
-        {/* <span className="app-brand-logo rounded-circle ">
+        <h5>
-          <img
+          {" "}
-            src="/img/brand/marco.png"
+          <i class="bx bx-left-arrow-circle"></i> Home
-            alt="marco-logo"
+        </h5>
-            className="app-brand-logo-login"
+      </Link> */}
-          />
-        </span> */}
-      </Link>
       <Outlet />
     </div>
     // </div>

src/pages/Home/LandingPage.css

@@ -75,7 +75,7 @@ nav.layout-navbar .navbar.landing-navbar {
   --bs-front-navbar-border-color: rgba(var(--bs-paper-bg-rgb), 0.68);
   border: 2px solid var(--bs-front-navbar-border-color);
   background-color: var(--bs-front-navbar-bg);
-  margin-block-start: 1rem;
+  margin-block-start: 0rem;
   padding-block: 0.614rem;
   transform: unset;
   transition: all 0.2s ease-in-out;

src/pages/Home/SubscriptionPlans.jsx

@@ -58,7 +58,7 @@ const SubscriptionPlans = () => {
             <PlanCardSkeleton />
             <PlanCardSkeleton />
           </>
-        ) : data.length === 0 ? (
+        ) : data?.length === 0 ? (
           <div className="text-center">No plans found</div>
         ) : isError ? (
           <div className="text-start bg-light">

src/pages/authentication/LoginPage.jsx

@@ -87,10 +87,10 @@ const LoginPage = () => {
   }, []);
 
   return (
-    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
+    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-top  p-4 p-sm-5 bg-gray-60">
-      <div className="w-100" style={{ maxWidth: 420, margin: "0 auto" }}>
+      <div className="w-100 mt-10" style={{ maxWidth: 420, margin: "0 auto" }}>
         <Link aria-label="Go to Home Page" to="/">
-          <span class="app-brand-logo rounded-circle app-brand-logo-border">
+          <span class="app-brand-logo rounded-circle">
             <img src="/img/brand/marco.png" width="70" />
           </span>
           <br />

src/pages/authentication/MainLogin.jsx

@@ -1,19 +1,249 @@
-import React from "react";
+import { React, useRef } from "react";
 import LoginPage from "./LoginPage";
+import "./MainLogin.css";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { EffectFlip, Autoplay, Pagination, Navigation } from "swiper/modules";
 const MainLogin = () => {
+  const progressCircle = useRef(null);
+  const progressContent = useRef(null);
+  const onAutoplayTimeLeft = (s, time, progress) => {
+    progressCircle.current.style.setProperty("--progress", 1 - progress);
+    progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
+  };
   return (
     <>
       <div className="authentication-inner row m-0">
-        <div className="d-none d-lg-flex col-lg-7 col-xl-8 align-items-center p-5">
+        <div className=" d-lg-flex col-lg-7 col-xl-8 align-items-center p-5 justify-content-center">
-          <div className="w-100 d-flex justify-content-center">
+          <div className="w-75 text-start" style={{ marginTop: "75px" }}>
-            <img
+            <Swiper
-              src="/img/illustrations/worker_03.png"
+              spaceBetween={30}
-              className="img-fluid"
+              centeredSlides={true}
-              alt="Login image"
+              rewind={true}
-              width="70%"
+              autoplay={{
-              data-app-dark-img="illustrations/boy-with-rocket-dark.png"
+                delay: 3500,
-              data-app-light-img="illustrations/boy-with-rocket-light.png"
+                disableOnInteraction: false,
-            />
+              }}
+              pagination={{
+                clickable: true,
+              }}
+              keyboard={{
+                enabled: true,
+              }}
+              navigation={false}
+              modules={[EffectFlip, Autoplay, Pagination, Navigation]}
+              className="mySwiper"
+              onSlideChange={() => {}}
+              onSwiper={(swiper) => {}}
+              onAutoplayTimeLeft={onAutoplayTimeLeft}
+            >
+              <div className="autoplay-progress" slot="container-end">
+                <svg viewBox="0 0 48 48" ref={progressCircle}>
+                  <circle cx="24" cy="24" r="20"></circle>
+                </svg>
+                <span ref={progressContent}></span>
+              </div>
+              <SwiperSlide>
+                <img src="/img/illustrations/03.png"></img>
+              </SwiperSlide>
+              <SwiperSlide>
+                <div className="text-start">
+                  <h1 className="display-header">
+                    Financial Management (Expense & Billing)
+                  </h1>
+                  <h4 className="display-title">
+                    Eliminate Paper Receipts. Take Control of Your Cash Flow.
+                  </h4>
+                  <p className="display-body">
+                    Managing field expenses is often messy, slow, and prone to
+                    errors. onfieldwork.com digitizes the entire process, giving
+                    you real-time financial visibility and control, whether your
+                    team is on a construction site or servicing a client's
+                    facility.
+                  </p>
+                  <ul className="more-features-list list-unstyled">
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Billing & Collection:</b> Generate accurate
+                          invoices based on logged project data and efficiently
+                          track the status of payments to speed up collection
+                          cycles.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Recurring Expenses:</b> Set up and manage
+                          automatic payments for predictable costs (like monthly
+                          equipment rentals or subscriptions) to ensure they are
+                          never missed.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Advance Payment Management:</b> A clear system for
+                          issuing and tracking advances given to field staff.
+                          Easily reconcile these advances against submitted
+                          expenses and salaries.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Petty Cash Management:</b> Maintain a secure,
+                          digital ledger for small, daily expenditures,
+                          replacing error-prone manual logbooks.
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </SwiperSlide>
+              <SwiperSlide>
+                <div className="text-start">
+                  <h1 className="display-header">
+                    Flexible Project Approval/Review Workflow
+                  </h1>
+                  <h4 className="display-title">
+                    Streamline Decisions. Accelerate Project Completion.
+                  </h4>
+                  <p className="display-body">
+                    The speed of a project often hinges on the efficiency of the
+                    review and approval process. onfieldwork.com replaces
+                    bottlenecks and email chains with flexible, defined digital
+                    workflows that keep work moving forward.
+                  </p>
+                  <ul className="more-features-list list-unstyled">
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Customizable Approval Chains</b>
+                          <ul>
+                            <li>
+                              <b> Define Your Process:</b> Easily configure
+                              multi-step approval paths for any item: document
+                              submissions, expense reports, task completion
+                              sign-offs, or material requests.
+                            </li>
+                            <li>
+                              <b>Role-Based Routing:</b> Approvals are
+                              automatically routed to the correct individual
+                              based on their Role (e.g., Site Supervisor,
+                              Project Manager, Finance Admin) thanks to our
+                              Role-Based Access Control (RBAC).
+                            </li>
+                          </ul>{" "}
+                        </div>
+                      </div>
+                    </li>
+                    {/* <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Real-Time Notifications & Tracking</b>
+                          <ul>
+                            <li>
+                              <b>No More Delays:</b> Reviewers receive instant
+                              alerts via the Web and Mobile app when an item
+                              requires their attention.
+                            </li>
+                            <li>
+                              <b> Audit Trail:</b> Every action, comment,
+                              approval, or rejection is logged with a timestamp
+                              and user ID, providing a complete, non-repudiable
+                              history for every decision.
+                            </li>
+                          </ul>{" "}
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Seamless Task Handoff</b> Once a task or document
+                          is approved, the next action is immediately
+                          triggered—whether it's allocating a new work package
+                          to the team or initiating a purchase order.
+                        </div>
+                      </div>
+                    </li> */}
+                  </ul>
+                </div>
+              </SwiperSlide>
+              <SwiperSlide>
+                <div className="text-start">
+                  <h1 className="display-header">Project Management</h1>
+                  <h4 className="display-title">
+                    End-to-End Project Lifecycle Management
+                  </h4>
+                  <p className="display-body">
+                    Stop using spreadsheets and start managing progress.
+                    onfieldwork.com is your single source of truth for all
+                    project activities.
+                  </p>
+                  <ul className="more-features-list list-unstyled">
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b> Create & Manage Multiple Projects:</b>Organize all
+                          current and upcoming work in a centralized dashboard.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Infrastructure Management:</b>Track and manage
+                          project resources, equipment, and key locations.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Team & Document Management:</b>Secure storage for
+                          drawings, contracts, and easy team setup.
+                        </div>
+                      </div>
+                    </li>
+                    <li>
+                      <div className="d-flex">
+                        <i className="bx bxs-check-circle text-success"></i>
+                        <div className="list-item  ms-2 pb-2">
+                          {" "}
+                          <b>Work Allocation & Tracking:</b>Implement
+                          customizable Approval/Review Workflows for tasks and
+                          documents.
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+                </div>
+              </SwiperSlide>
+            </Swiper>
           </div>
         </div>
         <LoginPage />