handle UI to look sliker and add missing images

src/pages/Home/FeatureCard.jsx

@@ -0,0 +1,24 @@
+const FeatureCard = ({ imagesrc, title, description }) => {
+  return (
+    <>
+      <div className="col-md-3 px-4">
+        <div className="row g-4">
+          <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
+            <div className="feature-icon mb-3 d-flex align-items-center justify-content-middle">
+              <img
+                src={imagesrc}
+                alt={title}
+                className="w-14 mb-4 feature-icon-image"
+              />
+              <span class="ms-5">
+                <h5>{title}</h5>
+              </span>
+            </div>
+            <p>{description}</p>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default FeatureCard;

src/pages/Home/LandingPage.css

@@ -235,3 +235,35 @@ body {
   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-green:hover {
+  background-color: #2d8822;
+  color: #fff;
+}
+.btn-ovel-small {
+  padding-bottom: 5.072px;
+  padding-inline-end: 12px;
+  padding-inline-start: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 5.072px;
+}
+.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;
+}

src/pages/Home/LandingPage.jsx

@@ -6,11 +6,12 @@ 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";
+import FeatureCard from "./FEatureCard";
 
 const LandingPage = () => {
   return (
     <>
-      <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar">
+      <nav className="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top custom-navbar  py-1">
         <div className="container-fluid px-5 w-100">
           <div className="row w-100">
             <div className="col-md-auto d-flex justify-content-between align-items-center">
@@ -41,7 +42,7 @@ const LandingPage = () => {
               className="collapse navbar-collapse justify-content-end col-md-auto "
               id="navbarNav"
             >
-              <ul className="navbar-nav">
+              <ul className="navbar-nav my-0">
                 <li className="nav-item">
                   <a className="nav-link" href="#">
                     Home
@@ -73,21 +74,21 @@ const LandingPage = () => {
                   </a>
                 </li>
               </ul>
-              <ul className=" navbar-nav align-items-center ms-5">
+              <ul className=" navbar-nav align-items-center ms-5 my-0">
                 <li className="nav-item">
                   <a
-                    className="btn  btn-green btn-square-small btn-sm px-3 my-1 "
+                    className="btn  btn-green btn-ovel-small btn-sm px-3 my-1 "
                     href="/auth/login"
                   >
                     Login
                   </a>
                 </li>
-                <li className="nav-item ms-2">
+                <li className="nav-item ms-1">
                   <a
-                    className="btn btn-sm  btn-green btn-square-small px-3  my-1"
+                    className="btn btn-sm  btn-green btn-ovel-small px-3  my-1"
                     href="#"
                   >
-                    Get Started
+                    Request For Demo
                   </a>
                 </li>
               </ul>
@@ -188,104 +189,96 @@ const LandingPage = () => {
         <div className="container text-center">
           <h3 className="mb-5">Powerful Features for Every Role</h3>
           <div className="row g-4">
-            <div className="col-md-4">
+            <FeatureCard
-              <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
+              imagesrc={"/img/icons/dashboard.png"}
-                <div className="feature-icon mb-3">
+              title={"Analytical Dashboard"}
-                  <img
+              description={
-                    src="/img/icons/dashboard.png"
+                "Real-time insights on attendance, expenses, tasks, and project progress in one view."
-                    alt="Dashboard"
+              }
-                    className="w-14 mb-4 feature-icon-image"
+            ></FeatureCard>
-                  />
+            <FeatureCard
-                </div>
+              imagesrc={"/img/icons/attendance.png"}
-                <h5>Analytical Dashboard</h5>
+              title={"Smart Attendance"}
-                <p>
+              description={
-                  Real-time insights on attendance, expenses, tasks, and project
+                " Site managers mark attendance with employee photos and location verification."
-                  progress in one view.
+              }
-                </p>
+            ></FeatureCard>
-              </div>
+            <FeatureCard
-            </div>
+              imagesrc={"/img/icons/spending.png"}
-            <div className="col-md-4">
+              title={"Expense & Budget Tracking"}
-              <div className="card-slider p-4 bg-light rounded-4 h-100  text-start border">
+              description={
-                <div className="feature-icon mb-3">
+                "Track daily operations, procurement, and travel expenses with approval workflows."
-                  <img
+              }
-                    src="/img/icons/attendance.png"
+            ></FeatureCard>
-                    alt="Smart Attendance"
-                    className="w-14 mb-4 feature-icon-image"
-                  />
-                </div>
-                <h5>Smart Attendance</h5>
-                <p>
-                  Site managers mark attendance with employee photos and
-                  location verification.
-                </p>
-              </div>
-            </div>
 
-            <div className="col-md-4">
+            <FeatureCard
-              <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
+              imagesrc={"/img/icons/directory.png"}
-                <div className="feature-icon mb-3">
+              title={"Project & Task Management"}
-                  <img
+              description={
-                    src="/img/icons/spending.png"
+                "Plan, assign, and track projects and tasks seamlessly for better team collaboration."
-                    alt="Expense & Budget Tracking"
+              }
-                    className="w-14 mb-4 feature-icon-image"
+            ></FeatureCard>
-                  />
+            <FeatureCard
-                </div>
+              imagesrc={"/img/icons/directory.png"}
-                <h5>Expense & Budget Tracking</h5>
+              title={"Document Management"}
-                <p>
+              description={
-                  Track daily operations, procurement, and travel expenses with
+                " Organize, share, and access all your project and employee documents in one place."
-                  approval workflows.
+              }
-                </p>
+            ></FeatureCard>
-              </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="/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="/img/icons/report.png"
-                    alt="Advanced Reporting"
-                    className="w-14 mb-4 feature-icon-image"
-                  />
-                </div>
-                <h5>Advanced Reporting</h5>
-                <p>
-                  Get performance insights with role-based dashboards and
-                  category-wise analytics.
-                </p>
-              </div>
-            </div>
 
-            <div className="col-md-4">
+            <FeatureCard
-              <div className="card-slider p-4 bg-light rounded-4 h-100 text-start border">
+              imagesrc={"/img/icons/directory.png"}
-                <div className="feature-icon mb-3">
+              title={"Service Provider & Subcontractor Tracking"}
-                  <img
+              description={
-                    src="/img/icons/cloud-service.png"
+                "Manage multiple service providers and subcontractors efficiently within projects."
-                    alt="Cloud Scalability"
+              }
-                    className="w-14 mb-4 feature-icon-image"
+            ></FeatureCard>
-                  />
+            <FeatureCard
-                </div>
+              imagesrc={"/img/icons/directory.png"}
-                <h5>Cloud Scalability</h5>
+              title={"Inventory Management"}
-                <p>
+              description={
-                  Built on secure cloud infrastructure for seamless scaling and
+                "Track materials, supplies, and assets — never run short again."
-                  24/7 availability.
+              }
-                </p>
+            ></FeatureCard>
-              </div>
+
-            </div>
+            <FeatureCard
+              imagesrc={"/img/icons/directory.png"}
+              title={"Directory"}
+              description={
+                " Your team, suppliers, vendors organized and connected in one unified directory."
+              }
+            ></FeatureCard>
+
+            <FeatureCard
+              imagesrc={"/img/icons/directory.png"}
+              title={"Image Gallary"}
+              description={
+                "Your team, suppliers, vendors organized and connected in one unified directory."
+              }
+            ></FeatureCard>
+
+            <FeatureCard
+              imagesrc={"/img/icons/report.png"}
+              title={"Role-based Permissions"}
+              description={
+                "Securely control access with customizable roles and permissions."
+              }
+            ></FeatureCard>
+            <FeatureCard
+              imagesrc={"/img/icons/report.png"}
+              title={"Advanced Reporting"}
+              description={
+                "Get performance insights with role-based dashboards and category-wise analytics."
+              }
+            ></FeatureCard>
+
+            <FeatureCard
+              imagesrc={"/img/icons/cloud-service.png"}
+              title={"Cloud Scalability"}
+              description={
+                " Built on secure cloud infrastructure for seamless scaling and 24/7 availability."
+              }
+            ></FeatureCard>
           </div>
         </div>
       </section>
@@ -727,9 +720,36 @@ const LandingPage = () => {
                   </div>
                 </div>
               </div>
+
               <div className="mt-5 pt-5">
-                <a href="#" className="btn-green">
+                <h6 className="footer-title mt-3">Download our app</h6>
-                  Know More
+                <a href="javascript:void(0);" hidden>
+                  <img src="/img/icons/apple-icon.png" alt="apple icon" />
+                </a>
+                <a
+                  href="https://play.google.com/store/apps/details?id=com.marcoonfieldwork.aiot&pcampaignid=web_share	"
+                  target="_blank"
+                >
+                  <img
+                    src="/img/icons/google-play-icon-lite.png"
+                    alt="google play icon"
+                    style={{ width: "200px" }}
+                  />
+                </a>{" "}
+                <a
+                  href="https://play.google.com/store/apps/details?id=com.marcoonfieldwork.aiot&pcampaignid=web_share	"
+                  target="_blank"
+                >
+                  <img
+                    src="/img/icons/apple-icon-lite.png"
+                    alt="apple app store icon"
+                    style={{ width: "200px" }}
+                  />
+                </a>{" "}
+              </div>
+              <div className="mt-5 pt-5">
+                <a href="mailto:sales@marcoaiot.com" className="btn-green">
+                  Contact Support
                 </a>
               </div>
             </div>